How to delay splash screen component until animation complete ?

[isurugajasinghe]

import React, { Component } from "react"; import { Platform, StyleSheet, Text, View } from "react-native"; import { Provider } from "react-redux"; import { PersistGate } from "redux-persist/es/integration/react"; import AppNavigation from "./src/navigation"; import configureStore from "./src/store/configureStore"; import SplashScreenPage from './src/pages/SplashScreenPage';

const { store, persistor } = configureStore();

export default class App extends Component {

constructor(props) {
super(props);

this.doSomething = this.doSomething.bind(this);

}

 async doSomething() {
    setTimeout(() => {

    }, 1000);
}

render() { return ( <Provider store={ store }> <PersistGate loading = { } persistor={persistor}>

 </PersistGate>
  </Provider>
);

} }

[isurugajasinghe]

[rt2zz]

you can use the currently undocumented render function form of PersistGate for more control:

<PersistGate persistor={persistor}>
  {(bootstrapped) => {
    // do whatever you need here e.g.
    // if (bootstrapped && this.state.animationComplete) return <App />

[isurugajasinghe]

can you pls type sample code here

[troylutton]

Here is a complete example. Works pretty well

class MyApp extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            splashFinished: false
        }
    }

    componentDidMount() {

        // show the splash for 2 seconds
        setTimeout(() => {
            this.setState({
                splashFinished: true
            })
        }, 2000)

    }

    render() {
        return (
            <Provider store={store}>
                <PersistGate
                    //loading={<SplashLoader />}
                    persistor={persistor}                   
                >
                    {(bootstrapped) => {                       

                        if (bootstrapped && this.state.splashFinished) {

                            return (<AppStack />)                            
                        }
                        else {
                            return <SplashLoader />
                        }
                    }}

                </PersistGate>
            </Provider>);
    }
}