Description

Keyboard changes view on input touch. It shows white blank when it’s moving to top. If you set backgroundColor: “red” for the root view you will see this white blank on keyboard show right. Please can somebody help me

React Native version:

react-native-cli 2.0.1
react native version: 0.63.2
react-dom: 16.13.1

Steps To Reproduce

import React from 'react';
import { StatusBar } from "expo-status-bar";
import {
View,
KeyboardAvoidingView,
TextInput,
StyleSheet,
Text,
Platform,
TouchableWithoutFeedback,
Button,
Keyboard,
} from 'react-native';

export default function KeyboardAvoidingComponent() {
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}>
Header
<Button title="Submit" onPress={() => null} />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid aperiam, architecto beatae
blanditiis consectetur consequatur cupiditate
dolores ex excepturi expedita necessitatibus nemo neque obcaecati omnis perspiciatis quibusdam suscipit.
<StatusBar style={"auto"}/>);}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "red"
},
inner: {
padding: 24,
flex: 1,
justifyContent: 'space-around',
},
header: {
fontSize: 36,
marginBottom: 48,
},
textInput: {
height: 40,
borderColor: '#000000',
borderBottomWidth: 1,
marginBottom: 36,
},
btnContainer: {
backgroundColor: 'white',
marginTop: 12,
},
});

Expected Behavior vs Actual Behavior

Expected Behavior: Keyboard must not change view nor show white blank when moving to top
Actual Behavior: Keyboard changes view and shows white blank when moving to top