react-native-modal: Very slow in android
modal taking 2 or 3 seconds to open in Android, while in ios it is very fast.
<Modal isVisible={this.state.showModal} animationIn='slideInUp' backdropColor='black' backdropOpacity='0.20' animationInTiming={0} style={styles.bottomModal} onSwipe={() => this.setState({showModal: false})} onBackdropPress={() => this.setState({showModal: false})} > <View style={styles.modalContent}> <List itemDivider={false}> <ListItem icon noBorder style={{borderBottomWidth: 0}}> <Left> <Icon name="ios-camera"/> </Left> <Body> <Text>Upload from camera</Text> </Body> </ListItem> </List> </View> </Modal> </View>
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 9
- Comments: 24 (2 by maintainers)
Android is slower when not build in release mode. Try creating a release apk and see if it works correctly there.
i solved it by adding the following prop useNativeDriver={true}
https://stackoverflow.com/questions/61127422/react-native-modal-time-delay-and-jerky-animation
In my case, it works correctly after stopping debug js remotely.
If you are referring to this slowness being as long as 2-3 seconds, it’s most likely related to async content keeping the modal from showing up. It might get a bit confusing because even if your content loading code is placed within ComponentDidMount it can still block the Modal from showing smoothly. I would suggest using an ActivityIndicator along with an isLoading prop and not showing anything at the initial state other than the Modal wrapper itself.
this.state = { isLoading: true }componentDidMount() { setTimeout(() => this.setState({isLoading: false}), 1000); } // load content here<Modal visible={isVisible}.....> { !isLoading ? // show your stuff : <ActivityIndicator ... /> }P.S You also need to wrap the Modal itself with the
isVisibleprop so that it un-mounts and resets once you dismiss it, resetting the state too. Otherwise it stays mounted.lag still exists on Android with RN > .61
@mmazzarolo Yes it is fast in release apk.