Image does not appear in Flatlist React Native

Question

Hello, I’m trying to put together a list with some elements inside it but the image element does not appear but returns the right image size.

I created an array with the data I want to show, then created a function that returns the JSX the way I want and receives both the image and the other texts as parameter and finally used it in flatlist of the class that uses this function.

The array that receives the images with require:

const DATA = [

{
    image: require('./luz.png'),
    id: '3',
    title: 'Parabens você economizou \n luz em sua casa ',
    pontos: '75 pts'
},
{
    image: require('./recycle.png'),
    title: 'Hoje você ajudou a tirar \nlixo dos oceanos !',
    pontos: '95 pts',
    id: '1',
},
{
    image: require('./cesta.png'),
    id: '2',
    title: 'Comida orgânica ajuda \n o meio ambiente !',
    pontos: '55 pts'
},
{
    image: require('./cesta.png'),
    id: '4',
    title: 'Comida orgânica ajuda \n o meio ambiente !',
    pontos: '55 pts'
},
{
    image: require('./cesta.png'),
    id: '5',
    title: 'Comida orgânica ajuda \n o meio ambiente !',
    pontos: '55 pts'
},
]

Here the function that works the elements in JSX:

function Item({ title, image,pontos }) {
    return (
      <View style={styles.item}>
        <Image source={{image}} style={{ width: 75, height: 99, }}></Image>
        <Text style={styles.descriTe}>{title}</Text>
        <Text style={{fontSize: 18,fontWeight: 'bold',color: '#598fe1',marginLeft: 30, textAlign: 'right' ,textAlignVertical: 'center',}}>{pontos}</Text>
      </View>
    );
  }

The class I use the flatlist in:

class Principal extends React.Component {



    static navigationOptions = ({navigation}) => {

        return{
        headerTitle: (            
            <View 
                style={{
                marginLeft: 65,
                alignItems: 'center',
                justifyContent: 'center',
                width: 100,
                height: 100,
                backgroundColor: '#598fe1',
                borderRadius: 50,
                marginTop: 20,
                }}>
            <ImageBackground source={require('./slothH.png')} style={{
                    width: 66,
                    height: 77,
                    marginTop: 10,
                    }}>
                <TouchableOpacity>
                </TouchableOpacity>
            </ImageBackground>
        </View>
        ),  

        headerLeft: (
            <View>
            </View>
        ),
        headerRight: <SinalMais navigation={navigation} />,
        headerStyle: {
            backgroundColor: '#598fe1',
        }
    }
    }

    state = { currentUser: null }

    componentDidMount() {
        const { currentUser } = firebase.auth()
        this.setState({ currentUser })
    }

  render() {
      const { currentUser } = this.state
  return (
        <View style={styles.container}>
            <View style={styles.containerTopPrin}>
                <Text style={styles.tituloPag}>
                Olá {currentUser && currentUser.email}!
                </Text>
                <Text style={styles.descriTe}>
                Aqui são as coisas que já fez {"\n"}
                para ajudar o mundo !
                </Text>

            </View>



            <View style={styles.containerPrin}>
                <ScrollView>
                    <FlatList
                        data={DATA} 
                        renderItem={({item}) => (
                        <Item image={item.image} title={item.title} pontos={item.pontos} />) }
                        keyExtractor={item => item.id}
                    />
                </ScrollView>               
            </View>

//e o código continua daqui..

Both in the Expo and in the build itself it is not showing the image.

Answer 1

Call the image that...

   const DATA = [
    {
    image: source={require('./luz.png')},
    id: '3',
    [...]

Try pulling it this way...

<Item image={{uri: item.image}} [...]