CODEWITHSUNDEEP
javascriptjsonreact-nativeurl
HowardJohn
HowardJohn

Reputation: 51

React Native, Adding Image Beside FlatList item

This is simple code has built with React Native and it works fine, it gets Data from JSON link and show it in FlatList as Text Item. I want to add image foreach Item inside this FlatList. I don't know in which part in this code will make the image to be displayed. This is the JSON file:

[
  {"uid":"001","uname":"Jon","uimage":"http:\/\/me.com\/jon.jpg"},
  {"uid":"002","uname":"Eds","uimage":"http:\/\/me.com\/eds.jpg"},
  {"uid":"003","uname":"Sam","uimage":"http:\/\/me.com\/sam.jpg"}
]

This is the RN code:

import React, { useState, useEffect } from 'react';
// import all the components we are going to use
import {
SafeAreaView,
Text,
StyleSheet,
View,
FlatList,
Image
} from 'react-native';
const App = () => {
const [masterDataSource, setMasterDataSource] = useState([]);

useEffect(() => {
    fetch('http://www.link2json.com/data.json')
        .then((response) => response.json())
        .then((responseJson) => {
            setMasterDataSource(responseJson);
        })
        .catch((error) => {
            console.error(error);
        });
}, []);

const ItemView = ({ item }) => {
    return (
        // Flat List Item
        <Text
            style={styles.itemStyle}
            onPress={() => getItem(item)}>
            {item.unam}
        </Text>           
        <Image source={ uri: {'uimage'}} /> //<--Here's the issue
    );
};

const ItemSeparatorView = () => {
    return (
        // Flat List Item Separator
        <View
            style={{
                height: 0.5,
                width: '100%',
                backgroundColor: '#C8C8C8',
            }}
        />
    );
};

const getItem = (item) => {
    // Function for click on an item
    alert('Id : ' + item.uid + ' Title : ' + item.unam);

};

return (
    <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
            <FlatList
                data={masterDataSource}
                keyExtractor={(item, index) => index.toString()}
                ItemSeparatorComponent={ItemSeparatorView}
                renderItem={ItemView}
            />
        </View>
    </SafeAreaView>
);
};

const styles = StyleSheet.create({
container: {
    backgroundColor: 'white',
},
itemStyle: {
    padding: 10,
},
});

export default App;

Upvotes: 0

Views: 1085

Answers (3)

Nitish
Nitish

Reputation: 1053

I agree with last answer but did few styling. actually you can't return 2 view item so you need to add a parent view to use other items in it and by this you are only returning single view item.

const ItemView = ({ item }) => {
    return (
       <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
        <Text
            style={styles.itemStyle}
            onPress={() => getItem(item)}>
            {item.unam}
        </Text>           
        <Image style={{height:50,width:50}} source={{uri: item.uimage}} />
       </View>
    );
};

Upvotes: 1

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Try this

<Image style={{height:50,width:50}} source={{uri: item.uimage}} /> // add here

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16354

You will have to do something like below

const ItemView = ({ item }) => {
    return (
        // Flat List Item
       <View style={{flexDirection:'row'}}>
        <Text
            style={styles.itemStyle}
            onPress={() => getItem(item)}>
            {item.unam}
        </Text>           
        <Image style={{height:50,width:50}} source={{uri: item.uimage}} />
       </View>
    );
};

Upvotes: 1

Related Questions