React Native modal flashes when set visible to false in IOS simulator?

Question

I have issue when set visible modal to false the modal flashes especially on <Animated.view> component. I have tried all solution from this github issue (https://github.com/react-native-modal/react-native-modal/issues/268) but no one are solving my issue. this issue only happen in IOS simulator but in android simulator work as expected.

This is my modal code

<Modal
        animated
        animationIn="fadeIn"
        animationOut="fadeOut"
        backdropTransitionOutTiming={0}
        visible={visible}
        transparent
        onRequestClose={handleDismiss}>
        <View style={styles.overlay}>
            {this.renderOutsideTouchable()}
            <Animated.View
            style={{
                ...styles.container,
                transform: [{translateY: translateY}],
            }}
            >
                {this.renderTitle()}
                {this.renderContent()}
                {this.renderButton()}
            </Animated.View>
        </View>
        </Modal>

Has anyone encounter same issue and solved ?

Answer 1

Add these props to your Modal.It should solve flickering issue. That is how I solved it.

backdropTransitionOutTiming={0}
hideModalContentWhileAnimating

This is my setup and there is no flickering on either side.

   <Modal
      onBackdropPress={toggleModal}
      backdropColor="#344356"
      backdropOpacity={0.7}
      animationIn="fadeIn"
      isVisible={isModalVisible}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
      backdropTransitionOutTiming={0}
      hideModalContentWhileAnimating
      statusBarTranslucent
    >
      {children}
    </Modal>

Answer 2

Setting

backdropTransitionOutTiming={0} 

solves the issue. It does not affect animation at all for me.