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 - KeyboardAvoidingView props.

Name	Type	Default	Required	Description
contentContainerStyle	Abyss.Style<"View">	-	-	The style of the content container(View) when behavior is 'position'.
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	Abyss.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.
style	Abyss.Style<"KeyboardAvoidingView">	-	-	KeyboardAvoidingView style properties with Abyss token mapping