react-native-swiper does not show dynamic images

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>)
      ))
    }