react-native-modal doesn't behave well with react-native-webview

react-native-modal works fine but when trying to render <WebView> inside the <Modal> the backdropColor is white instead of black and the modal cover the whole screen till I scroll the <WebView>. Once I scroll the <WebView> everything works fine!

before scrolling after scrolling

Modal <Modal isVisible={this.state.modalVisible} onBackButtonPress={() => this.setModalVisible(false)} onBackdropPress={() => this.setModalVisible(false)} > <View style={styles.modal}> <View style={styles.modalTop}> <Image source={require('../../assets/icons/logo.png')} style={styles.smallIcon} /> <Text style={styles.modalTopText} >About App</Text> </View> <About /> <View style={styles.modalBottom}> <Text style={styles.modalBottomText} onPress={() => this.setModalVisible(false)}>CLOSE</Text> </View> </View> </Modal>

modal: { flex: 1, backgroundColor: '#fff', borderRadius: 5 }, modalTop: { height: 50, flexDirection: 'row', marginTop: 15, marginLeft: 20, }, modalTopText: { color: '#000', fontSize: 20, fontWeight: '300', marginTop: 8, }, modalBottom: { height: 35, marginTop: 15, }, modalBottomText: { color: '#b13230', textAlign: 'right', marginRight: 10, fontSize: 15 }

About here is what is inside <About /> in the Modal <WebView ref={(ref) => { this.webview = ref; }} source={{ uri: 'https://growthhacktoolkit.com/android/about.html' }} style={{ flex: 1 }} scalesPageToFit={true} />

• “react-native”: “0.57.8”
• “react”: “16.6.3”
• “react-native-webview”: “^3.1.2”
• “react-native-modal”: “^7.0.2”
• android
• redmi note 4 - android version 7.0
• windows 10

[c19354837]

Update react-native-webview to 5.8.2 will fix these issue.

[Nermin-K]

@mmazzarolo Thanks for the help. I changed webview style as you said and also modal style but it is the same thing. It still covers the entire screen before scrolling. The only thing that has changed that the Modal appears to occupy less space due to margin. unfortunately, for now, it isn’t available to try it on a different Android device. But I will try and then let you know.