Testing keyboard overlay or push

App.js

import React, { Component } from 'react';
import { 
  Text, 
  View, 
  FlatList,
  TextInput,
  StyleSheet,
  TouchableOpacity,
  KeyboardAvoidingView,
  ScrollView,
  Platform
} from 'react-native';

const data = [
    {name: 1}, 
    {name: 2},
    {name: 3}, 
    {name: 4},
    {name: 5}, 
    {name: 6},
    {name: 7}, 
    {name: 9},
    {name: 10},
    {name: 11},
    {name: 12}, 
    {name: 13},
  ]

class ListItem extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            editable: false
        }
    }
    
    toggleEditable(){
      this.setState({
        editable: true,
      })
    }

    render() {
        return (
            <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                <TouchableOpacity 
                    style={[styles.editFieldContainer]} 
                    onPress={() => this.toggleEditable()}>
                    {this.state.editable ?
                        <TextInput 
                            style ={styles.editText}
                            autoFocus={true}
                            onBlur={() => this.setState({editable: false})}
                            onSubmitEditing={() => this.setState({editable: false})}/>
                    :
                        <Text style ={styles.basicText}>
                            {this.props.item.name}
                        </Text>
                    }
                </TouchableOpacity>
            </View>
        )
    }
}


export default class App extends Component {
  constructor(props){
    super(props);
  }
  
  RenderHeader(){
    return(
      <View style={styles.headerContainer}>
        <Text style={styles.headerText}>
          Header
        </Text>
      </View>
    )
  }
  
  RenderFooter(){
    return(
       <View style={styles.footerContainer}>
        <Text style={styles.headerText}>
          Footer
        </Text>
      </View>
    )
  }
  
  render() {
    return (
      <View  style={styles.container}>
        {this.RenderHeader()}
          <FlatList
              data={data}
              renderItem={({item}) => (
                  <ListItem
                    item = {item}/>
              )}
              extraData={this.state}
              keyExtractor={item => item.name}/>
        {this.RenderFooter()}
      </View>
    );
  }
  /*
  render() {
    return (
      <KeyboardAvoidingView
        style={styles.container}
        behavior= {(Platform.OS === 'ios')? "padding" : null}>
        {this.RenderHeader()}
        <ScrollView scrollEnabled={true}>
          <FlatList
              data={data}
              renderItem={({item}) => (
                  <ListItem
                    item = {item}/>
              )}
              extraData={this.state}
              keyExtractor={item => item.name}/>
        </ScrollView>
        {this.RenderFooter()}
      </KeyboardAvoidingView>
    );
  }
  */
}

const Colors = {
    primaryTextColor: 'beige',
    background: '#2f2f30',
    border: '#cfcfcf'
}

const Styles = {
  borderWidth: 2,
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: Colors.background,
  },
  headerContainer: {
      borderWidth: Styles.borderWidth,
      borderColor: Colors.border,
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: 3,
      marginLeft: 0,
      marginBottom: 3,
  },
  footerContainer: {
      borderWidth: 1,
      borderColor: Colors.border,
      padding: 8,
      flexDirection: 'row',
      alignItems: 'center',
  },
  headerText: {
      fontSize: 30,
      color: Colors.primaryTextColor,
      textAlign: 'center'    
  },
  basicText: {
      fontSize: 14,
      color: Colors.primaryTextColor,
      textAlign: 'center'
  },
  editFieldContainer: {
      flex: 1,
      padding: 15,
  },
  editText: {
      fontSize: 14,
      color: Colors.primaryTextColor,
      borderColor: Colors.border,
      borderWidth: Styles.borderWidth,
      padding: 0,
      paddingLeft: 4,
      textAlign: 'center'
  }
});