CODEWITHSUNDEEP
react-native
Sylber
Sylber

Reputation: 1040

Reload screen when timeout occurs

I am about to improve my first react native app and I want to show a retry/reload button when a timeout occurs. So for instance the webservice is not responding within 5 seconds I am throwing an issue. But now I want to give the opportunity to reload the screen. I already tried to create a refresh method and use setState, but this did not work. I think I need to start the render method once again?


 render() {
        if (this.state.connection === true) {
            return (
               <Login />
                    )
      else {
             <View style={styles.errorConnection}>
             <Text>Error, no Connection</Text>
             <Button title="reload" />
             </View>
            }
  }
      ...
   componentDidMount() {
        this.checkConnection();
    }

    checkConnection = async () => {
        let x = await new connection().checkConnection();
        this.setState(connection:x);
    }

Upvotes: 1

Views: 804

Answers (1)

Elias
Elias

Reputation: 4122

You didn't ask a specific question, I cannot give a specific answer but here you go. Feel free to ask in the comments :)

class SomeComponent extends React.Component {
    state = {
        requestFailed: false,
    }

    constructor(props) {
        super(props);

        // This line is very important if you don't know why ask
        this.handleRetry = this.handleRetry.bind(this);
    }

    render() {
        return (
            <>
                <Text>This is some very important stuff here</Text>
                {this.state.requestFailed && (
                    <Button title="Try Again" onPress={this.handleRetry}
                )}
            </>
        )
    }

    handleRetry() {
        this.fetch();
    }

    fetch() {
        fetch('your.url.url')
            .then()
            .catch(() => this.setState({requestFailed: true}))
    }
}

Upvotes: 1

Related Questions