Dialog not going up upon input

Question

So in my application, I'm using a dialog to edit a list item. When clicking the cog a Dialog shows up with two text fields. Upon clicking on one of those the Dialog stays in place instead of moving up to make space for the keyboard. The expected behavior is for the dialog to go up. How can I achieve this?

Note: I already tried multiple combinations of KeyboardSafeView wrapping around the dialog and none worked

Node2: Funnily enough when using expo the problem doesn't exist. It lifts up the whole app along with the Floating Action Button

Basically want to achieve this. So the whole app shifts up

<SafeAreaView style={styles.parent}>
    <Text style={styles.title}>Devices</Text>
    <List.Section style={{ width: "100%" }} >
        {devices.map((d, index) => {
            return <List.Item
                onPress={() => handleElementPressed(d)}
                title={d.getName()}
                description={d.getNumber()}
                left={props => <List.Icon {...props} icon="sim" />}
                right={props => <IconButton {...props} icon={"cog"} onPress={() => {
                    setDeviceIndex(index);
                    setDeviceName(d.getName());
                    setPhoneNumber(d.getNumber());
                    setVisible(true);
                }} />}
                key={index}
            />
        })}
    </List.Section>
    <FAB icon={"plus"} style={styles.fab} />
</SafeAreaView>
<Dialog visible={visible} onDismiss={() => setVisible(false)}>
    <Dialog.Title>{devices[deviceIndex].getName()}</Dialog.Title>
    <Dialog.Content>
        <TextInput label={"Name"} value={deviceName} onChangeText={text => setDeviceName(text)} />
        <TextInput label={"Number"} value={phoneNumber} onChangeText={text => setPhoneNumber(text)} />
    </Dialog.Content>
    <Dialog.Actions>
        <Button onPress={() => setVisible(false)}>Cancel</Button>
        <Button onPress={() => {
            setDevices((d) => {
                d[deviceIndex].setName(deviceName);
                d[deviceIndex].setNumber(phoneNumber);
                return d;
            });
            setVisible(false);
        }}>Save</Button>
    </Dialog.Actions>
</Dialog>

score 0 · Accepted Answer · answered Nov 05 '22 at 09:57

Found a solution to the problem. Basically as soon as the keyboard shows I'm calculating it's height and adding a paddingBottom to my whole view based on that value. Also wrapped dialog with view and gave it a paddingBottom. Full solution can be found here

Dialog not going up upon input

1 Answers1