This library allows you to pass the textinput just above the keyboard, thus floating on it, in cases that this is necessary. All the props are passed down to a new TextInput Component.
npm install react-native-keyboard-avoiding-inputAll the props are passed down to a new TextInput Component.
| iOS Example | Android Example |
| :---------------------------: | :---------------------------: |
| !iOS Example | !Android Example |
``sh`
npm install react-native-keyboard-avoiding-input
`js
import { TextInput } from 'react-native';
import { KeyboardAvoidingInput } from 'react-native-keyboard-avoiding-input';
// ...
// Rest props a text input
placeholder="Text me!"
style={Style.input}
value={state}
onChangeText={setState}
/>
`
`js
import { KeyboardAvoidingInput } from 'react-native-keyboard-avoiding-input';
import styled from 'styled-components/native';
// Custon TextInput with styled-components
const InputAwesome = styled.TextInput
width: 100%;
height: 60px;
font-size: 18px;
flex: 1;
color: #010101;
margin-left: 10px;;
// ...
// Rest props a TextInput
placeholder="Text me!"
/>
`Usage with react-hook-form 📋
`js
import { KeyboardAvoidingInput } from 'react-native-keyboard-avoiding-input';
import styled from 'styled-components/native';
import { Controller, useForm } from 'react-hook-form';
// Custon TextInput with styled-components
const InputAwesome = styled.TextInput
width: 100%;
height: 60px;
font-size: 18px;
flex: 1;
color: #010101;
margin-left: 10px;;
// ...
const {control} = useForm();
control={control}
render={({ field: { onChange, onBlur, value } }) => (
placeholder="It's me! Carlio"
onBlur={onBlur}
onChangeText={onChange}
value={value}
/>
)}
/>
`focusHow to select the next TextInput
The library exposes some methods through the ref , blur and clear
| iOS Example | Android Example |
| :---------------------------: | :---------------------------: |
| !iOS Example | !Android Example |
`js
import { TextInput } from 'react-native';
import { KeyboardAvoidingInput, KeyboardAvoidingInputHandle } from 'react-native-keyboard-avoiding-input';
// ...
const inputRef = React.useRef
// Rest props a text input
onSubmitEditing={()=> inputRef.current?.focus()}
placeholder="Text me!"
/>
ref={inputRef}
// Rest props a text input
placeholder="Other input"
/>
`
| Name | Description | Details |
|----------|:-------------:|------:|
| input | React component type TextInput | required TextInput Component |boolean
|returnKeyTypeClear| Changes returnKey behavior to clean the TextInput | |returnKeyType
|returnKeyLabel| By default the is used | string |returnKeyLabel
|returnKeyIcon| Renders an icon in place of or returnKeyType text | React component |secureTextEntry
|toggleVisibilityPassword| Renders toggle for show and hide pass, required | boolean |Show
|toggleShowText|Change the text of when toggleVisibilityPassword is true | string |Hide
|toggleHideText| Change the text of when toggleVisibilityPassword is true | string |Show
|showPasswordIcon| Renders an icon in place of | React component |Hide
|hidePasswordIcon|Renders an icon in place of | React component |Done
|actionLabelStyle| responsible for the style of the texts of , Clear, Hide or Show | StyleProp |StyleProp
|actionContainerStyle| responsible for the container of the action text | |KeyboardAvoidingInput
|containerStyle| Responsible for the container style | StyleProp |KeyboardAvoidingInput
|inputStyle| Responsible for the style | StyleProp |function
|onOpen| function called the input is opened | |function` |
|onClose| function called the input is closed|
See the contributing guide to learn how to contribute to the repository and the development workflow.
react-native-keyboard-avoiding-input is MIT licensed and built with ❤️ in 🇧🇷 by Godrix