React-native-hide-onkeyboard NPM

react-native-hide-onkeyboard

A library for hiding or showing a view when the keyboard is present.

Getting started 👨‍🏫

To install the library, you can use either npm or yarn:

npm install react-native-hide-onkeyboard

yarn add @ react-native-hide-onkeyboard

Usage

Import

import { HideOnKeyboard, ShowOnKeyboard } from "react-native-hide-onkeyboard";

Example

Add the component and place any views you want to hide inside. In the following example, the text view is hidden when the keyboard is opened:

import { HideOnKeyboard, ShowOnKeyboard } from "react-native-hide-onkeyboard";

  <HideOnKeyboard style={{ backgroundColor: 'red', height: 100, width: 100 }}>
       
       <Text >I will hide when the key board is open</Text>

   </HideOnKeyboard>

   <ShowOnKeyboard>
        
        <Text> I will only appear when the keyboard is open</Text>
        
    </ShowOnKeyboard>

Styling

You can apply styles to the components just like you would with a normal react native View component. For example:

<HideOnKeyboard style={{ backgroundColor: 'red', height: 100, width: 100 }}>
    <Text style={{ color: 'white', fontSize: 20 }}>I will hide when the keyboard is open</Text>
</HideOnKeyboard>