@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
• Quick Start
• API
  • Avoidable
    • Props
  • Avoidable.Area
• Dependencies
• Example App
• Usage
  • Align To Input
  • Align To Input - Context Aware
  • Align To Bottom
  • Align To Bottom - Context Aware

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}
 />