@algotech-software/Avoidable
Avoidable is a custom package to handle Keyboard interaction with TextInputs
Motivation
Getting a single input to show up above the keyboard can be tricky at times, but making a whole form visible at once is lot more difficult than it should be.
Solution
This package aims to improve the way keyboards and inputs are being handled, giving you multiple ways to get the input into a visible spot.
Table of contents
Installation
Installation can be done through npm
:
npm install @algotech-software/avoidable
or yarn
:
yarn add @algotech-software/avoidable
Quick Start
Import the components
import { Avoidable } from '@algotech-software/avoidable';
Wrap your screen with the Avoidable Component
<Avoidable>
<TextInput placeholder="Email" />
<TextInput placeholder="Password" />
<Button title="Log In" />
</Avoidable>
Note
You have to wrap your entire screen with
<Avoidable>
component in order for it to work as expected.
And/or define an area within your Avoidable Component
<Avoidable>
{/* Content above */}
<Avoidable.Area>
<TextInput placeholder="Email" />
<TextInput placeholder="Password" />
<Button title="Log In" />
</Avoidable.Area>
{/* Content below */}
</Avoidable>
API
Avoidable
This is the main component, built around a ScrollView
component, that should wrap the entire screen it is used on.
Avoidable Props
Name | Type | Description |
---|---|---|
alignTo |
String - 'input' or 'bottom'
|
Determines what gets aligned to the keyboard. If input , the focused input will be right above the keyboard. If bottom , the last component inside <Avoidable> (or inside <Avoidable.Area> ) will be positioned right above the keyboard. Default: input
|
contextAware | Boolean |
If true , input will only go above the keyboard if it normally would get covered by the keyboard when opened. Default true
|
containerStyle | View Style | Container Styles passed to the ScrollView
|
keyboardHiddenContainerStyle | View Style | Container Styles passed to the ScrollView . Applied only when the keyboard is hidden |
scrollViewProps |
Object - ScrollView Props
|
Props passed to the ScrollView
|
safeMarginContentHeight | Number |
safeMarginContentHeight is the adjustment to the height of the elements that you want to align when determining if the content fits between the keyboard and the top of the screen. This is important when aligning to bottom but, the content does not fit, it will automatically align to input . Default 0
|
safeMarginBottom | Number |
safeMarginBottom is the distance between the keyboard and the desired element that it gets aligned to. If you want to leave some space between the keyboard and your input or form change this. Default 0
|
Avoidable.Area
Only when contextAware = true
and alignTo = 'bottom'
an Area must be defined in order for the package to work properly. This component specifies the components/inputs that should avoid the keyboard.
Dependencies
react-native-safe-area-context
Having react-native-safe-area-context
as a dependency also means you will have to define a SafeAreaProvider
in order for this to work. More details here.
Example App
The example app includes all the basic use cases of our component. You can run the example app by cloning the repo and following these steps:
cd example
npm install
IOS
cd ios
pod install
cd ..
npx react-native run-ios
Android
npx react-native run-android
Usage
Align to Input
<Avoidable
alignTo="input"
contextAware={false}
/>
Align to Input - Context Aware
<Avoidable
alignTo="input"
contextAware={true}
/>
Align to Bottom
<Avoidable
alignTo="bottom"
contextAware={false}
/>
Align to Bottom - Context Aware
<Avoidable
alignTo="bottom"
contextAware={true}
/>