Keyboard moving view up in react native expo - react-native

Question

I am new in react native and I please need help. When the keyboard appears , the whole view is pushed upwards.I do not want that to happen.I saw other answers but none of them is working for me.I do not want the view to be pushed up when the keyboard appears and want to remain where they are.I am using expo and has given the code below with the images.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View, TextInput, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView } from 'react-native';
export default function LoginScreen({ navigation }) {
return (
<View style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
position: 'absolute',
height: 100,
width: 150,
resizeMode: "contain",
top: '3 %'
},
loginInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
},
inputContainer: {
position: 'absolute',
top: '18%',
alignItems: 'center',
},
passwordInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
top: 10
},
loginButtonView: {
position: 'absolute',
height: 46,
width: '70%',
top: '80%'
}
});

Answer 1

I figured out the reason myself.It was happening because i had set my positions based on percentage and the popping of keyboard changed the dimensions resulting in the change of position.

Answer 2

Try to use the component KeyboardAvoidingView like this:
<KeyboardAvoidingView behavior={'height'} enabled style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView >
Try to use different values in the position prop.
If you want less job, you can use the react-native-keyboard-aware-scroll-view. It's a very good lib to work with Keyboard in different layouts.