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 |