Keyboard Avoiding View Shrinking - reactjs

Question

I would like my page to scroll up so that the user can correctly type its email and password. Therefore, I am using KeyboardAvoidingView.
However, when I use it, it shrinks my textinput picture instead of moving up the page. Without the keyboard my app looks like this picture.
My code following for this page :
export default class LoginScreen extends React.Component {
constructor(props) {
super(props)
}
state = {
email: '',
password: ''
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
render() {
return (
<View style={styles.container}>
<ImageBackground source={require('../pics/main.png')} style={styles.background}>
<KeyboardAvoidingView behavior="padding" style={{ flex: 1}} >
<Text style={styles.title2}>WELCOME</Text>
<TextInput
style={styles.inputEmail}
placeholder="Enter Email"
onChangeText={this.handleEmail}
/>
<TextInput
style={[styles.inputEmail, styles.inputPassword]}
placeholder="Enter password"
onChangeText={this.handlePassword}
/>
<View style={styles.buttons}>
<TouchableOpacity style={styles.login} onPress={() => this.props.navigation.navigate('MainScreen')} >
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.login} onPress={() => this.props.navigation.navigate('SignUpScreen')}>
<Text style={styles.loginText}>SIGN UP</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
area: {
flex: 1
},
container: {
flex: 1,
},
background: {
flex: 1,
resizeMode: "cover",
width: '100%',
height: '100%'
},
title2: {
paddingTop: 10,
color: color.primary,
fontSize: 25,
alignSelf: 'center',
justifyContent: 'flex-start'
},
inputEmail: {
borderWidth: 2,
borderColor: color.primary,
borderRadius: 10,
width: '50%',
height: '5%',
marginTop: 100,
alignSelf: 'center',
backgroundColor: color.secondary
},
inputPassword: {
marginTop: 10
},
buttons: {
flexDirection: 'row',
justifyContent: 'space-around',
marginTop: 30,
marginLeft: 70,
marginRight: 70,
},
login: {
borderColor: color.primary,
borderRadius: 20,
borderWidth: 2,
width: '40%',
height: '118%',
backgroundColor: color.primary
},
loginText: {
alignSelf: 'center',
marginTop: 5,
marginBottom: 1,
color: 'white'
}
});
Any idea on what I am doing wrong ?
UPDATE : to avoid shrinking put the text input container width and height not as a percentage but as real numbers : inputEmail --> width: 200, height: 35,

Answer 1

Here is a solution with your code, I have fixed this in this snack with your provided code.
Expo Snack with CSS fixes to avoid keyboard