React Native Scroll To Given FlatList JSON Item in ScrollView Example

Hello friends, we had posted our last tutorial 5 days ago which was about Mathematical charts in react native. Today we would going to learn about something new in react native. Today we would discuss about creating a custom Flat List or List View in react native without using FlatList component using ScrollView component. It works same as Flat List event the items will renders as same but the component we are using is ScrollView. Now here comes the main part, All the data used in our tutorial is coming from online JSON URL. We’re using jsonplaceholder free JSON URL in our tutorial to render items. So in this tutorial we would learn about React Native Scroll To Given FlatList JSON Item in ScrollView Android iOS Example.

The main feature of our example is that we would make a Text Input component at the top of Scroll View with a Button. Now when user enters any number in the Text Input and press the button then it will scroll to that specific item in List. You can also get any item by selecting it. So let’s get started 🙂 .

Contents in this project React Native Scroll To Given FlatList JSON Item in ScrollView Example :-

1. Open your project’s main App.js file and import useState, useEffect, SafeAreaView, ScrollView, StyleSheet, View, Text, TextInput, TouchableOpacity and Alert component.

2. Creating our main Export default App component function.

3. Creating 4 State named as jsonData, scrollIndex, dataCoordnates, ref with State update methods named as setJsonData, setScrollIndex, setDataCoordnates and setRef with default values.

States :-

  1. jsonData – State is used to hold the JSON data coming from server.
  2. scrollIndex – Used to hold the Index Position.
  3. dataCoordnates, – Used to hold the Coordinates to scroll correctly.
  4. ref – Used to hold reference.

State Update Method :-

  1. setJsonData – Used to update JSON Data in jsonData State.
  2. setScrollIndex – Used to update scrollIndex State.
  3. setDataCoordnates, – To update dataCoordnates State value.
  4. setRef – To update ref state value.

4. Creating useEffect() method, Now here we would parse the JSON from URL and store into jsonData State. We would pass [ ] Empty array at the end of use Effect to work is as componentdidmount() method.

5. Creating a constant named as dataRowView . Here we would make the View for Each Row shows in Scroll View component.

6. Creating a constant named as ItemSeparator. In this we would make a View to draw a horizontal line. We would display this line after each item of List.

7. Now we would make another constant named as scrollEvent. This is our main method. We would call this function on button click event now in this function first we would check if the entered Index position is below the scroll view items index then scroll to that index using animation. If the entered value is bigger than avaiable index then it will show us a alert error message.

8. Creating another method named as selectedItem(). In this method we would display the selected item on mobile  screen using alert message.

9. Creating return() block and here we would make our ScrollView, TextInput and TouchableOpacity component.

10. Creating Style.

11. Complete Source Code for App.js file :-

Screenshots :-

React Native Scroll To Given FlatList JSON Item in ScrollView Example

Leave a Reply

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