KeyboardAvoidingViewSample

main.js

import Expo, { Constants } from 'expo';
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  KeyboardAvoidingView,
  TextInput,
  TouchableOpacity,
  ScrollView
} from 'react-native';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedView: 'AVOID_NONE',
      behavior: ''
    };
  }
  render() {
    const avoidNone = (
      <View style={styles.innerContainer}>
        <TextInput style={styles.input} />
        <TouchableOpacity style={styles.button}>
          <Text>Tap Here</Text>
        </TouchableOpacity>
      </View>
    );

    const avoidView = (
      <View style={styles.innerContainer}>
        <TextInput style={styles.input} />
        <TouchableOpacity style={styles.button}>
          <Text>Tap Here</Text>
        </TouchableOpacity>
      </View>
    );

    const avoidScroll = (
      <View style={styles.innerContainer}>
        <ScrollView style={{ flex: 1 }} contentContainerStyle={{flex: 1}}>
          <TextInput style={styles.input} />
          <TouchableOpacity style={styles.button}>
            <Text>Tap Here</Text>
          </TouchableOpacity>
        </ScrollView>
      </View>
    );

    const views = {
      AVOID_NONE: avoidNone,
      AVOID_VIEW: avoidView,
      AVOID_WITH_SCROLL: avoidScroll
    };

    let positionStyle;
    if (this.state.behavior === 'position') {
      positionStyle = {flex: 1};
    }

    return (
      <View style={styles.container}>
        <KeyboardAvoidingView
          behavior={this.state.behavior}
          style={{ flex: 1 }}
          contentContainerStyle={positionStyle}
        >
          <View style={{ flexDirection: 'row', flex: 1 }}>
            <TouchableOpacity
              style={styles.segmentButton}
              onPress={() => {
                this.setState({
                  selectedView: 'AVOID_NONE',
                  behavior: ''
                });
              }}
            >
              <Text>NONE</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.segmentButton}
              onPress={() => {
                this.setState({
                  selectedView: 'AVOID_VIEW',
                  behavior: 'padding'
                });
              }}
            >
              <Text>PADDING</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.segmentButton}
              onPress={() => {
                this.setState({
                  selectedView: 'AVOID_VIEW',
                  behavior: 'height'
                });
              }}
            >
              <Text>HEIGHT</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.segmentButton}
              onPress={() => {
                this.setState({
                  selectedView: 'AVOID_VIEW',
                  behavior: 'position'
                });
              }}
            >
              <Text>POSITION</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.segmentButton}
              onPress={() => {
                this.setState({
                  selectedView: 'AVOID_WITH_SCROLL',
                  behavior: 'padding'
                });
              }}
            >
              <Text>SCROLL</Text>
            </TouchableOpacity>
          </View>
          {views[this.state.selectedView]}
        </KeyboardAvoidingView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: Constants.statusBarHeight
  },
  segmentButton: {
    flex: 1,
    padding: 10,
    borderWidth: 1
  },
  button: {
    padding: 10,
    backgroundColor: '#009688',
    borderWidth: 1,
    flex: 1
  },
  input: {
    flex: 10,
    borderWidth: 1,
    backgroundColor: 'gray',
    padding: 15
  },
  innerContainer: {
    flex: 10
  }
});

Expo.registerRootComponent(App);