React Native Cookbook by Dan Ward

Author:Dan Ward
Language: eng
Format: epub
Tags: COM051390 - COMPUTERS / Programming / Open Source, COM051260 - COMPUTERS / Programming Languages / JavaScript, COM051460 - COMPUTERS / Programming / Mobile Devices
Publisher: Packt Publishing
Published: 2019-01-31T14:03:33+00:00

onSubmitPress = () => {

const requestBody = {

title: 'foo',

body: 'bar',

userId: 1

};

if (this.state.isConnected) {

this.submitData(requestBody);

} else {

this.pendingSync = requestBody;

this.setState({syncStatus : 'Pending'});

}

}

Now, we can build out our UI, which will render the Submit Data button and show the current connection status, sync status, and most recent response from the API:

render() {

const {

isConnected,

syncStatus,

serverResponse

} = this.state;

return (

<View style={styles.container}>

<TouchableOpacity onPress={this.onSubmitPress}>

<View style={styles.button}>

<Text style={styles.buttonText}>Submit Data</Text>

</View>

</TouchableOpacity>

<Text style={styles.status}>

Connection Status: {isConnected ? 'Connected' :

'Disconnected'}

</Text>

<Text style={styles.status}>

Sync Status: {syncStatus}

</Text>

<Text style={styles.status}>

Server Response: {serverResponse}

</Text>

</View>

);

}

You can disable the network connection in the simulator in the same way as described in step 10 of the previous recipe:

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.