CODEWITHSUNDEEP
reactjsreact-nativeecmascript-6
Kartiikeya
Kartiikeya

Reputation: 2516

bind image uri to flatlist react-native

I'm trying to bind image uri to flatlist. But it's not. rendering ..

this.state = {
        data: [

            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'Bank Accounts', val: ''
            },
            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'PrePaid-Cards', val: ''
            },
            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'Other Wallets', val: ''
            },
            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'Help', val: ''
            },
            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'About App', val: ''
            }
        ]
    }
}

I'm using this method. to render RenderItem for flatlist

_renderList = ({ item }) => {
    return (
        <View style={styles.listContainer}  >
            <Image style={styles.listImage}  source={item.avatar}  />
            <Text style={styles.listText} >{item.text}</Text>
            <Text style={styles.listVal} >{item.val}</Text>
            <Image style={styles.listImage} source={require('../../resources/icons/MyAccount/arrowright.png')} />
        </View>
    );

}

It's rendering empty space. Is there something I'm missing ?

Upvotes: 0

Views: 2440

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

You have require inside string. It should be plain require:

avatar: require('../../resources/icons/MyAccount/rounduser.png')

Upvotes: 2

Related Questions