CODEWITHSUNDEEP
androidioskeyboardreact-native
Code Monkey
Code Monkey

Reputation: 988

How to attach TextInput to the keyboard in react-native


I'm building an app in react-native which is targeted to iOS and Android.
One of the things is to have a text input which is connected to the keyboard.
The way it works is that the TextInput is in the bottom of the screen. When it is touched - the keyboard opens and the text input is animated up or down with the keyboard at the same speed (as they are attached together).
Right now, I using onKeyboardWillShow and onKeyboardWillHide and animating the TextInput. The problem is that it does not move at the same rate.
Basically, I'm trying to do this:
https://github.com/Just-/UIViewController-KeyboardAnimation
Any suggestion will be helpful.

Upvotes: 4

Views: 5416

Answers (2)

Reza Ghorbani
Reza Ghorbani

Reputation: 2876

Use react native's keyboard avoiding view KeyboardAvoidingView and Example Like 

import {ScrollView, Text, TextInput, View, KeyboardAvoidingView} from "react-native";

and in render function nest the View and TextInput

<KeyboardAvoidingView behavior='padding'>
  <View style={styles.textInputContainer}>
    <TextInput
      value={this.state.data}
      style={styles.textInput}
      onChangeText={this.handleChangeData}
    />
  </View>
</KeyboardAvoidingView>

It will take care of that

Upvotes: 4

Thaume
Thaume

Reputation: 494

The closest I've been able to get to Keyboard animation is by using LayoutAnimation:

import React, { LayoutAnimation } from 'react-native';

componentWillMount() {
  DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this));
  DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this));
}

keyboardWillShow(e) {
  const visibleHeight = Dimensions.get('window').height - e.endCoordinates.height;
  LayoutAnimation.configureNext(LayoutAnimation.create(
    e.duration,
    LayoutAnimation.Types[e.easing]
  ));
  this.setState({ visibleHeight });
}

this.state.visibleHeight does manage the whole <View> container height.

Of course do not forget to stop listening for keyboard events:

componentWillUnmount() {
  DeviceEventEmitter.removeAllListeners('keyboardWillShow');
  DeviceEventEmitter.removeAllListeners('keyboardWillHide');
}

Cf AnimationsLayout source code : https://github.com/facebook/react-native/blob/60db876f666e256eba8527251ce7035cfbca6014/Libraries/LayoutAnimation/LayoutAnimation.js#L26

Upvotes: 3

Related Questions