3 madais

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, } from 'react-native';
import Modal from "react-native-modal";
const time = 4000
export default class App extends Component {
    state = {
        visibleModalA: null,
        visibleModalB: null,
        visibleModalC: null,
    };
    _renderButton = (text, onPress) => (
        <TouchableOpacity style={styles.buttonModal} onPress={onPress}>
            <Text style={styles.buttonTextModal}>{text}</Text>
        </TouchableOpacity>
    );
    modal_A_OnPress = () => {
        this.setState({ visibleModalA: null })
        setTimeout(() => {
            this.modal_B_Coming()
        }, time);
    }
    modal_B_Coming = () => {
        this.setState({ visibleModalB: 2 });
        this.timeOutID = this.timerError()

    }
    timerError = () => setTimeout(() => {
        this.modal_C_Coming()
    }, time);
    modal_B_Closing = () => {
        this.setState({ visibleModalB: null });
        clearTimeout(this.timeOutID);
        //this.timeOutID= 0;
        console.warn(this.timeOutID)
    }
    modal_C_Coming = () => {
        this.setState({ visibleModalB: null });
        this.setState({ visibleModalC: 2 });
    }
    _renderModalContentA = () => (
        <View style={styles.modalContent}>
            <Text style={styles.modalTextContent}>Este é o modal A</Text>
            {this._renderButton('FECHAR', this.modal_A_OnPress)}
        </View>
    );
    _renderModalContentB = () => (
        <View style={styles.modalContent}>
            <Text style={styles.modalTextContent}>Este é o modal B</Text>
            {this._renderButton('FECHAR', this.modal_B_Closing)}

        </View>
    );
    _renderModalContentC = () => (
        <View style={styles.modalContent}>
            <Text style={styles.modalTextContent}>Este é o modal C</Text>
            {this._renderButton('FECHAR', () => this.setState({ visibleModalC: null }))}

        </View>
    );

    componentDidMount() {
        this.setState({ visibleModalA: 2 })
    }

    render() {
        return (
            <View style={styles.container}>
                <Modal
                    isVisible={this.state.visibleModalA === 2}
                    animationIn={'slideInLeft'}
                    animationOut={'slideOutRight'}
                >
                    {this._renderModalContentA()}
                </Modal>
                <Modal
                    isVisible={this.state.visibleModalB === 2}
                    animationIn={'slideInLeft'}
                    animationOut={'slideOutRight'}
                >
                    {this._renderModalContentB()}
                </Modal>
                <Modal
                    isVisible={this.state.visibleModalC === 2}
                    animationIn={'slideInLeft'}
                    animationOut={'slideOutRight'}
                >
                    {this._renderModalContentC()}
                </Modal>
            </View >
        )
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1
    },
    buttonTextModal: {
        fontSize: 14,
        fontWeight: '500',
        color: '#fff',
        textAlign: 'center',
    },
    buttonModal: {
        width: '85%',
        backgroundColor: '#38B6D9',
        borderRadius: 1,
        marginVertical: 8,
        paddingVertical: 10,
    },
    modalContent: {
        backgroundColor: 'white',
        padding: 22,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 1,
        borderColor: 'rgba(0, 0, 0, 0.1)',
    },
    modalTextContent: {
        fontSize: 13,
        fontWeight: 'bold',
        textAlign: "center"
    },
    bottomModal: {
        justifyContent: 'flex-end',
        margin: 0,
    },
});