Checked - Unchecked not working in ListView - React Native

Question

friend. I will enable checked - out of control in listView. So when the user clicks on marked, save the data in an array and uncheck, then I will delete the data. It works fine, but the user interface will not be updated after verification - unverified.

<List containerStyle={{marginTop : 0 , borderBottomWidth : 0 , borderBottomColor : 'black', borderTopWidth : 0}}>
  <FlatList
    data={this.state.list}
    renderItem={({ item }) => (
      <ListItem containerStyle={{height: 80, backgroundColor : 'transparent', borderBottomWidth : 0, borderTopWidth : 0}}
        title={
          <View style={styles.titleView}>
            <Text style={styles.ratingText}>{item.iWorkerID.vFirstName}</Text>
          </View>
        }
        rightIcon={
           <TouchableOpacity onPress = {() => this.selectedWorker(item)} style={{width: 30, height: 30 , marginTop : 10, marginRight : 30}}>
             <Image style = {{width: 30, height: 30}} source={this.state.selectedList.includes(item) ? require("./Images/uncheckd.png") : require("./Images/checked.png")}/>
             {/* {this.state.selectedList.includes(item) && <Image style = {{width: 30, height: 30}} source={require("./Images/uncheckd.png")}/>}
             {!this.state.selectedList.includes(item) && <Image style = {{width: 30, height: 30}} source={require("./Images/checked.png")}/>} */}

           </TouchableOpacity>
        }
        avatar={<Avatar
          rounded
          medium
          containerStyle={{marginLeft: 30}}
          source={{uri: Globle.IMAGE_URL+item.vProfileImage}}
          activeOpacity={0.7}
        />}
      />
    )}
  />
</List>

And on the check / uncheck button, I will add / remove an object from the array,

selectedWorker = (data) =>{
  console.log('data is ', data);

  if (!this.state.selectedList.includes(data)) {
      // this.setState({ selectedList : [...this.state.selectedList , data]})
      this.state.selectedList.push(data);
  } else {

    var index = this.state.selectedList.indexOf(data);
    if (index > -1) {
        this.state.selectedList.splice(index, 1);
    }
  }

  this.setState({list : this.state.list})
  console.log('selected list' , this.state.selectedList);
}

The main problem: you want to update the image, marked or not selected according to the selected List array, how can I update an item in the View list.

What to do inside the selectedWorker method.

GIF:

Answer 1

Flatelist . . Flatelist, . , .

Demo , .

constructor(props) {
    super(props)
    this.state = {
        list: [
            {
                id: 1,
                name: "Harpal Singh Jadeja",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                id: 2,
                name: "Kirit Mode",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                id: 3,
                name: "Rajiv Patil",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            },
            {
                id: 4,
                name: "Chetan Doctor",
                avtar: "https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"
            }]


    };
};


renderListItem = (index, item) => {
    return (
        <View style={styles.notification_listContainer}>
            <Image source={{uri: item.avtar, cache: 'force-cache'}}
                   style={circleStyle}/>

            <View style={{flex: 1, paddingLeft: 10, justifyContent: 'center'}}>
                <Label roboto_medium
                       align='left'
                       color={Color.TEXT_PRIMARY}
                       numberOfLines={1}>
                    {item.name}
                </Label>
                <Label roboto_medium
                       small
                       align='left'
                       color={Color.TEXT_SECONDARY}
                       mt={8}>
                    Programmer
                </Label>
            </View>

            <View style={{justifyContent: 'center'}}>
                <TouchableHighlight
                    style={{
                        backgroundColor: item.isSelected ? Color.BLACK : Color.TEXT_SECONDARY,
                        alignItems: 'center',
                        justifyContent: 'center',
                        height: 40,
                        width: 40,
                        borderRadius: 20
                    }}
                    onPress={this.onSelectWorker.bind(this, index, item)} underlayColor={Color.BLACK}>
                    <Icon name='done'
                          size={20}
                          color={Color.WHITE}/>
                </TouchableHighlight>
            </View>
        </View>
    );

};
onSelectWorker = (index, item) => {
    console.log("Selected index : ", index);
    let tempList = this.state.list;
    tempList[index].isSelected = tempList[index].isSelected ? false : true
    this.setState({
        list: tempList
    });

};
render() {
    return (
        <View style={styles.notification_Container}>
            <FlatList
                data={this.state.list}
                renderItem={
                    ({index, item}) => this.renderListItem(index, item)
                }
                keyExtractor={item => item.id}
                extraData={this.state}
            />
        </View>
    )
}

Answer 2

ListItem, , React .

, React . , , .

, React 10 10 . , 5- . React 9 , React 9 . 10- 5-, React .

, .