AKAV (ActualKeyboardAvoidingView)
Because https://reactnative.dev/docs/keyboardavoidingview isn't enough (we still use it though)
The Problem:
Keyboard placement in React Native has been an inconvience for me and for many other developers. And simply follolowing the docs isn't quite ideal.
The Solution:
A universal view where the skelenton of the page is defined, and action buttons are well positioned, regardless where the keyboard is.
Preview:
| Keyboard Shown | Keyboard Hidden |
|---|---|
 |
 |
import AKAV from '@ajxb/akav'
const RenderSubmitButton = () => {
return <Button type={'primary'} title={'Login'} onPress={handleLogin}/> } offset={120} pl={10} pr={10} testID={'loginSubmitButton'}/>
}
<AKAV submitButton={<RenderSubmitButton/>}
<MyLogo/>
<MyEmailInputField/>
<MyPasswordInputField/>
</AKAV/>| Prop | Description | Type | Default |
|---|---|---|---|
submitButton |
Most likely View container that contains the page's - Call to - action buttons |
ReactNode | Required |
children |
The rest of the page's components, like forms and images | [ReactNode] | Required |
background |
The background color of the SafeAreaView that contains the children
|
String | #FFFFFF |
pl |
Padding left of the SafeAreaView that contains the children
|
Number | 20 |
pr |
Padding right of the SafeAreaView that contains the children
|
Number | 20 |
needsSTB |
Does the ScrollView need to scroll to the bottom of the page when keyboard opens? (Useful in some edge cases) |
Boolean | false |
offset |
The KeyboardAvoidingView offset, (see Documentation) |
Number | 100 |