Search code examples
javascriptreactjsreact-nativereact-reduxreact-native-draggable-flatlist

pass extra props data to renderItem in react-native-draggable-flatlist


I'm using react-native-draggable-flatlist in my app and I want to pass a prop value to renderItem so that I can make some conditional style change but not sure how to pass it, it's showing undefined

I want to pass the props(i.e., this.props.labelChange) to renderItem

Code

        <DraggableFlatList
          scrollPercent={5}
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={(item: any) => `test-${key}`}
          onMoveEnd={({ data }: any) => {
            this.setState({ data })
          }}
        />

  private renderItem({ item, isActive, index, move, moveEnd }: { item: any, isActive: any, index: any, move: any, moveEnd: any }) {
    return (<testChildComponent data={item} isActive={isActive} index={index} move={move} moveEnd={moveEnd} />)
  }

Solution

  • I'm able to pass the props by coverting renderItem function to arrow function, it has wider scope to recognize 'this'