React-native Flatlist auto scroll

Question

I have a Flat-list in react native which has items that expand & collapse (Just like dropdown), So whenever an item is clicked to expand, If the items content is overflowing in the screen.I want to scroll the item so that its content is fully visible. How can I implement that?

• scrollToIndex won’t work in this case & for scrollToOffset how can i determine the position of the clicked item on screen?

Answer 1

You can use measure to get the offset of the element, then use scrollToOffset

<Component ref="myComponent />

// Print component dimensions to console
this.refs.myComponent.measure( (fx, fy, width, height, px, py) => {
    console.log('Component width is: ' + width)
    console.log('Component height is: ' + height)
    console.log('X offset to frame: ' + fx)
    console.log('Y offset to frame: ' + fy)
    console.log('X offset to page: ' + px)
    console.log('Y offset to page: ' + py)
})