I have this code in React Native for Android. When I start inputting the text and the keyboard appears, the UI elements are moved up. I want to remove this functionality, I want all the UI elements to remain on the same places when the keyboard appears (even if it overlays some UI elements, it is not a problem). Any adding KeyboardAvoidingView didn't solve the problem. How to remove this functionality?
import React from 'react';
import { View, TextInput, Modal, ImageBackground, KeyboardAvoidingView, TouchableOpacity, Image, Platform, StyleSheet, Text } from 'react-native';
const App = () => {
return (
<View>
<Modal
animationType="slide"
transparent={true}
visible={true}
>
<ImageBackground
source={require('./assets/images/Red.png')}
style={styles.imageBackground}
>
<View
style={[
styles.roundedRectangleInIncomeView,
{
height: 400,
display: 'flex',
},
]}
/>
<View style={styles.addingIncomeModalContainer}>
<View style={styles.addingIncomeModalContent}>
<TouchableOpacity
style={styles.backButtonOnIncomeScreen}
onPress={() => {
}}
>
<Image source={require('./assets/images/BackArrowWhite.png')} />
</TouchableOpacity>
<Text style={styles.headerForNewIncomeWindow}>
'123'
</Text>
<Text style={styles.headerForTextWithNumberOnIncomeScreen}>
'123'
</Text>
<Text style={styles.textWithNumberOnIncomeScreen}>
'8'
</Text>
<TextInput
style={styles.inputIncomeDescription}
placeholder={'567'}
value={'789'}
/>
<TextInput
style={styles.inputIncomeAmount}
placeholder={'876'}
keyboardType="numeric"
value={'123'}
/>
<TouchableOpacity
style={styles.addDateButtonOnIncomeScreen}
onPress={() => {
}}
>
<Text style={styles.addDateButtonOnIncomeScreenText}>{768}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
}} style={styles.saveButtonOnIncomeScreen}>
<Text style={styles.buttonText}>{'456'}</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</Modal>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
bottom: -520,
},
text: {
fontSize: 20,
marginBottom: 10,
},
input: {
height: 50,
width: '80%',
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 10,
borderRadius: 5,
},
imageBackground: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
resizeMode: 'cover',
},
addDateButtonOnIncomeScreen: {
width: 300,
height: 40,
backgroundColor: '#fff',
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
top: 110,
},
saveButtonOnIncomeScreen: {
width: 300,
height: 40,
backgroundColor: '#ff0030',
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
top: 100,
},
inputIncomeDescription: {
backgroundColor: 'white',
padding: 5,
marginTop: 10,
top: 100,
borderRadius: 15,
width: 300,
height: 40,
textAlign: 'center',
},
inputIncomeAmount: {
backgroundColor: 'white',
padding: 5,
marginTop: 10,
top: 100,
borderRadius: 15,
width: 300,
height: 40,
textAlign: 'center',
},
backButtonOnIncomeScreen:
{
right: 150,
bottom: 117,
},
addingIncomeModalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
addingIncomeModalContent: {
padding: 20,
borderRadius: 10,
alignItems: 'center',
},
textWithNumberOnIncomeScreen: {
color: 'white',
fontWeight: 'bold',
fontSize: 60,
top: -5,
},
headerForNewIncomeWindow: {
color: 'white',
fontWeight: 'bold',
fontSize: 20,
top: -140,
},
headerForTextWithNumberOnIncomeScreen: {
color: 'white',
fontWeight: 'bold',
fontSize: 20,
top: -10,
},
roundedRectangleInIncomeView: {
backgroundColor: '#ebf1f4',
width: '100%',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
position: 'absolute',
bottom: 0,
transform: [{ scale: 1 }]
},
});
export default App;
I have this code in React Native for Android. When I start inputting the text and the keyboard appears, the UI elements are moved up. I want to remove this functionality, I want all the UI elements to remain on the same places when the keyboard appears (even if it overlays some UI elements, it is not a problem). Any adding KeyboardAvoidingView didn't solve the problem. How to remove this functionality?
import React from 'react';
import { View, TextInput, Modal, ImageBackground, KeyboardAvoidingView, TouchableOpacity, Image, Platform, StyleSheet, Text } from 'react-native';
const App = () => {
return (
<View>
<Modal
animationType="slide"
transparent={true}
visible={true}
>
<ImageBackground
source={require('./assets/images/Red.png')}
style={styles.imageBackground}
>
<View
style={[
styles.roundedRectangleInIncomeView,
{
height: 400,
display: 'flex',
},
]}
/>
<View style={styles.addingIncomeModalContainer}>
<View style={styles.addingIncomeModalContent}>
<TouchableOpacity
style={styles.backButtonOnIncomeScreen}
onPress={() => {
}}
>
<Image source={require('./assets/images/BackArrowWhite.png')} />
</TouchableOpacity>
<Text style={styles.headerForNewIncomeWindow}>
'123'
</Text>
<Text style={styles.headerForTextWithNumberOnIncomeScreen}>
'123'
</Text>
<Text style={styles.textWithNumberOnIncomeScreen}>
'8'
</Text>
<TextInput
style={styles.inputIncomeDescription}
placeholder={'567'}
value={'789'}
/>
<TextInput
style={styles.inputIncomeAmount}
placeholder={'876'}
keyboardType="numeric"
value={'123'}
/>
<TouchableOpacity
style={styles.addDateButtonOnIncomeScreen}
onPress={() => {
}}
>
<Text style={styles.addDateButtonOnIncomeScreenText}>{768}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
}} style={styles.saveButtonOnIncomeScreen}>
<Text style={styles.buttonText}>{'456'}</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</Modal>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
bottom: -520,
},
text: {
fontSize: 20,
marginBottom: 10,
},
input: {
height: 50,
width: '80%',
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 10,
borderRadius: 5,
},
imageBackground: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
resizeMode: 'cover',
},
addDateButtonOnIncomeScreen: {
width: 300,
height: 40,
backgroundColor: '#fff',
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
top: 110,
},
saveButtonOnIncomeScreen: {
width: 300,
height: 40,
backgroundColor: '#ff0030',
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
top: 100,
},
inputIncomeDescription: {
backgroundColor: 'white',
padding: 5,
marginTop: 10,
top: 100,
borderRadius: 15,
width: 300,
height: 40,
textAlign: 'center',
},
inputIncomeAmount: {
backgroundColor: 'white',
padding: 5,
marginTop: 10,
top: 100,
borderRadius: 15,
width: 300,
height: 40,
textAlign: 'center',
},
backButtonOnIncomeScreen:
{
right: 150,
bottom: 117,
},
addingIncomeModalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
addingIncomeModalContent: {
padding: 20,
borderRadius: 10,
alignItems: 'center',
},
textWithNumberOnIncomeScreen: {
color: 'white',
fontWeight: 'bold',
fontSize: 60,
top: -5,
},
headerForNewIncomeWindow: {
color: 'white',
fontWeight: 'bold',
fontSize: 20,
top: -140,
},
headerForTextWithNumberOnIncomeScreen: {
color: 'white',
fontWeight: 'bold',
fontSize: 20,
top: -10,
},
roundedRectangleInIncomeView: {
backgroundColor: '#ebf1f4',
width: '100%',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
position: 'absolute',
bottom: 0,
transform: [{ scale: 1 }]
},
});
export default App;
1 Answer
Reset to default 0Try changing android:windowSoftInputMode from "adjustResize" to "adjustPan".
<activity
android:name=".MainActivity"
....
android:windowSoftInputMode="adjustPan"
....
>