akav's Introduction

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

Recommend Projects