Component modal in react-native dosen't redimention correctly when the keyboard appears on IOS

[vincenzopalazzo]

I'm using this library to build my application and I have a problem with rendering the application IOS devices when appears the keyboard.

I'm using the Modal.BottomModal with this code

---

App.js

render() {
        return (
            <PaperProvider theme={theme}>
                <StatusBar backgroundColor={theme.colors.primary} barStyle="light-content"/>
                <SafeAreaView style={GlobalStyle.droidSafeAreaTop}/>
                <SafeAreaView style={GlobalStyle.droidSafeAreaDown}>
                    <View>
                        <Appbar.Header style={GlobalStyle.appBar}>
                            <Avatar.Image size={35} source={require('./assets/avatar.png')}/>
                            <Appbar.Content
                                title="LOCAL TIME everywere"
                            />
                            <Appbar.Action icon="refresh" onPress={() => {
                                this.setState({refresh: !this.state.forceRefreshView});
                            }}/>
                        </Appbar.Header>
                        <ScrollViewCardsTime
                            data={this.state.dataSource}
                            onComunicate={this.doCloseSnackBar}
                            onRefresh={this.doRefreshListWithApi}
                            setState={p => {
                                this.setState(p)
                            }}
                            {...this.state}
                        />
                        <DialogNewTimeZone
                            title="New Time Zone"
                            visible={this.state.dialogVisible}
                            setState={p => {
                                this.setState(p)
                            }}
                            {...this.state}
                            onSubmit={this.doAddDataToList}
                            onComunicate={this.doCloseSnackBar}
                        />
                    </View>
                    <FAB
                        style={ComponentStyle.fab}
                        visible={this.state.toastVisible === false}
                        fat
                        label='New Time Zone'
                        icon="plus"
                        onPress={() => this.setState({dialogVisible: true})}
                    />
                    <Snackbar style={{backgroundColor: theme.colors.backgroundSnackBar}}
                              theme={theme}
                              visible={this.state.toastVisible}
                              onDismiss={() => this.doCloseSnackBar(true)}
                              action={{
                                  label: 'close',
                                  onPress: () => {
                                      this.doCloseSnackBar(true)
                                  }
                              }}
                    >
                        {this.state.toastMessage}
                    </Snackbar>
                </SafeAreaView>
            </PaperProvider>
        );

---

and inside the component DialogNewTimeZone I have this code with the following style

DialogNewTimeZone.component.js

render() {
        return (
            <Modal.BottomModal
                visible={this.props.dialogVisible}
                onTouchOutside={() =>
                    this.props.setState({dialogVisible: false})
                }
                onSwipeOut={() => this.props.setState({dialogVisible: false})}
            >
                <ModalTitle
                    title={this.props.title}
                />
                <ModalContent>
                    <TextInputLayout styles={styles.inputLayout}>
                        <TextInput
                            style={styles.textInput}
                            placeholder={'City name ex: Rome, Phoenix'}
                        />
                    </TextInputLayout>
                    <TextInputLayout styles={styles.inputLayout}>
                        <TextInput
                            style={styles.textInput}
                            placeholder={'Country ex: Europe, America'}
                        />
                    </TextInputLayout>
                    <View style={DialogNewTimeZoneStyle.buttonsDialog}>
                        <Button primary
                                text="Search link"
                                icon={'search'}/>
                    </View>

                </ModalContent>
                <ModalFooter style={DialogNewTimeZoneStyle.textFooter}>
                    <Text>
                        Find your Zone and copy the link inside the
                        "link text"
                    </Text>
                </ModalFooter>
            </Modal.BottomModal>
        );
    }

with this style

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 100
    },
    textInput: {
        fontSize: 16,
        height: 40
    },
    inputLayout: {
        marginTop: 16,
        marginHorizontal: 36
    }
});

But I have a different effect when keyboard appears in Android and IOS, the android work well, like this

but on ios the effect is wrong, like:

I'm losing something?

Thanks for your time

ps: there is an answer on StackOverflow at this link https://stackoverflow.com/questions/60206247/component-modal-in-react-native-dosent-redimention-correctly-when-the-keyboard

[rahulje9]

I created a workaround for this, but this is not smooth. Please check the answer in this StackOverflow link https://stackoverflow.com/questions/60206247/component-modal-in-react-native-dosent-redimention-correctly-when-the-keyboard

[vincenzopalazzo]

Hi @rahulje9,

I don't have time to try your solution yet, but I resolved with this package

import KeyboardSpacer from "react-native-keyboard-spacer";

You can use it very easy

 {Platform.OS === 'ios' && <KeyboardSpacer/>}

I answer your question on StackOverflow in this week after the test you solution

[mariomurrent-softwaresolutions]

I created a workaround for this, but this is not smooth. Please check the answer in this StackOverflow link https://stackoverflow.com/questions/60206247/component-modal-in-react-native-dosent-redimention-correctly-when-the-keyboard

Nice solution :) Thx