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