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

1npm install react-native-keyboard-avoiding-input

Usage

1import { TextInput } from 'react-native';
2import { KeyboardAvoidingInput } from 'react-native-keyboard-avoiding-input';
3
4// ...
5
6 <KeyboardAvoidingInput
7    input={TextInput}
8
9    // Rest props a text input
10    placeholder="Text me!"
11    style={Style.input}
12    value={state}
13    onChangeText={setState}
14      />

Usage with style-components 💅🏾

1import { KeyboardAvoidingInput } from 'react-native-keyboard-avoiding-input';
2import styled from 'styled-components/native';
3
4
5// Custon TextInput with styled-components
6const InputAwesome = styled.TextInput`
7  width: 100%;
8  height: 60px;
9  font-size: 18px;
10  flex: 1;
11  color: #010101;
12  margin-left: 10px;
13`;
14
15// ...
16
17 <KeyboardAvoidingInput
18    input={InputAwesome}
19
20    // Rest props a TextInput
21    placeholder="Text me!"
22      />

Usage with react-hook-form 📋

1import { KeyboardAvoidingInput } from 'react-native-keyboard-avoiding-input';
2import styled from 'styled-components/native';
3import { Controller, useForm } from 'react-hook-form';
4
5
6// Custon TextInput with styled-components
7const InputAwesome = styled.TextInput`
8  width: 100%;
9  height: 60px;
10  font-size: 18px;
11  flex: 1;
12  color: #010101;
13  margin-left: 10px;
14`;
15
16// ...
17const {control} = useForm();
18
19<Controller
20    name="name"
21    control={control}
22    render={({ field: { onChange, onBlur, value } }) => (
23      <KeyboardAvoidingInput
24        input={InputAwesome}
25
26        placeholder="It's me! Carlio"
27        onBlur={onBlur}
28        onChangeText={onChange}
29        value={value}
30          />
31        )}
32      />

How to select the next TextInput

The library exposes some methods through the ref focus, blur and clear

iOS Example	Android Example

1import { TextInput } from 'react-native';
2import { KeyboardAvoidingInput, KeyboardAvoidingInputHandle } from 'react-native-keyboard-avoiding-input';
3
4// ...
5
6const inputRef = React.useRef<KeyboardAvoidingInputHandle>(null)
7
8 <KeyboardAvoidingInput
9    input={TextInput}
10    // Rest props a text input
11    onSubmitEditing={()=> inputRef.current?.focus()}
12    placeholder="Text me!"
13    />
14
15 <KeyboardAvoidingInput
16    input={TextInput}
17    ref={inputRef}
18    // Rest props a text input
19    placeholder="Other input"
20    />
21

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