React-native-modal: animationOut not working (iOS, not tested Android)

[JoeCMorgan]

I have a modal that is called from a parent component (set's 'isVisible' to true on click of a item in parent component). The animation in works perfectly, however the animationOut does not, it just disappears when I set 'isVisible' to false.

closeModal = () => {
        this.setState({visible: false});
        this.props.modalClosed();
    };

<Modal
                    isVisible={this.state.visible}
                    backdropColor={"grey"}
                    backdropOpacity={0.3}
                    animationIn="slideInUp"
                    animationOut="slideOutDown"
                    animationOutTiming={ 230 }
                    backdropTransitionOutTiming={ 230 }
                    animationInTiming={350}
                    backdropTransitionInTiming={100}
                    onBackdropPress={() => this.closeModal()}
                    style={setModalMargin(this.props.orientation)}
                >
                    <View style={styles.modal}>
                        <View style={styles.modalContent}>
                            <Text style={styles.title}>{this.state.notification.title}</Text>
                            <Text style={styles.raisedBy}>Raised
                                by: {this.state.notification.raised_by_user.contact.title}. {this.state.notification.raised_by_user.contact.name}</Text>
                            <Text
                                style={styles.raisedDate}>{moment(this.props.notification.raised).format('LLL')}</Text>
                        </View>
                        <Button
                            onPress={ ()=> Linking.openURL('https://reactnativecode.com') }
                            transparent={true}
                            color= '#1d1d3b'
                            icon={{name: 'open-in-browser', color: '#1d1d3b'}}
                            title='Open in browser'
                            buttonStyle={{margin:2}}
                        />
                        <Divider style={{backgroundColor: '#eee'}}/>
                        <Button
                            onPress={() => this.archiveNotification()}
                            transparent={true}
                            color='#ef7724'
                            icon={{name: 'archive', color: '#ef7724'}}
                            title='Archive'
                            buttonStyle={{margin:2}}/>
                        <Divider style={{backgroundColor: '#eee'}}/>
                        <Button
                            onPress={() => this.closeModal()}
                            transparent={true}
                            color= '#ff6961'
                            icon={{name: 'close', color: '#ff6961'}}
                            title='Close'
                            buttonStyle={{margin:2}}/>
                    </View>
                </Modal>

Any idea why this could be happening?

[mmazzarolo]

Hey!
What does this.props.modalClosed(); do?
I would suggest to strip down the modal from props/added code as much as possible (to make it similar to the examples in the README.md) so you'll be able to easily spot what is causing the issue :)

[danielshin]

Are you maybe returning null instead of the modal somewhere when this.state.visible is false?

[mmazzarolo]

Closing for inactivity. Feel free to open another issue for discussing it further