Need Example of how to implement ToggleRowActive

[Metroidaron]

I would assume that when I include the prop manuallyActivateRows={true} a new value would be passed in the renderRow object; I do not know how to access the toggleRowActive function that is now available because I specified manuallyActivateRows as true.

My RenderRow value is a function that returns a JSX.Element, not a component, and that function also has this bound to the current component. Unsure if that bit is important.

[vikramkh]

When I Set manuallActivateRows to true, I still don't see any toggleRowActive function as an argument.

[mattschaff]

Same issue.

[ltsharma]

Same here!!!

[sohnhyunji]

Same issue.

[dperrera]

This worked for me:

Pass in toggleRowActive explicitly to your renderRow component:

<SortableList
    data={listItems}
    renderRow={({ active, data, toggleRowActive }) => (
      <Row active={active} data={data} toggleRowActive={toggleRowActive} />
    )}
    manuallyActivateRows={true}
/>

Use it in the renderRow component:

const Row = ({ data, active, toggleRowActive }) => {
  return (
    <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
      <Text>{data.description}</Text>
      {/* This is the handle */}
      <TouchableOpacity onPressIn={() => toggleRowActive()}>
        <Text>#</Text>
      </TouchableOpacity>
    </View>
  )
}