When I press on the InputText in this React Native app for Android, the keyboard is opened, and the UI elements are displaced. I don't want them to be displaced, I want them to just be where they are. How do I achieve that (I don't want to remove the Modal component)?

(Here is the code of the file App.tsx)

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

const App = () => {
    return (
        <KeyboardAvoidingView behavior={'position'}>
            <View>
                <Modal
                    animationType="none"
                    transparent={true}
                    visible={true}
                >
                    <View
                        style={styles.imageBackground}
                    >
                        <View
                            style={[
                                styles.roundedRectangleInIncomeView,
                                {
                                    height: 400,
                                    display: 'flex',
                                },
                            ]}
                        />
                        <TextInput
                            style={styles.inputIncomeDescription}
                            placeholder="Enter description"
                            value="789"
                        />
                    </View>
                </Modal>
            </View>
        </KeyboardAvoidingView>
    );
};

const styles = StyleSheet.create({
    imageBackground: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        resizeMode: 'cover',
    },
    inputIncomeDescription: {
        backgroundColor: 'white',
        padding: 5,
        marginTop: 10,
        top: 100,
        borderRadius: 15,
        width: 300,
        height: 40,
        textAlign: 'center',
    },
    roundedRectangleInIncomeView: {
        backgroundColor: '#ebf1f4',
        width: '100%',
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        position: 'absolute',
        bottom: 0,
        transform: [{ scale: 1 }]
    },
});

export default App;

When I press on the InputText in this React Native app for Android, the keyboard is opened, and the UI elements are displaced. I don't want them to be displaced, I want them to just be where they are. How do I achieve that (I don't want to remove the Modal component)?

(Here is the code of the file App.tsx)

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

const App = () => {
    return (
        <KeyboardAvoidingView behavior={'position'}>
            <View>
                <Modal
                    animationType="none"
                    transparent={true}
                    visible={true}
                >
                    <View
                        style={styles.imageBackground}
                    >
                        <View
                            style={[
                                styles.roundedRectangleInIncomeView,
                                {
                                    height: 400,
                                    display: 'flex',
                                },
                            ]}
                        />
                        <TextInput
                            style={styles.inputIncomeDescription}
                            placeholder="Enter description"
                            value="789"
                        />
                    </View>
                </Modal>
            </View>
        </KeyboardAvoidingView>
    );
};

const styles = StyleSheet.create({
    imageBackground: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        resizeMode: 'cover',
    },
    inputIncomeDescription: {
        backgroundColor: 'white',
        padding: 5,
        marginTop: 10,
        top: 100,
        borderRadius: 15,
        width: 300,
        height: 40,
        textAlign: 'center',
    },
    roundedRectangleInIncomeView: {
        backgroundColor: '#ebf1f4',
        width: '100%',
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        position: 'absolute',
        bottom: 0,
        transform: [{ scale: 1 }]
    },
});

export default App;

• android
• react-native

2 Answers 2

I ran the code you provided and it is working as expected. The modal will shift to put input fields in a visible area. If the modal won't shift, then input fields at the bottom will get hidden by the keyboard.

Let me know if I have misunderstood your question, and provide more details or a reproducible code.

The standard behaviour when using KeyboardAvoidingView is that the UI elements will shift to avoid the keyboard. If you don't want the elements to shift, you'd have to remove the KeyboardAvoidingView.

However, this is not good user experience.