CODEWITHSUNDEEP
react-native
Fairuz Yassar
Fairuz Yassar

Reputation: 139

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

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 ?

Upvotes: 1

Views: 3836

Answers (2)

Lonare
Lonare

Reputation: 4663

Setting

backdropTransitionOutTiming={0}

solves the issue. It does not affect animation at all for me. if that does not work you can try

backdropTransitionOutTiming={1}

it also works at my end

Upvotes: 6

Bora Sumer
Bora Sumer

Reputation: 860

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>

Upvotes: 7

Related Questions