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.
|
1
2
3
|
import React, {useState, useEffect} from ‘react’;
import { SafeAreaView, ScrollView, StyleSheet, View, Text, TextInput, TouchableOpacity, Alert } from ‘react-native’;
|
2. Creating our main Export default App component function.
|
1
2
3
4
5
|
export default function App() {
}
|
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 :-
- jsonData – State is used to hold the JSON data coming from server.
- scrollIndex – Used to hold the Index Position.
- dataCoordnates, – Used to hold the Coordinates to scroll correctly.
- ref – Used to hold reference.
State Update Method :-
- setJsonData – Used to update JSON Data in jsonData State.
- setScrollIndex – Used to update scrollIndex State.
- setDataCoordnates, – To update dataCoordnates State value.
- setRef – To update ref state value.
|
1
2
3
4
5
6
7
|
const [jsonData, setJsonData] = useState([]);
const [scrollIndex, setScrollIndex] = useState(0);
const [dataCoordnates , setDataCoordnates] = useState([]);
const [ref, setRef] = useState(null);
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
|
useEffect(() => {
fetch(‘https://jsonplaceholder.typicode.com/posts’)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
setJsonData(responseJson);
})
.catch((error) => {
console.error(error);
});
}, []);
|
5. Creating a constant named as dataRowView . Here we would make the View for Each Row shows in Scroll View component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const dataRowView = (item, key) => {
return (
<View
key={key}
style={styles.item}
onLayout={(event) => {
const layout = event.nativeEvent.layout;
dataCoordnates[key] = layout.y;
setDataCoordnates(dataCoordnates);
}}>
<Text
style={{padding: 8}}
onPress={() => selectedItem(item)}>
{item.id}. {item.title}
</Text>
<ItemSeparator />
</View>
);
};
|
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.
|
1
2
3
4
5
|
const ItemSeparator = () => {
return (
<View style={styles.itemSeparatorStyle} />
);
};
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const scrollEvent = () => {
console.log(dataCoordnates.length, scrollIndex);
if (dataCoordnates.length > scrollIndex) {
ref.scrollTo({
x: 0,
y: dataCoordnates[scrollIndex – 1],
animated: true,
});
} else {
Alert.alert(‘Enter Value Below 100’);
}
};
|
8. Creating another method named as selectedItem(). In this method we would display the selected item on mobile screen using alert message.
|
1
2
3
|
const selectedItem = (item) => {
Alert.alert(‘Id : ‘ + item.id + ‘ Title : ‘ + item.title);
};
|
9. Creating return() block and here we would make our ScrollView, TextInput and TouchableOpacity component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.MainContainer}>
<View style={styles.searchBox}>
<TextInput
value={ String( scrollIndex ? scrollIndex : 0 ) }
numericvalue
keyboardType={‘numeric’}
onChangeText={(scrollIndex) => {
setScrollIndex( parseInt( scrollIndex != ” ? scrollIndex : 0 ) ) }}
placeholder={‘Enter index Position’}
style={styles.textInput}
/>
<TouchableOpacity
activeOpacity={0.5}
onPress={scrollEvent}
style={styles.searchButton}>
<Text style={{color: ‘white’, fontWeight: ‘bold’}}>
Go to Given Index
</Text>
</TouchableOpacity>
</View>
<ScrollView
ref={(ref) => {
setRef(ref);
}}>
{jsonData.map(dataRowView)}
</ScrollView>
</View>
</SafeAreaView>
);
|
10. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const styles = StyleSheet.create({
MainContainer: {
backgroundColor: ‘#fff’,
flex: 1
},
searchBox: {
flexDirection: ‘row’,
backgroundColor: ‘#25fe01’,
padding: 5,
},
textInput: {
flex: 1,
backgroundColor: ‘white’,
padding: 10,
},
searchButton: {
padding: 12,
backgroundColor: ‘#020efe’,
},
itemSeparatorStyle: {
height: 0.5,
width: ‘100%’,
backgroundColor: ‘#484747’,
},
});
|
11. Complete Source Code for App.js file :-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import React, {useState, useEffect} from ‘react’;
import { SafeAreaView, ScrollView, StyleSheet, View, Text, TextInput, TouchableOpacity, Alert } from ‘react-native’;
export default function App() {
const [jsonData, setJsonData] = useState([]);
const [scrollIndex, setScrollIndex] = useState(0);
const [dataCoordnates , setDataCoordnates] = useState([]);
const [ref, setRef] = useState(null);
useEffect(() => {
fetch(‘https://jsonplaceholder.typicode.com/posts’)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
setJsonData(responseJson);
})
.catch((error) => {
console.error(error);
});
}, []);
const dataRowView = (item, key) => {
return (
<View
key={key}
style={styles.item}
onLayout={(event) => {
const layout = event.nativeEvent.layout;
dataCoordnates[key] = layout.y;
setDataCoordnates(dataCoordnates);
}}>
<Text
style={{padding: 8}}
onPress={() => selectedItem(item)}>
{item.id}. {item.title}
</Text>
<ItemSeparator />
</View>
);
};
const ItemSeparator = () => {
return (
<View style={styles.itemSeparatorStyle} />
);
};
const scrollEvent = () => {
console.log(dataCoordnates.length, scrollIndex);
if (dataCoordnates.length > scrollIndex) {
ref.scrollTo({
x: 0,
y: dataCoordnates[scrollIndex – 1],
animated: true,
});
} else {
Alert.alert(‘Enter Value Below 100’);
}
};
const selectedItem = (item) => {
Alert.alert(‘Id : ‘ + item.id + ‘ Title : ‘ + item.title);
};
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.MainContainer}>
<View style={styles.searchBox}>
<TextInput
value={ String( scrollIndex ? scrollIndex : 0 ) }
numericvalue
keyboardType={‘numeric’}
onChangeText={(scrollIndex) => {
setScrollIndex( parseInt( scrollIndex != ” ? scrollIndex : 0 ) ) }}
placeholder={‘Enter index Position’}
style={styles.textInput}
/>
<TouchableOpacity
activeOpacity={0.5}
onPress={scrollEvent}
style={styles.searchButton}>
<Text style={{color: ‘white’, fontWeight: ‘bold’}}>
Go to Given Index
</Text>
</TouchableOpacity>
</View>
<ScrollView
ref={(ref) => {
setRef(ref);
}}>
{jsonData.map(dataRowView)}
</ScrollView>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
MainContainer: {
backgroundColor: ‘#fff’,
flex: 1
},
searchBox: {
flexDirection: ‘row’,
backgroundColor: ‘#25fe01’,
padding: 5,
},
textInput: {
flex: 1,
backgroundColor: ‘white’,
padding: 10,
},
searchButton: {
padding: 12,
backgroundColor: ‘#020efe’,
},
itemSeparatorStyle: {
height: 0.5,
width: ‘100%’,
backgroundColor: ‘#484747’,
},
});
|
Screenshots :-
Also Read :
Subscribe to Our YouTube Channel Coding Tech Examples
React Native Set TextInput Type Style Password Android iOS Example
Set Text Color in React Native Android iOS Tutorial
React Native justifyContent style Explained With Example Tutorial
Add Image Icon Inside TextInput in React Native Android iOS Example
