react-native-keyboard-adaptable-view

1.0.7 • Public • Published

React Native Keyboard Adaptable View

A component that adapt to keyboard and automatically scrolls to focused TextInput or custom text input component. It works on both platforms.

license Version npm GitHub issues

GitHub followers GitHub stars


KeyboardAdaptableView example app.

Features

  • Adapt using autoscroll
  • extraHeight prop to adjust the height of the keyboard

Installation

yarn add react-native-keyboard-adaptable-view or npm install --save react-native-keyboard-adaptable-view

Usage

  1. Import the KeyboardAdaptableView from react-native-keyboard-adaptable-view and wrap your content inside of it.
import KeyboardAdaptableView from "react-native-keyboard-adaptable-view";
...
 
render() {
    return (
      <KeyboardAdaptableView>
        //...content
      </KeyboardAdaptableView>
    );
  }
 
...
  1. Add 'adaptKeyboard' prop to components TextInput or custom text input component to active the autoscroll adaptation.
...
  <TextInput adaptKeyboard />
...

OBS: If you are working with a custom text input component, ensure to deal with onFocus, onLayout and forwardRef props inside of it, passing to TextInput of RN.

Props

All the ScrollView props will be accepted, and also:

Name Description Type Required Default Value
extraHeight Add extra height to keyboard view Number 15

Example

import KeyboardAdaptableView from "react-native-keyboard-adaptable-view";
 
render() {
    return (
      <KeyboardAdaptableView style={styles.container}> //<-- Wrap content with KeyboardAdaptableView
        <Title
          text={"KeyboardAdaptableView"}
        />
 
        <Text style={styles.title}>Title1</Text>
        <TextInput
          adaptKeyboard //<-- Add 'adaptKeyboard' prop to TextInput or or custom text input component.
          onChangeText={this.onChangeText}
          placeholder={"TextInput1"}
        />
 
        <Text style={styles.title}>Title2</Text>
        <TextInput
          adaptKeyboard //<-- Add 'adaptKeyboard' prop to TextInput or or custom text input component.
          onChangeText={this.onChangeText}
          placeholder={"TextInput2"}
        />
 
        <Text style={styles.title}>Title3</Text>
        <MyCustomInput
          adaptKeyboard //<-- Add 'adaptKeyboard' prop to TextInput or or custom text input component.
          onChangeText={this.onChangeText}
          placeholder={"TextInput3"}
        />
 
        <Button
          iconName={"check"}
          text={"Finish"}
          onPress={this.onButtonPress}
        />
        </KeyboardAdaptableView> //<-- Wrap content with KeyboardAdaptableView
    );
  }

Author

Fabio Freitas

License

MIT

Package Sidebar

Install

npm i react-native-keyboard-adaptable-view

Weekly Downloads

2

Version

1.0.7

License

MIT

Unpacked Size

10.9 kB

Total Files

7

Last publish

Collaborators

  • fabio.fresan