keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Last update: Apr 1, 2022

keyboard-aware-view

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Installation

npm

npm install keyboard-aware-view

yarn

yarn add keyboard-aware-view

Demo

demo.mov

Usage

import {KeyboardAwareView} from 'keyboard-aware-view';
<KeyboardAwareView>
    <TextInput /> 
</KeyboardAwareView>

Props

extraKeyboardOffset :- Sets extra offset from keyboard.

This component is implemented in a ScrollView and has its scrollEnabled default to false. Incase a scroll view is needed in a certain component, add the scrollEnabled prop and set it to true.

All ScrollView Props

Android Support

Android supports this feature natively. In order to have the same feature in android,

Navigate projectDirectory -> android -> app -> src -> main -> AndroidManifest.xml, Change android:windowSoftInputMode to adjustPan

........ ">
  <activity
        ......
        android:windowSoftInputMode="adjustPan">
         ........
  activity>

Motivation

KeyboardAvoidingView from react native doesn't give the expected output in most cases and KeyboardAwareScrollView has wobbling issues in few cases.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

GitHub

https://github.com/abhiram2600/keyboard-aware-view
You might also like...

Parse text and make them into multiple React Native Text elements

Parse text and make them into multiple React Native Text elements

React Native Parsed Text This library allows you to parse a text and extract parts using a RegExp or predefined patterns. Currently there are 3 predef

Jul 29, 2022

A react native android package to show a circle progress view

Circle progress view for react-native android A react native android module to show a circle progress view based on [Circle-Progress-View] (https://gi

Aug 7, 2019

Text input mask for React Native, Android and iOS

Text input mask for React Native, Android and iOS

react-native-text-input-mask Text input mask for React Native on iOS and Android. Examples Setup npm install --save react-native-text-input-mask # --

Aug 3, 2022

Text input mask for React Native on iOS and Android.

Text input mask for React Native on iOS and Android.

Text input mask for React Native, Android and iOS

Aug 3, 2022

Autocomplete text input with clear button and activity indicator

Autocomplete text input with clear button and activity indicator

Progressive Input Progressive Input is used as a part of autocomplete solution. The control has clear button to clear text and activity indicator to s

Nov 24, 2021

Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar

react-native-scrollable-tab-view This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple

Jul 30, 2022

MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects

MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects

AwesomeClockView MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects. Installatio

Jul 28, 2022

:package: Android Native Kit for React-Native

:package: Android Native Kit for React-Native

React Native Android Kit A set of native Android UI components and modules for React Native framework. The purpose of this kit is to offer to React Na

May 17, 2022

⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.

⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.

React-Native Keyboard Manager Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects ⚛ . Thanks to awesome IQK

Jul 31, 2022
A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

react-native-keyboard-accessory A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard. Expo Snack Playground https:

Aug 4, 2022
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Feb 24, 2022
react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row.

react-native-photo-grid React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row Ins

Jul 11, 2022
Automatic linking of URLs, phone numbers, emails, handles, etc. in strings for React Native
Automatic linking of URLs, phone numbers, emails, handles, etc. in strings for React Native

React Native AutoLink Auto-Linking component for React Native. Parses text and wraps URLs, phone numbers, emails, social handles, hashtags, and more w

Jul 23, 2022
A pure javascript masked text and input text component for React-Native.
A pure javascript masked text and input text component for React-Native.

react-native-masked-text This is a simple masked text (normal text and input text) component for React-Native. Alert Hey guys! Unfortunatelly I'm not

Jul 26, 2022
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

Aug 4, 2022
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Oct 25, 2021
🔎 React-Native package to decorate TextInput and get suggestions with good UX
🔎 React-Native package to decorate TextInput and get suggestions with good UX

react-native-suggester React-Native package to decorate TextInput and get suggestions with good UX How to use it ? import { SuggesterProvider, Suggest

May 7, 2022
Plug and play react-native keyboard spacer view.
Plug and play react-native keyboard spacer view.

react-native-keyboard-spacer Plug and play iOS react-native keyboard spacer view. Quick Start Install View: npm install --save react-native-keyboard-s

Aug 6, 2022