Persist state hook in React native - react-native

Question

This is my first app in React Native.
I little to no experience in React but i have been using Vue.
I'm also new to state management.
I have started using hooks but the online tutorials show examples without hooks.
My question is, how do i persist the state that i have set with hooks?
I want to save the projects even when opening the app without internet.
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import Geolocation from '#react-native-community/geolocation'
import { FlatList, ActivityIndicator, Text, View } from 'react-native'
axios.defaults.baseURL = 'http://www.json.test/api/'
export default () => {
const [loading, setLoading] = useState(true)
const [projects, setProjects] = useState([])
const [position, setPosition] = useState({
latitude: 0,
longitude: 0,
})
const getProjects = async () => {
// console.log()
const projects = await axios(
`projects/${position.latitude}/${position.longitude}`,
)
setProjects(projects.data)
setLoading(false)
}
useEffect(() => {
if (position.latitude != 0 && position.longitude != 0) {
getProjects()
}
}, [position])
useEffect(() => {
Geolocation.getCurrentPosition(
pos => {
setPosition({
latitude: pos.coords.latitude,
longitude: pos.coords.longitude,
})
},
error => console.log(error.message),
)
}, [])
if (loading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator
style={{
flex: 1,
padding: 20,
alignContent: 'center',
justifyContent: 'center',
}}
/>
</View>
)
}
return (
<View style={{ flex: 1, paddingTop: 80, paddingLeft: 50 }}>
<FlatList
data={projects}
renderItem={({ item }) => (
<View style={{ marginBottom: 20 }}>
<Text style={{ fontWeight: 'bold', fontSize: 16 }}>
{item.project_name}, {item.id}
</Text>
<Text>{item.project_description}</Text>
<Text style={{ fontStyle: 'italic' }}>
{Number(item.distance.toFixed(2))} Km
</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
{/* <Text>{position.latitude}</Text> */}
</View>
)
}
I searched the web but the tutorials only seem to focus on react and not on react native.
Thanks for your help!

Answer 1

You can use AsynStorage for persistence.
For AsyncStorage + hooks check it out react-native-hooks/async-storage library.
A simple code example show below:
import useAsyncStorage from '#rnhooks/async-storage';
function App() {
const [storageItem, updateStorageItem, clearStorageItem] = useAsyncStorage(
key,
);
return (
<View style={styles.container}>
<Text style={styles.type}>{`Storage Value: ${storageItem}`}</Text>
<Button
title="Update Item"
onPress={() => updateStorageItem('Test String')}
/>
<Button title="Clear Item" onPress={() => clearStorageItem()} />
</View>
);
}