import { KeyboardAvoidingView } from '@uhg-abyss/mobile';

Usage

The KeyboardAvoidingView component is designed to automatically adjust the layout of your application when the on-screen keyboard appears, ensuring that the content remains visible and accessible to the user.

This component extends the KeyboardAvoidingView core component present in React Native, while also supporting tokens in the style, contentContainerStyle, and keyboardVerticalOffset props.

() => {
  const [value, setValue] = useState('');
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior="padding"
      keyboardVerticalOffset={100}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.innerView}>
          <View>
            <Heading style={styles.heading} offset={4}>
              Press the Input
            </Heading>
          </View>
          <InputField label="Username" value={value} onChangeText={setValue} />
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  heading: {
    marginBottom: '$semantic.spacing.sm',
  },
  innerView: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-between',
  },
});

KeyboardAvoidingView Classes

Class Name	Description
abyss-keyboard-avoiding-view-root	KeyboardAvoidingView root element.

KeyboardAvoidingView Props

Extends React Native - KeyboardAvoidingViewopens in a new window props.

Name	Type	Default	Description
contentContainerStyle	Style<"View">		The style of the content container(View) when behavior is 'position'.
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hitSlop	number | Insets | null | undefined		This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels. If a Touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{ top: 10, bottom: 10, left: 0, right: 0 }} NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
keyboardVerticalOffset	Space | undefined		This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases.
rootTestID	string | undefined		Adds the passed in test ID to the root element of the component.
style	Style<"KeyboardAvoidingView">		Style properties with Abyss token mapping
styles	Styles<KeyboardAvoidingViewClasses> | undefined		Add custom styles to component by class name with Abyss token mapping
testID	string | undefined		Using this prop will append -abyss and the name of the element class at the end of the testID passed in. If you want to only use string passed in on the root element, use the rootTestID prop instead. Used to locate this view in end-to-end tests.