react-native-swiper does not show dynamic images - reactjs

Question

I have issue that my swiper does not show images. Swiper and dots from swiper are there but images are not showing. I am pretty new to react-native. This is my code:
import React from 'react';
import {
StyleSheet,
View,
Image,
Text
} from 'react-native';
import Swiper from 'react-native-swiper';
export default class HomeScreen extends React.Component {
state = {
data: []
}
componentDidMount = () => {
this.setState({
data: this.props.navigation.getParam('data', 'NO-DATA')
});
}
render() {
return (
<View style={styles.container}>
<Swiper
style = {styles.swiper }
>
{
this.state.data.map( (item, i) => {
<View>
<Text> {item.url} </Text>
<Image
style={{width: 200, height: 200}}
source={{uri: item.url}}
/>
</View>
})
}
</Swiper>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
},
swiper: {
width: 200,
height: 200
}
});
The issue is not only with image, also it is happening with text, etc.
Am i missing something ?

Answer 1

Return is missing inside the map add it.
{
this.state.data.map && this.state.data.map( (item, i) => {
return(
<View>
<Text> {item.url} </Text>
<Image
style={{width: 200, height: 200}}
source={{uri: item.url}}
/>
</View>)
})
}
Or without return. If you use ( this bracket you no need to add return
{
this.state.data.map && this.state.data.map( (item, i) => (
<View>
<Text> {item.url} </Text>
<Image
style={{width: 200, height: 200}}
source={{uri: item.url}}
/>
</View>)
))
}