EQuimper EQuimper - 1 month ago 8
React JSX Question

React-Native push to other route after a setTimeout

I would like to know if that possible to push to another route using a setTimeout function. I have a component who is a Loading page and what I want to do if after the loading phase is done I show a message text on the screen but after 1 seconds I push automatically to the other route.

I'm using react-native-router-flux.

const pushRoute = () => setTimeout(() => Actions.home(), 1000);

const PhotoPageOnSave = ({ photoState: { message, loading, error } }) => {
if (loading) {
return (
<Container>
<View style={styles.root}>
<Spinner size="large" color="white" />
</View>
</Container>
);
}
return (
<Container>
<View style={[styles.root, error ? { backgroundColor: '#C70018' } : null]}>
<View>
<Text style={styles.textStyle}>{message}</Text>
</View>
</View>
{() => pushRoute()}
</Container>
);
};

Answer

I assume that this is part of a render() function?

You can do it, it just isn't usually done in the render() function. Usually that sort of behavior is reserved for componentDidMount() or componentWillReceiveProps()

Something like:

componentWillReceiveProps(nextProps){
    if(!nextProps.loading){
        pushRoute();
    }
}