CODEWITHSUNDEEP
javascriptcssreactjsreact-native
merry-go-round
merry-go-round

Reputation: 4615

How to render checkbox on the <Image> (React Native)

I want to put checkbox on the Image. Here is current Screen.

enter image description here

It's simple FlatList. Here is renderItem() for FlatList

   <TouchableWithoutFeedback
      onPress={() => this._handleImagePress(item.id)}>
      <Image
        key={item.id}
        source={{uri: item.outfit_img}}
        style={styles.rowImage}
        resizeMode="cover"
      />
    </TouchableWithoutFeedback>

What I want to implement is like this screen below

enter image description here

I have <CheckBox on={true}> component to render checked checkbox.

Requested 

handleImagePress = (id) => {
    if(_.includes(this.state.selectedIds, id)) {
        let newSelectedIds = _.filter(this.state.selectedIds, (curObject) => {
            return curObject !== id;
        });
        this.setState({selectedIds : newSelectedIds});
      } else {
        let newSelectedIds = [...this.state.selectedIds, id];
        this.setState({selectedIds : newSelectedIds});
      }
}

Upvotes: 1

Views: 4364

Answers (1)

Shubhnik Singh
Shubhnik Singh

Reputation: 1329

You just need to do this in your renderItem():

renderItem({item}) => {
 const isSelected = this.state.selectedIds.includes(item.id)
 return (
    <TouchableWithoutFeedback
      onPress={() => this._handleImagePress(item.id)}
    >
       <Image
         key={item.id}
         source={{uri: item.outfit_img}}
         style={styles.rowImage}
         resizeMode="cover"
       />
       { isSelected && <CheckBox on={true}> }
    </TouchableWithoutFeedback>
 )
}

Here Checkbox should have absolute positioning, and you can provide your desired styles. Also, you need to add an extraData prop with value this.state.selectedphotos to your Flatlist.

Upvotes: 2

Related Questions