【React Native】TextInputがキーボードで隠れてしまうのを防ぐ

TextInputがキーボードで隠れてしまう問題

スマホ画面でブラウザ・ネイティブの入力フォームをクリックすると、入力フォームが隠れてしまうことがあります。

import React from 'react';
import { StyleSheet, View, ScrollView, TextInput } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput placeholder={'placeholder'} style={styles.TextInput} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ff0',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  TextInput: {
    marginBottom: 44
  }
});

React Nativeでも同様の問題が発生しますが、KeyboardAvoidingViewによって防ぐことができます。

KeyboardAvoidingView

KeyboardAvoidingViewを対象コンポーネントの親とすることで、TextInputにフォーカスしたときにキーボードで入力欄が隠れるないように画面をスクロールさせることができます。

export default class App extends React.Component {
  render() {
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <TextInput placeholder={'placeholder'} style={styles.TextInput} />
      </KeyboardAvoidingView>
    );
  }
}

参考

facebook.github.io