Displaying Images and text in ListView for React Native

Question

I am trying to load images via a url and text using ListView and show data into List but when I populate it in a listview Image and text then my images are not show.

My code is:

import React, { Component } from "react";
import { ListView, Text, View, Image, StyleSheet } from "react-native";

const styles = Style.create({
container: {
    flex: 1,
    marginTop: 20
}
});

class ListViewDemo extends React.Component {
constructor(props) {
    super(props);

    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.state = {
        dataSource: ds.cloneWithRows(["row 1", "row 2"])
    };
}
render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={data => {
                <View style={styles.container}>
                    <Image
                        source={{
                            uri:
                                "https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg"
                        }}
                        style={{ width: 193, height: 110 }}
                    />
                    <Text> Asad </Text>
                </View>;
            }}
        />
    );
}
} [enter image description here][1]

export default ListViewDemo;

Answer 1

React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList first and then provide the image in the data source.

    import React from 'react';
    import { FlatList, StyleSheet, Text, View } from 'react-native';
    
    const styles = StyleSheet.create({
      container: {
       flex: 1,
       paddingTop: 22
      },
      item: {
        padding: 10,
        fontSize: 18,
        height: 44,
      },
      img: {
        width: 100,
        height: 100
      },
    });
    
    const FlatListBasics = () => {
      return (
        <View style={styles.container}>
          <FlatList
            data={[
              {key: 'Devin', image: 'image1.png'},
              {key: 'Dan', image:'image2.png'},
          
            ]}
            renderItem={({item}) => <Image source={item.image} style={styles.img} /><Text style={styles.item}>{item.key}</Text>}
          />
        </View>
      );
    }
    
    export default FlatListBasics;

reference: https://reactnative.dev/docs/using-a-listview

Answer 2

Problem

The images would not render in your list view.

Solution

I have noticed sometimes having trouble getting images to show up when components render in react. Especially when they are loaded over a network call. I added a style to your image component, placed the image source into a variable and fixed some syntax errors you had in your code.

The biggest problem, and the reason it was not rendering the image was you added {} around your renderRow prop which would call for the need of a return statement. When you supply () around the return data, return is implied because your using a fat arrow function.

So this,

renderRow = { (data) => { }} 

Became this,

renderRow={data => ( )}

Example

You can copy and paste this whole component into you code and it will work. This has been tested,

import React, { Component } from 'react'; import { ListView, Text, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
  },
  img: {
    width: 193,
    height: 110,
  },
});

class ListViewDemo extends Component {
  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  }
  render() {
    const imageSource = 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg';
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={data => (
          <View style={styles.container}>
            <Image
              source={{ uri: imageSource }}
              style={styles.img}
            />
            <Text>{data}</Text>
          </View>)}
      />
    );
  }
}


export default ListViewDemo;

Proof of Concept

Please see the image showing your component working now,