DraxList items doesn't rendered

[ApWin]

I was give array to DraxList's data and it works properly, Drag and Drop also works fine. The problem is when I deleted one of them (it deleted from array), screen Page rendered but renderItemContent doesn't rendered and showed deleted item.

What can I do in that case ?

[lafiosca]

I’m a little unclear on exactly what you’re describing. Is your last line saying that the deleted item is still being rendered? Or are you saying that none of the other items are being rendered?

It would be very helpful if you could provide a minimal reproduction of the bad behavior in Snack.

[ApWin]

Thanks for your attention @lafiosca . I don't have a permission to do this Snack.

Yeah, deleted item is still rendered, appeared on the list but it erased from array. (I checked this by console )

Now I can share with you this part of my code::

<DraxProvider>
                  <DraxList
                    data={selectedImages}
                    renderItemContent={ ({ item,index })  => {
                      return(
                        <DraxView
                          key={item.path}
                        >
                          <TouchableHighlight
                            underlayColor={'#eee'}
                            onPress={()=>{
                              if (activeIndex!==index){
                                this.setState({
                                  activeIndex:index
                                })
                              }else{
                                this.setState({
                                  activeIndex:''
                                })
                              }
                            }}
                            style={styles.selectedWrapper}
                          >
                            <>
                              <Image style={styles.selectedImage} source={{uri:`data:${item.mime};base64,${item.data}`}}/>
                              <View style={index === activeIndex ? styles.pressedStyle : {}}>
                                {
                                  index === activeIndex ? (
                                    <>
                                      <TouchableOpacity
                                        style={styles.crossIcon}
                                        onPress={()=>{
                                          selectedImages.splice(index,1)
                                          this.setState({
                                            forRender:true
                                          })
                                        }}
                                      >
                                        DELETE
                                      </TouchableOpacity>
                                    </>
                                  ) : null
                                }
                              </View>
                            </>
                          </TouchableHighlight>
                        </DraxView>
                      )
                    }}
                    onItemReorder={({ fromIndex, toIndex }) => {
                      const newData = selectedImages.slice();
                      newData.splice(toIndex, 0, newData.splice(fromIndex, 1)[0]);
                      this.setState({
                        selectedImages: newData
                      })
                    }}
                    keyExtractor={(item,index) => item.path}
                  />
              </DraxProvider>

"react-native": "0.63.3", "react-native-drax": "^0.8.1",

[lafiosca]

It looks like the problem may be in your delete logic. You are splicing selectedImages directly rather than updating the array via setState.

[ApWin]

@lafiosca Thanks, Bro )