How to fetch data from URL and then store it in AsyncStorage in React Native?

Question

I'm trying to fetch data from URL and then store it in AsyncStorage in React Native.

This is screen where "magic" happens:

class CardsScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: null,
        }
    }

    componentDidMount() {
        return fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseData,
                });
            })
        .catch((error) => {
            console.log(error)
        });
    }

    render() {

        if (netStatus) {

            if (this.state.isLoading) {
                return (
                    <View style={styles.container}>
                        <ActivityIndicator/>
                    </View>
                )
            } else {

                let data = this.state.dataSource.map((val, key) => {
                    return <View key={key} style={styles.itemWrapper}>
                        <View style={styles.titleWrapper}>
                            <Text style={styles.content}>{val.type}</Text>
                            <Text style={styles.title}>{val.title}</Text>
                            <Text style={styles.content}>{val.date}</Text>
                        </View>
                        <View style={styles.imageWrapper}>
                            <Image
                                style={styles.image}
                                source={{uri: val.image}}
                            />
                        </View>
                        <View style={styles.contentWrapper}>
                            <Text style={styles.content}>{val.adress}</Text>
                            <Text style={styles.content}>{val.text}</Text>
                        </View>
                    </View>

                })

                return (
                    <ScrollView contentContainerStyle={styles.containerScroll}>
                        {data}
                    </ScrollView>
                );
            }
        } else {
            return <View style={styles.contentWrapper}>
                <Text style={styles.content}>Not connected!</Text>
            </View>
        }
    }
};

This code prints data if device is connected to internet. What I need to do is if device is conneted to internet, fetch data from URL and store (or overwrite) it in AsyncStorage, and then print data on screen. If device is not connect to the internet just print data from AsyncStorage.

This is example of .json I call from URL:

[
    {
        "type": "Party",
        "title": "New party comming to town!",
        "adress": "New Yrok",
        "date": "20. 4. 2019.",
        "image": "https:\/\/some-url.com\/some-image.jpg",
        "text": [
            "Some description"
        ],
        "_id": "events_1"
    }
]

I can't find any similar solution, so I would be greatfull if someone has tutorial that could help me with this.

EDIT (little more of explenation):

This is what I want to do: If device is connected to the internet, update AsyncStorage with data from URL and then display that new data in AsyncStorage. If device is not connected to the internet, just display data that is AsyncStorage. And there are multiple "events", not just one like in the example.

Answer 1

You need to store your response like this

note one thing when you set value into AsyncStorage you need to store as string JSON.stringify() value into storage.

    onSave = async () => {
           try {
                await AsyncStorage.setItem("key", JSON.stringify(responseData));
                Alert.alert('Saved', 'Successful');
            } catch (error) {
                Alert.alert('Error', 'There was an error.')
            }
        }

and when you get value from AsyncStorage you need to JSON.parse()

onSave = async () => {
    try {
                const storedValue = await AsyncStorage.getItem("key");
                this.setState({ storedValue: JSON.parse(storedValue) });
            } catch (error) {
                Alert.alert('Error', 'There was an error.')
            }
}

hope it will help you