React Native Keyboard Adaptable View
A component that adapt to keyboard and automatically scrolls to focused TextInput
or custom text input component. It works on both platforms.
KeyboardAdaptableView example app.
Features
- Adapt using autoscroll
- extraHeight prop to adjust the height of the keyboard
Installation
yarn add react-native-keyboard-adaptable-view
or
npm install --save react-native-keyboard-adaptable-view
Usage
- Import the
KeyboardAdaptableView
fromreact-native-keyboard-adaptable-view
and wrap your content inside of it.
;... { return <KeyboardAdaptableView> //...content </KeyboardAdaptableView> ; } ...
- Add 'adaptKeyboard' prop to components
TextInput
or custom text input component to active the autoscroll adaptation.
... <TextInput adaptKeyboard />...
OBS: If you are working with a custom text input component, ensure to deal with onFocus, onLayout and forwardRef props inside of it, passing to TextInput of RN.
Props
All the ScrollView
props will be accepted, and also:
Name | Description | Type | Required | Default Value |
---|---|---|---|---|
extraHeight | Add extra height to keyboard view | Number | 15 |
Example
; { return <KeyboardAdaptableView style=stylescontainer> //<-- Wrap content with KeyboardAdaptableView <Title text="KeyboardAdaptableView" /> <Text style=stylestitle>Title1</Text> <TextInput adaptKeyboard //<-- Add 'adaptKeyboard' prop to TextInput or or custom text input component. onChangeText=thisonChangeText placeholder="TextInput1" /> <Text style=stylestitle>Title2</Text> <TextInput adaptKeyboard //<-- Add 'adaptKeyboard' prop to TextInput or or custom text input component. onChangeText=thisonChangeText placeholder="TextInput2" /> <Text style=stylestitle>Title3</Text> <MyCustomInput adaptKeyboard //<-- Add 'adaptKeyboard' prop to TextInput or or custom text input component. onChangeText=thisonChangeText placeholder="TextInput3" /> <Button iconName="check" text="Finish" onPress=thisonButtonPress /> </KeyboardAdaptableView> //<-- Wrap content with KeyboardAdaptableView ; }
Author
License
MIT