How to fetch data from api and set to image slider? - react-native

Question

I am new to reactnative and I am trying to make the imagesilder. I am trying to get data from the api and set it to the imageslider. I have to get the image tag from the api and set it to the imageslider.My api is as follows:
[
{
"title":"Taylor Swift",
"artist":"Taylor Swift",
"url":"https://www.amazon.com/Taylor-Swift/dp/B0014I4KH6",
"image":"https://images-na.ssl-images-amazon.com/images/I/61McsadO1OL.jpg",
"thumbnail_image":"https://i.imgur.com/K3KJ3w4h.jpg"
},
{
"title":"Fearless",
"artist":"Taylor Swift",
"url":"https://www.amazon.com/Fearless-Enhanced-Taylor-Swift/dp/B001EYGOEM",
"image":"https://images-na.ssl-images-amazon.com/images/I/51qmhXWZBxL.jpg",
"thumbnail_image":"https://i.imgur.com/K3KJ3w4h.jpg"
}
]
I cant get the image data from the api and to render it inside the render function. I have implemented as follows:
export default class ViewpagerP extends Component {
constructor(props) {
super(props);
this.state = { isLoading: true, images: [], data: [] }
}
componentDidMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response =>response.json())
.then((data)=>{for (let index = 0; index < data.length; index++) {
this.setState({
isLoading: false,
data: data[index]
})
}})
}
render() {
const { images } = this.state;
return (
<View style={styles.container}>
<ImageSlider style={styles.viewPagerStyle}
loopBothSides
autoPlayWithInterval={1000}
images={images}
customSlide={({ index, item, style, width }) => (
<View key={index} style={style}>
<Image source={{ uri: item }} style={styles.customImage} />
</View>
)}
/>
</View>
)
}
}

Answer 1

As you already have images in state, utilize that only.
.then((data)=>{
this.setState({
isLoading: false,
images:data
})
})
Now you have your response within this.state.images, so just need to do one change which is inside customSlide
customSlide={({ index, item, style, width }) => (
<View key={index} style={style}>
<Image source={{ uri: item.image }} style={styles.customImage} />
</View>
)}
item will give you whole single node we need to extract image from that element, so we will write item.image

Answer 2

Use the code below and it will works, since you forgot to add data state in you image slider library, that's why you are not getting your desired result
export default class ViewpagerP extends Component {
constructor(props) {
super(props);
this.state = { isLoading: true, images: [], data: [] }
}
componentDidMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
data: responseJson
})
})
}
render() {
return (
<View style={styles.container}>
<ImageSlider style={styles.viewPagerStyle}
loopBothSides
autoPlayWithInterval={1000}
images={this.state.data}
customSlide={({ index, item, style, width }) => (
<View key={index} style={style}>
<Image source={{ uri: item.image }} style={styles.customImage} />
</View>
)}
/>
</View>
);
}
}

Answer 3

I solved it
componentDidMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then((response => this.setState({
isLoading: false,
data: response.data,
}))
)
}
And in 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]}>
<Image source={{ uri: item.image }} style={styles.customImage} />
</View>
)}
/>
</View>
);
}