KeyBoardAvoidingView hides content

Question

enter image description here

Current Behaviour The KeyBoardAvoidingView hides the Login button. Its the same on Android and on iPhone. On an Android Tablet It hides the Login button but since the screen is large you can see the button halfway from the top.

Expected Behaviour I want the Login button at the bottom to move into the app frame when user wants to input his login details.

App.js

import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity, AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.23
import Login from './screens/Login';


class App extends React.Component {

  render() {
    return (
      <View 
          style={styles.container} >   

          <View style={styles.boxContainer}>
            <View style = {[styles.boxContainer, styles.boxOne]}>
              <Text style={styles.paragraph}>Tido</Text>
            </View>

              <View style={styles.boxContainerToggle}>
                <TouchableOpacity style={[styles.boxContainer, styles.boxTwo]} onPress={() => this.props.navigation.navigate('Login')}>
                    <Text style={styles.paragraph}>Login</Text>
                </TouchableOpacity>

                <TouchableOpacity style={[styles.boxContainer, styles.boxThree]}>
                    <Text style={styles.paragraph}>Sign Up</Text>
                </TouchableOpacity>
              </View>          
          </View> 
      </View>   
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',

  },
  boxContainer: {
    flex: 1, // 1:3
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },

  boxContainerToggle: {
    flex: 1, 
    flexDirection: 'row'
  },
  boxOne: {
    flex: 6, // 5:6

    justifyContent: 'space-around',
    alignItems: 'center',

  },
  boxTwo: {
    flex: 1, // 1:6
    backgroundColor: 'powderblue',
    flexDirection: 'row',
    width: '50%',
    height: '100%'

  },
  boxThree: {
    flex: 1, // 1:6
    flexDirection: 'row',
    backgroundColor: 'skyblue',
    width: '50%',
    height: '100%'
  },
  paragraph: {
    margin: 24,
    fontSize: 27,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  }, 
});

const appScreens = StackNavigator({
  Index: { screen: App },
  Login: { screen: Login }
})


AppRegistry.registerComponent('tido', () => appScreens);
export default appScreens;

Login.js

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


export default class Login extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
          <KeyboardAvoidingView behavior="padding" style={styles.container}>

                <View style={styles.boxContainer}>
                    <View style = {[styles.boxContainer, styles.boxOne]}>
                        <TextInput 
                            style={styles.inputBox} 
                            placeholder="username,email or phone"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent">
                        </TextInput>

                        <TextInput 
                            style={styles.inputBox}
                            secureTextEntry={true}
                            placeholder="password"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent">
                        </TextInput>
                    </View>

                     <View style={styles.boxContainerToggle}>
                         <TouchableOpacity 
                            style={[styles.boxContainer, styles.boxTwo]}>
                              <Text style={styles.paragraph}>Login</Text>
                        </TouchableOpacity>
                    </View>          
                </View>   
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    boxContainer: {
        flex: 1, // 1:3
        justifyContent: 'center',


      },
      boxContainerToggle: {
        flex: 1, 
        flexDirection: 'row',

      },
      boxOne: {
        flex: 5, // 5:6
        backgroundColor: 'white',
        padding: 20

      },

      boxTwo: {
        flex: 1, // 1:6
        backgroundColor: '#252525',
        flexDirection: 'row',
        width: '100%',
        height: '100%',
        alignItems: 'center'

      },
      inputBox: {
          height: 40,
          backgroundColor: '#B6B6B630',
          marginBottom: 10,
          paddingHorizontal: 10,

      },

      paragraph: {
        fontSize: 27,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#FFFFFF',

      },
});

Answer 1

The problem is that KeyboardAvoidingView cannot correctly apply padding if its children don't have plain size set. In this particular case you need to figure out the screen dimension and apply screen height (minus navigation bar height) to your root View style:

import { Dimensions } from 'react-native';

const { screenHeight: height } = Dimensions.get('window');
const styles = StyleSheet.create({
    ...
    containerContent: {
        height: screenHeight - navBarHeight,
        justifyContent: 'center',
    }
    ...
},

And apply it in your render method:

render() {
        return (
          <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <View style={styles.containerContent}>
                       ...
                </View>
          </KeyboardAvoidingView>
        );
}

Answer 2

I am still seeing that on keyboard open the toolbar is being pushed up out of visible area. This is the code :

<KeyboardAvoidingView style={styles.containerContent}>
        <View style={styles.containerContent}>
          <GiftedChat
            messages={}
            onSend={this.onSend}
            renderAvatar={null}
            user={{
              _id: 1,
            }}
            imageStyle={{}}
          />
        </View>
      </KeyboardAvoidingView>
const styles = StyleSheet.create({
  containerContent: {
    height: Dimensions.get('window').height - kHeaderHeight,
    justifyContent: 'center',
    flex: 1,
  },
});