KeyboardAvoidingView

• The KeyboardAvoidingView component is designed to improve the user experience on mobile devices by preventing the virtual keyboard from covering the input elements. This React Native component is particularly enhanced to be aware of additional UI elements specific to Shop app context, such as the mini app frame and optional navigation headers.

  The component functions by adjusting the view of its child components when the keyboard is displayed, ensuring input fields are visible. It is especially beneficial in forms and chat interfaces where users frequently interact with text inputs.

  Here's an example of how you might use the KeyboardAvoidingView component:

• 
  

  <KeyboardAvoidingView style={{ flex: 1 }}>
    <CoolList />
    <SomeInput />
  </KeyboardAvoidingView>

Integration

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Step 1: Importing the Component

Start by importing the KeyboardAvoidingView from where it is defined:

import { KeyboardAvoidingView } from '@shopify/shop-minis-platform-sdk';

Step 2: Implementing the Component

Insert the KeyboardAvoidingView into your component's structure. Ensure that it wraps any components that might require visibility when the keyboard is active:

<KeyboardAvoidingView>
  <TextInput placeholder="Enter text here..." />
  <SubmitButton onPress={handleSubmit} />
</KeyboardAvoidingView>

Examples

Basic Usage:

<KeyboardAvoidingView>
  <TextInput placeholder="Type here..." />
  <Button title="Submit" onPress={onSubmit} />
</KeyboardAvoidingView>

Advanced Usage with Custom Offset:

<KeyboardAvoidingView
  behavior="height"
  keyboardVerticalOffset={100}
>
  <MessagesList />
  <MessageInput />
</KeyboardAvoidingView>

Props

• children (ViewProps['children']): Child components that need adjusting when the keyboard is visible.
• style (ViewStyle optional): Style to apply to the KeyboardAvoidingView container.
• behavior ('height' | 'position' | 'padding' | undefined optional) : The type of behavior to use for the keyboard, with specific handling for iOS.
• keyboardVerticalOffset (number optional): The distance between the top of the user screen and the react-native view, can be customized to offset keyboard positioning.

For more details on the props, please refer to the KeyboardAvoidingView Props.