Scroll to specific message in React/React-Native inside a list-CodePudding

I have a JSON object mapped over. I want a button that on click scrolls only to the div/View with json key "property":true

     {json.messages.map((item,index)=>{
      
      return(
        <View ref={scrollTo}>
        <Text>{item.userName}</Text>
        </View>
        )
      })}

View and Text would be divs in React

There will be a button that on Press scrolls to the View/Div were "property": true

IF the code isn't sufficient, just a basic idea in 2 lines will be enough. I struggle with refs

CodePudding user response：

I think someone already commented here, but using FlatList is the right answer.

https://reactnative.dev/docs/flatlist#scrolltoindex

If you are looking to build a button where it scrolls to the next item that has property: true, then you will likely need to store an array with all the indices in the list where property is true, and just iterate through that array with scrolltoIndex