react native - Rendering Favourites icon to Flat list

Question

Any ideas to render favourites button the one with a heart shape on Flatlists in React Native? This I have here works fine, I get the data from a REST api correctly without worries, but the primary challenge is , having to have the favourites button to it.

Flat List code looks like this

  render() {
        return (
            <View style={styles.MainContainer}>
            <FlatList
            data={ this.state.dataSource }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) => 
                <View style={{flex:1, flexDirection: 'row'}}>
                    <Image source = {{ uri: item.url_image}} style={styles.imageView} />
                    <Text onPress={this.GetItem.bind(this, item.movie_description)} style={styles.textView} >{item.movie_description}</Text>
                </View>
                }
            keyExtractor={(item, index) => index.toString()}
            />
            </View>
        );
  }
}

Help would be very much appreciated!

question from:https://stackoverflow.com/questions/65856202/rendering-favourites-icon-to-flat-list

Answer 1

At the main View in renderItem

<View style={{flex:1, flexDirection: 'row'}}>
     <Image source = {{ uri: item.url_image}} style={styles.imageView} />
     <Text onPress={this.GetItem.bind(this, item.movie_description)} style={styles.textView} >{item.movie_description}</Text>
</View>

you can simply add png image or any favourite icon, but you have to give it position: 'absolute' if you want favourite icon to be float on the card, you can add image into main View in the renderItem like this

<Image 
   source={your png or jpg file's path} 
   style={{
       height: 25, 
       width: 25, 
       position: 'absolute',
       top: 15,
       right: 15
   }}/>