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

Usage

The KeyboardAwareScrollView component is a wrapper around react-native-keyboard-aware-scroll-view's KeyboardAwareScrollView component that automatically adjusts its content when the keyboard appears. It's particularly useful for forms and other input-heavy screens where you want to ensure that the focused input remains visible when the keyboard is shown.

() => {
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');

  return (
    <KeyboardAwareScrollView
      keyboardAware={true}
      dismissKeyboardOnScroll={true}
    >
      <View>
        <Heading>Form Example</Heading>
        <InputField
          label="First Field"
          value={value1}
          onChangeText={setValue1}
        />
        <InputField
          label="Second Field"
          value={value2}
          onChangeText={setValue2}
        />
        <Button onPress={() => {}}>Submit</Button>
      </View>
    </KeyboardAwareScrollView>
  );
};

Platform Differences

• On iOS, the component uses react-native-keyboard-aware-scroll-view which provides smooth keyboard handling.
• On Android, it falls back to the native ScrollView with basic keyboard handling.

ScrollView Classes

Class Name	Description
abyss-keyboard-aware-scroll-view-root	Root element of view

ScrollView Props

Extends React Native - ScrollView Props

Prop Name	Type	Default	Description
children	React.ReactNode	-	The content of the ScrollView
dismissKeyboardOnScroll	boolean	false	Dismisses the keyboard when scrolling begins
keyboardAware	boolean	false	Enables or disables keyboard awareness