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.

Related tags

keyboard-aware-view
Overview

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

Owner
Abhiram K
from abhiram import respositories show(respositories.pinned)
Abhiram K
Cross Platform React Native UI Toolkit

Cross-Platform React Native UI Toolkit

React Native Elements 21.5k Oct 18, 2021
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.7k Oct 12, 2021
⚛ 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

Douglas Nassif Roma Junior 611 Oct 14, 2021
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:

Arda Pektaş 354 Oct 7, 2021
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

Ben-hur Santos Ott 1.5k Oct 12, 2021
💬 The most complete chat UI for React Native

?? Gifted Chat The most complete chat UI for React Native & Web Demo Web ?? Snack GiftedChat playground Sponsor Coding Bootcamp in Paris co-founded by

Farid Safi 11.1k Oct 11, 2021
Text input mask for React Native on iOS and Android.

Text input mask for React Native, Android and iOS

null 1k Oct 17, 2021
Pixel–perfect, native–looking typographic styles for React Native ✒️

Pixel–perfect, native–looking typographic styles for React Native. Why Creating great Text Styles in React Native is not a simple task, it requires a

Hector Garcia 3.3k Oct 14, 2021
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

Josh Swan 449 Oct 17, 2021
[DEPRECATED] Calendar Component for React Native

⚠️ Deprecated ⚠️ This library is no longer being actively maintained. Try https://github.com/wix/react-native-calendars react-native-calendar A <Calen

Christopher Dro 544 Sep 7, 2021
React Native component that provides several ways to resize text within a certain dimension/parent.

React Native Auto Size Text React Native component for Android and iOS that provides several ways to resize text within a certain dimension/parent. Po

Everaldo Rosa de Souza Junior 42 Jul 26, 2021
Handy toolbelt to deal nicely with offline/online connectivity in a React Native app. Smooth redux integration ✈️

react-native-offline Handful of utilities you should keep in your toolbelt to handle offline/online connectivity in React Native. It supports iOS, And

Raúl Gómez Acuña 2k Oct 19, 2021
Flexible and lightweight React Native component for UITableView made with pure CSS

react-native-tableview-simple ?? This component is used in my production app Game ideas. Make sure to check it out! ?? This cross-platform component i

Patrick Puritscher 406 Oct 3, 2021
A performant customizable bottom sheet component made on top of wix react-native-navigation library.

?? React Native Navigation Bottom Sheet Extension A performant customizable bottom sheet component made on top of wix react-native-navigation library.

CursedWizard 23 Oct 12, 2021
Keyboard events for react-native

react-native-keyboardevents Keyboard events for react-native As of react-native 0.11 this module is obsolete. Now you can do something like the follow

Johannes Lumpe 247 Oct 3, 2021
react-native wrapper for android BottomSheetBehavior

react-native-bottom-sheet-behavior react-native wrapper for android BottomSheetBehavior, supports FloatingActionButton. Demo See the Google Maps gif i

César Augusto 1.1k Oct 18, 2021
Easier and faster developing your React Native apps

React Native Fast Base Easier and faster developing your React native apps Installation If you use yarn: yarn add react-native-fast-base Or by npm: n

M.H.Pousti 3 Jun 5, 2021
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.

react-native-snap-carousel ✨ Some great news for you, fellow plugin user! ?? Head over there now to learn more about all the goodness that's coming yo

Meliorence 9k Oct 12, 2021