How to cache data and fetch in reactnative? - react-native

Question

I am new to Reactnative and Javascript and I am trying to cache the data from APi and get it. But it is not working. I could not render the data. I am getting the error. How can I cache and retrieve data from cache when there is no internent? I have implemented the code for caching as follows:
export default class ViewpagerP extends Component {
constructor(props) {
super(props);
this.state = { isLoading: true, data: [] }
}
async componentDidMount() {
const photoStorage = await AsyncStorage.getItem('GalleryPhotos')
console.log(photoStorage);
if(!photoStorage) {
try {
console.log("Null inside")
const photoResp = await axios.get('https://rallycoding.herokuapp.com/api/music_albums')
console.log(photoResp)
const photoData = await JSON.stringify(photoResp.data);
this.setState({data:photoResp,isLoading:false})
await AsyncStorage.setItem('GalleryPhotos', photoData);
} catch(e) {
console.warn("fetch Error: ", error)
}
then(response => this.setState({ data: response.data,isLoading:false }))
}else{
this.getPhotos;
}
}
getPhotos = async()=> {
try {
data = JSON.parse(await AsyncStorage.getItem('GalleryPhotos'));
this.setState({data:data,isLoading:false})
console.log(data);
}
catch (error) {
console.error(error);
}
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
)
}
console.log(this.state.data);
return (
<View style={styles.container}>
<ImageSlider style={styles.viewPagerStyle}
loopBothSides
autoPlayWithInterval={6000}
images={this.state.data}
customSlide={({ index, item, style, width }) => (
<View key={index} style={[style, styles.customSlideStyle]}>
<View style={styles.contentContainer}>
<Image source={{ uri: item.image }} style={styles.customImage} />
<View style={styles.textContainerStyle}>
<Text style={styles.textStyle}>{item.title}</Text>
</View>
</View>
</View>
)
}
/>
</View>
);
}
}

Answer 1

You need some correction in code
this.getPhotos;
to
this.getPhotos();
And also you can check internate is on off by using
import { NetInfo} from 'react-native';
Check the below artical it will help you
enter link description here
here is come correction
export default class ViewpagerP extends Component {
constructor(props) {
super(props);
this.state = { isLoading: true, data: [] }
}
async componentDidMount() {
const photoStorage = await AsyncStorage.getItem('GalleryPhotos')
console.log(photoStorage);
if(!photoStorage) {
try {
console.log("Null inside")
const photoResp = await axios.get('https://rallycoding.herokuapp.com/api/music_albums')
console.log(photoResp)
const photoData = await JSON.stringify(photoResp.data);
this.setState({data:photoResp,isLoading:false})
await AsyncStorage.setItem('GalleryPhotos', photoData);
} catch(e) {
console.warn("fetch Error: ", error)
}
}else{
this.getPhotos();
}
}
getPhotos = async()=> {
try {
data = JSON.parse(await AsyncStorage.getItem('GalleryPhotos'));
this.setState({data:data,isLoading:false})
console.log(data);
}
catch (error) {
console.error(error);
}
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
)
}
console.log(this.state.data);
return (
<View style={styles.container}>
<ImageSlider style={styles.viewPagerStyle}
loopBothSides
autoPlayWithInterval={6000}
images={this.state.data}
customSlide={({ index, item, style, width }) => (
<View key={index} style={[style, styles.customSlideStyle]}>
<View style={styles.contentContainer}>
<Image source={{ uri: item.image }} style={styles.customImage} />
<View style={styles.textContainerStyle}>
<Text style={styles.textStyle}>{item.title}</Text>
</View>
</View>
</View>
)
}
/>
</View>
);
}
}