You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-native-avoid-softinput

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-avoid-softinput

Native logic for avoiding covering text inputs by soft input views

4.0.0
Source
npmnpm
Version published
Weekly downloads
26K
17.13%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-avoid-softinput

React Native Avoid SoftInput logo
Handle keyboard in React Native apps like a Pro

Native solution for common React Native problem of focused views being covered by soft input view. It is solved by listening for soft input events and applying translation to react root view (or bottom padding if focused element's parent is scroll view) entirely on native side and only if currently focused view is covered by soft input frame. It supports focused views being positioned in scroll views and regular views (check out example app). It also supports modal content, when content is wrapped in AvoidSoftInputView.

Form example Sticky footer example

Documentation

Check package documentation

Installation

Version 3.x.x supports React Native 0.65+ (old architecture) and has support for Android API 21+ and iOS 11.0+. It also supports Fabric & TurboModules (new architecture) with React Native 0.70+.

Library supports Android & iOS, for out-of-tree platforms, View component is used as fallback.

  • Install library with your package manager:
yarn add react-native-avoid-softinput

or

npm i --save react-native-avoid-softinput
  • (iOS-only) Install pods:
npx pod-install
  • (iOS-only) Create and configure bridging header in your iOS project, if it doesn't exist (the easiest way is to create empty .swift file in XCode)

For reference, you can visit Getting started section

Expo

Usage

Check usage guides for module and view

Alternatives

If library does not suite your needs, you can check alternatives section

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Keywords

react-native

FAQs

Package last updated on 13 Jul 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts