React Native Scroll To Top FlatList on React Navigation Tab Button Press

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 now a days this functionality become more popular in apps. I hope you noticed this functionality in native Facebook and Instagram mobile apps. When user scrolls the Feed and clicks on the Home button(showing in the Tab-Bar) then Feeds list scroll to 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.

Final result of Loop animation in React native using React native reanimated tutorial:

Let’s begin…

Step – 1: Install following modules:

  • @react-navigation/native (latest version – 5.7.6 at the time of creation of this post).
  • @react-navigation/bottom-tabs (latest version – 5.9.2 at the time of creation of this post).
  • react-native-gesture-handler (latest version – 1.8.0 at the time of creation of this post).
  • react-native-reanimated (latest version – 1.13.1 at the time of creation of this post).
  • react-native-safe-area-context (latest version – 3.1.8 at the time of creation of this post).
  • react-native-screens (latest version – 2.11.0 at the time of creation of this post).
  • react-native-vector-icons (latest version – 7.1.0 at the time of 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 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 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.

Important Point(s):

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 user presses the Tab buttons(showing in the BottomTabBar).
  • The last & third one named scrollToTop is the main function which would be responsible to scroll the FlatList to Top.

Step – 5: Implement reusable ListComponent component by modifying ListComponent.js file.

Important Point(s):

  • In this component, we are creating a reusable FlatList component to showing a List of 100 items.
  • We are creating a reference of the FlatList using 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.

Important Point(s):

  • 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?

Leave a Reply

Your email address will not be published. Required fields are marked *