react-native-keyboard-avoiding-input
v0.1.10
Published
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.
Downloads
75
Maintainers
Readme
react native keyboard avoiding input 📲
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.
| iOS Example | Android Example | | :---------------------------: | :---------------------------: | | | |
Installation
npm install react-native-keyboard-avoiding-input
Usage
import { TextInput } from 'react-native';
import { KeyboardAvoidingInput } from 'react-native-keyboard-avoiding-input';
// ...
<KeyboardAvoidingInput
input={TextInput}
// Rest props a text input
placeholder="Text me!"
style={Style.input}
value={state}
onChangeText={setState}
/>
Usage with style-components 💅🏾
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;
`;
// ...
<KeyboardAvoidingInput
input={InputAwesome}
// Rest props a TextInput
placeholder="Text me!"
/>
Usage with react-hook-form 📋
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();
<Controller
name="name"
control={control}
render={({ field: { onChange, onBlur, value } }) => (
<KeyboardAvoidingInput
input={InputAwesome}
placeholder="It's me! Carlio"
onBlur={onBlur}
onChangeText={onChange}
value={value}
/>
)}
/>
How to select the next TextInput
The library exposes some methods through the ref focus
, blur
and clear
| iOS Example | Android Example | | :---------------------------: | :---------------------------: | | | |
import { TextInput } from 'react-native';
import { KeyboardAvoidingInput, KeyboardAvoidingInputHandle } from 'react-native-keyboard-avoiding-input';
// ...
const inputRef = React.useRef<KeyboardAvoidingInputHandle>(null)
<KeyboardAvoidingInput
input={TextInput}
// Rest props a text input
onSubmitEditing={()=> inputRef.current?.focus()}
placeholder="Text me!"
/>
<KeyboardAvoidingInput
input={TextInput}
ref={inputRef}
// Rest props a text input
placeholder="Other input"
/>
Props
| Name | Description | Details |
|----------|:-------------:|------:|
| input | React component type TextInput | required
TextInput Component |
|returnKeyTypeClear| Changes returnKey behavior to clean the TextInput | boolean
|
|returnKeyLabel| By default the returnKeyType
is used | string
|
|returnKeyIcon| Renders an icon in place of returnKeyLabel
or returnKeyType
text | React component
|
|toggleVisibilityPassword| Renders toggle for show and hide pass, required secureTextEntry
| boolean
|
|toggleShowText|Change the text of Show
when toggleVisibilityPassword is true | string
|
|toggleHideText| Change the text of Hide
when toggleVisibilityPassword is true | string
|
|showPasswordIcon| Renders an icon in place of Show
| React component
|
|hidePasswordIcon|Renders an icon in place of Hide
| React component
|
|actionLabelStyle| responsible for the style of the texts of Done
, Clear
, Hide
or Show
| StyleProp<TextStyle>
|
|actionContainerStyle| responsible for the container of the action text | StyleProp<ViewStyle>
|
|containerStyle| Responsible for the KeyboardAvoidingInput
container style | StyleProp<ViewStyle>
|
|inputStyle| Responsible for the KeyboardAvoidingInput
style | StyleProp<TextInputStyle>
|
|onOpen| function called the input is opened | function
|
|onClose| function called the input is closed| function
|
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
Give me a Star
If you think this project is helpful just give me a ⭐️ :D
License
react-native-keyboard-avoiding-input is MIT licensed and built with ❤️ in 🇧🇷 by Godrix