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',
  },
});

View Classes

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

View Props

Extends React Native - KeyboardAvoidingView Props

Prop Name	Type	Default	Description
contentContainerStyle	Abyss.Style<"View">	-	Style object for the content container within the KeyboardAvoidingView.
keyboardVerticalOffset	Abyss.Space	-	The distance between the keyboard and the view.
style	Abyss.Style<"KeyboardAvoidingView">	-	Object or array of objects defining the style of the KeyboardAvoidingView component with design tokens.