Hello Guys, I hope you all are doing well and safe.
Today I am going to share my experience through React Native Scroll To Top FlatList on React Navigation Tab Button Press tutorial. I think all of you are aware of this functionality. Guess for which functionality I am talking about. You can check this functionality in almost all recent apps and nowadays this functionality becomes more popular in apps. I hope you noticed this functionality in native Facebook and Instagram mobile apps. When the user scrolls the Feed and clicks on the Home button(showing in the Tab-Bar) then Feeds list scroll to the top. So, this is the functionality. Recently, I am working on a project in which I had the same requirement. So, I want to share my experience with you through this tutorial.
The final result of React Native Scroll To Top FlatList on React Navigation Tab Button Press Tutorial:
Step – 1: Install the following modules:
- @react-navigation/native (version – 5.7.6 at the time of the creation of this post).
@react-navigation/bottom-tabs (version – 5.9.2 at the time of the creation of this post).
react-native-gesture-handler (version – 1.8.0 at the time of the creation of this post).
react-native-reanimated (version – 1.13.1 at the time of the creation of this post).
react-native-safe-area-context (version – 3.1.8 at the time of the creation of this post).
react-native-screens (version – 2.11.0 at the time of the creation of this post).
- react-native-vector-icons (version – 7.1.0 at the time of the creation of this post).
Step – 2: Create a folder hierarchy /src/ScrollToTop(under the root directory) and following 4 files under /src/ScrollToTop directory.
- HomeScreen.js: Will consume the ListComponent.
- FeedScreen.js: Will consume the ListComponent.
- ListComponent.js: Will contain a common FlatList component.
- TabNavigator.js: Will contain Tab Navigator related stuff.
And following one file under /src directory.
- services.js: Will contain common functions such as creating an array of items, onTabPress function, and scrollToTop function.
Step – 3: Write code for App.js file:
Step – 4: Implement common functions by just modifying the services.js file.
As you can see there are following 3 functions.
- The first one named listItems is responsible to generate an array of 100 items which would be shown as FlatList items in HomeScreen.js and FeedScreen.js files.
- The second one named onTabPress would be executed when the user presses the Tab buttons(showing in the BottomTabBar).
- The last & third one named scrollToTop is the main function that would be responsible to scroll the FlatList to Top.
Step – 5: Implement a reusable ListComponent component by modifying the ListComponent.js file.
- In this component, we are creating a reusable FlatList component to showing a List of 100 items.
- We are creating a reference for the FlatList using the useRef hook. Basically, using this reference the FlatList would be scrolled.
- Then calling a scrollToTop(previously created in the services.js file) function and passing navigation and FlatList reference(listRef) as parameters.
Step – 6: Implement code for HomeScreen and FeedScreen by just modifying HomeScreen.js and FeedScreen.js files.
Step – 7: It’s time to create the Bottom Tab Navigator and bind the HomeScreen and FeedScreen UI. So, follow the below mentioned code snippet.
- One important thing to notice in the above code snippet is listeners prop which accepts a callback function and in this function we can use the tabPress event.
That’s all. Simple & Straight forward. What do you think?