react-native-keyboard-accessory

The KeyboardAccessoryNavigation component inherits all props from KeyboardAccessoryView. Additional props include:

Props for KeyboardAccessoryView:

The KeyboardAccessoryNavigation component provides a specialized toolbar that sits above the keyboard. It is designed for forms or multi-step inputs where users need to navigate between fields (Next/Previous) or dismiss the keyboard (Done).

It wraps KeyboardAccessoryView and provides a layout containing:

1. Navigation Buttons: Left-aligned buttons for previous and next actions.
2. Info Area: A central area for an infoMessage or a custom infoContainer.
3. Done Button: A right-aligned button to dismiss the keyboard.

All buttons can be customized with custom elements, styles, and hit slops.

import KeyboardAccessoryNavigation from 'react-native-keyboard-accessory';

// Example usage concept
<KeyboardAccessoryNavigation
  onNext={() => console.log('Next field')}
  onPrevious={() => console.log('Prev field')}
  onDone={() => console.log('Done pressed')}
  nextButtonDirection="down"
  previousButtonDirection="up"
  infoMessage="Please enter your email"
  tintColor="#007AFF"
/>

KeyboardAccessoryView is a component designed to render a 'sticky' view that sits on top of the software keyboard when it is visible. It handles keyboard event listeners, layout animations, and safe area adjustments automatically.

Key Behaviors

• Visibility: By default, the accessory is only visible when the keyboard is active. You can use alwaysVisible={true} to keep it visible regardless of keyboard state.
• Positioning: The component uses absolute positioning to sit above the keyboard. You can adjust the gap between the keyboard and the accessory using bumperHeight.
• Animations: It uses LayoutAnimation to smoothly transition the accessory's position and opacity. You can control which platform triggers animations via animateOn and provide custom animation configurations via animationConfig.
• Render Props: The children prop can be a function, allowing you to access the isKeyboardVisible state within your accessory UI.

import KeyboardAccessoryView from 'react-native-keyboard-accessory';

<KeyboardAccessoryView
  alwaysVisible={false}
  bumperHeight={10}
  style={{ backgroundColor: 'white' }}
>
  {( { isKeyboardVisible } ) => (
    <View>
      <Text>{isKeyboardVisible ? 'Keyboard is up!' : 'Keyboard is down'}</Text>
    </View>
  )}
</KeyboardAccessoryView>

The KeyboardAccessoryNavigation component accepts the following props to control its behavior and appearance:

Navigation Props

• onNext: Function called when the next button is pressed.
• onPrevious: Function called when the previous button is pressed.
• onDone: Function called when the done button is pressed (also triggers Keyboard.dismiss()).
• nextButton: Custom element to replace the default next arrow.
• previousButton: Custom element to replace the default previous arrow.
• nextDisabled: Boolean to disable the next button (default: false).
• previousDisabled: Boolean to disable the previous button (default: false).
• nextHidden: Boolean to hide the next button (default: false).
• previousHidden: Boolean to hide the previous button (default: false).
• nextButtonDirection: Direction for the next arrow: 'up', 'down', 'left', or 'right' (default: 'down').
• previousButtonDirection: Direction for the previous arrow: 'up', 'down', 'left', or 'right' (default: 'up').

Done Button Props

• doneButton: Custom element to replace the default done button.
• doneButtonTitle: String text for the done button (default: 'Done').
• doneButtonStyle: Style for the done button container.
• doneButtonTitleStyle: Style for the done button text.
• doneButtonHitslop: Hit slop for the done button.

Info & Styling Props

• infoMessage: String text to display in the info area.
• infoContainer: Custom element to replace the info message/text.
• infoMessageStyle: Style for the info text.
• tintColor: Color applied to text and icons (default: '#007AFF').
• accessoryStyle: Style for the main accessory container.

Hit Slop & Button Styles

• nextButtonStyle: Style for the next button.
• previousButtonStyle: Style for the previous button.
• nextButtonHitslop: Hit slop for the next button.
• previousButtonHitslop: Hit slop for the previous button.