Hi everyone! I would like to write a tutorial about scrolling rendered content to a certain item in the list of items.
Example when need it: If your app has a list of items and you need the list automatically scrolls to a needed item (for example if a search button pressed and a matching item is found). If needed item is located in the end of the data array and not visible on the screen you need a function that perform automatic scrolling towards the right item .
Recently I was working on a new project and also came to a situation where scrolling to the item was necessary. I was implementing a function that reveals additional data after clicking on the item. The problem was with items that are only partially visible on the screen, if I click it, it’s opened but off the screen, which is terrible user experience. You can see it below.
Here scrollTo() method came in handy. The method allows you to scroll to the specified coordinates.
Syntax: scrollTo({ x: coordinate, y: coordinate})
where x is the pixel along the horizontal axis of the element that you want displayed in the upper left, y is the pixel along the vertical axis.
So lets start to implement scrollTo() method. I am going to start with a functional component that has an array of items.
export default function App(){ const [items, updateItem] = useState([{key: 1, title: item1},
{key:2, title: item2},
{key:3, title: item3}
])
return( <ScrollView horizontal={true} persistentScrollbar={true}>
{ items.map(item => {
return <TouchableOpacity
key={item.key}
onPress={() => {openItem(item)}} <Text> {item.title} </Text>
</TouchableOpacity>
)}}
)}
- First we need to create an empty array to store X coordinate of every rendered item.
const [coordinate, setCoordinate] = useState([])
Remember to import {useState} at the top of Component.
2. We also need to use React Refs, they provide a way to access React element.
const ref = React.useRef(0);
3. Adding onLayout prop to the <ScrollView> component let us find the location of the item.
export default function App(){const [items, updateItem] = useState([{key: 1, title: item1},
{key:2, title: item2},
{key:3, title: item3}
])
const [coordinate, setCoordinate] = useState([])
const ref = React.useRef(0);const openItem = item => {
...(some other code for opening item)
ref.current.scrollTo({x: coordinate[item.key]-50})
}<ScrollView horizontal={true} persistentScrollbar={true}>
{items.map(item => {
return <TouchableOpacity
key={item.key}
onPress={() => {openItem(item)}}
onLayout={(event) => {
const layout = event.nativeEvent.layout;
coordinate[item.key] = layout.x;
console.log(layout.x);
}}
<Text> {item.title} </Text>
</TouchableOpacity>
)}}
)}
Some explanation onLayout prop:
event.nativeEvent.layoutwill show you all coordinates of the item. You can console.log it and see the following:
“layout”: Object {
“height”: 45,
“width”: 146.5,
“x”: 12,
“y”: 15,
},
coordinate[item.key] = layout.x Here we push X location of the item to the array we created in step 1. In my example value of X is 12 . So number 12 goes to Coordinate Array on the same index as a key of the item.
openItem() Methodresponsible for opening an item and scrolling the list of items to the necessary item. Here I use scrollTo() function and provide the location where to scroll to. So I am passing the item key as an index for extracting X coordinate from the Coordinate Array. I also substract 50 from the item coordinate, that way the item will be scrolled a little back and the item is going to be closer to the center of the screen.
This is it. You can see the result below.
