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

or

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>

Demo

Contributing

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

License

MIT This library is licensed under the MIT License.

Made with create-react-native-library