Tree data formatting is one of the most popular data arrangement format used in many programming language. It is also used in many web and mobile applications to show data into a Tree format which drivers data from Root to left. We can also understand this data arrangement as Parent and Child node. In this data format each data has its parent -> Child -> Child …etc. In react native there is a NPM plugin named as react-native-final-tree-view which is used to create Tree View data structure in both Android and iOS applications. So in this tutorial we would learn about React Native Final Tree View in Android iOS Example.
Contents in this project React Native Final Tree View in Android iOS Example:-
1. The first step is to download and install the react-native-final-tree-view NPM package in your react native project. So open your project’s main Root directory in Command Prompt in Windows and In Terminal in MAC and execute below command to install it.
|
1
|
npm install react–native–final–tree–view —save
|
Screenshot of CMD :-
Screenshot after done installation :-
2. Now next step is to start coding for the App.js file, So open your project’s main App.js file and import View, StyleSheet, Text and SafeAreaView component.
|
1
2
3
|
import React, { useState, useEffect } from ‘react’;
import { View, StyleSheet, Text, SafeAreaView } from ‘react-native’;
|
3. Importing TreeView component from ‘react-native-final-tree-view’ package.
|
1
|
import TreeView from ‘react-native-final-tree-view’;
|
4. Creating our main Export default App functional component.
|
1
2
3
4
5
|
export default function App() {
}
|
5. Creating a Constant named as treeViewData . In this constant we would store all the data which we want to show in Tree format.
|
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
|
const treeViewData = {
items: [
{
id: ‘MI_Mobile’,
name: ‘MI Mobile’,
children: [
{
id: ‘Redmi_Note’,
name: ‘Redmi Note’,
children: [
{
id: ‘Redmi_Note_9’,
name: ‘Redmi Note 9 Pro’
},
{
id: ‘Redmi_Note_8’,
name: ‘Redmi Note 8 Pro’
},
{
id: ‘Redmi_Note_7’,
name: ‘Redmi Note 7 Pro’
},
{
id: ‘Redmi_Note_5’,
name: ‘Redmi Note 5 Pro’
},
],
},
],
},
{
id: ‘Samsung_Mobile’,
name: ‘Samsung Mobile’,
children: [
{
id: ‘Samsung_Galaxy’,
name: ‘Samsung Galaxy’,
children: [
{
id: ‘Samsung_Galaxy_F12’,
name: ‘Samsung Galaxy F12’,
},
{
id: ‘Samsung_Galaxy_M31’,
name: ‘Samsung Galaxy M31’,
},
{
id: ‘Samsung_Galaxy_F62’,
name: ‘Samsung Galaxy F62’,
},
],
},
],
},
{
id: ‘RealMe_Mobile’,
name: ‘RealMe Mobile’,
children: [
{
id: ‘RealMe_Narzo_30A’,
name: ‘RealMe Narzo 30A’,
},
{
id: ‘RealMe_Narzo_20’,
name: ‘RealMe Narzo 20’,
},
{
id: ‘RealMe_C_20’,
name: ‘RealMe C20’,
},
{
id: ‘RealMe_8_5G’,
name: ‘RealMe 8 5G’,
},
],
},
],
};
|
6. Creating a function named as getIndicator(). In this function we would print STAR, HYPHEN & PLUS symbol at the starting of the Each Tree View item.
- * – Start represents the last item of Tree View.
- + – Plus represents the First Item of Tree View.
- – Hyphen represent there are Child present in the current item.
|
1
2
3
4
5
6
7
8
9
|
const getIndicator = (isExpanded, hasChildrenNodes) => {
if (!hasChildrenNodes) {
return ‘*’;
} else if (isExpanded) {
return ‘-‘;
} else {
return ‘+’;
}
};
|
7. Creating Return() block, Here we would first call a Root SafeAreaView component -> View component -> Tree View 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
32
33
34
35
36
37
38
39
40
41
42
|
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styleSheet.MainContainer}>
<Text style={{ textAlign: ‘center’, fontSize: 28 }}> React Native Final Tree View </Text>
<TreeView
data={treeViewData.items}
getCollapsedNodeHeight={() => 30}
renderNode={
({
node,
level,
isExpanded,
hasChildrenNodes
}) => {
return (
<View style={{ height: 30, backgroundColor: ‘green’ }}
onStartShouldSetResponder={() => console.log(node.name)} >
<Text
style={{
marginLeft: 20 * level,
color: ‘white’,
height: ‘auto’,
zIndex: 1,
overflow: ‘hidden’,
fontSize: 22
}} >
{getIndicator(isExpanded, hasChildrenNodes)}
{node.name}
</Text>
</View>
);
}}
/>
</View>
</SafeAreaView>
);
|
8. Creating style.
|
1
2
3
4
5
6
7
8
9
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#FAFAFA’,
padding: 10
}
});
|
9. 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
import React, { useState, useEffect } from ‘react’;
import { View, StyleSheet, Text, SafeAreaView } from ‘react-native’;
import TreeView from ‘react-native-final-tree-view’;
export default function App() {
const treeViewData = {
items: [
{
id: ‘MI_Mobile’,
name: ‘MI Mobile’,
children: [
{
id: ‘Redmi_Note’,
name: ‘Redmi Note’,
children: [
{
id: ‘Redmi_Note_9’,
name: ‘Redmi Note 9 Pro’
},
{
id: ‘Redmi_Note_8’,
name: ‘Redmi Note 8 Pro’
},
{
id: ‘Redmi_Note_7’,
name: ‘Redmi Note 7 Pro’
},
{
id: ‘Redmi_Note_5’,
name: ‘Redmi Note 5 Pro’
},
],
},
],
},
{
id: ‘Samsung_Mobile’,
name: ‘Samsung Mobile’,
children: [
{
id: ‘Samsung_Galaxy’,
name: ‘Samsung Galaxy’,
children: [
{
id: ‘Samsung_Galaxy_F12’,
name: ‘Samsung Galaxy F12’,
},
{
id: ‘Samsung_Galaxy_M31’,
name: ‘Samsung Galaxy M31’,
},
{
id: ‘Samsung_Galaxy_F62’,
name: ‘Samsung Galaxy F62’,
},
],
},
],
},
{
id: ‘RealMe_Mobile’,
name: ‘RealMe Mobile’,
children: [
{
id: ‘RealMe_Narzo_30A’,
name: ‘RealMe Narzo 30A’,
},
{
id: ‘RealMe_Narzo_20’,
name: ‘RealMe Narzo 20’,
},
{
id: ‘RealMe_C_20’,
name: ‘RealMe C20’,
},
{
id: ‘RealMe_8_5G’,
name: ‘RealMe 8 5G’,
},
],
},
],
};
const getIndicator = (isExpanded, hasChildrenNodes) => {
if (!hasChildrenNodes) {
return ‘*’;
} else if (isExpanded) {
return ‘-‘;
} else {
return ‘+’;
}
};
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styleSheet.MainContainer}>
<Text style={{ textAlign: ‘center’, fontSize: 28 }}> React Native Final Tree View </Text>
<TreeView
data={treeViewData.items}
getCollapsedNodeHeight={() => 30}
renderNode={
({
node,
level,
isExpanded,
hasChildrenNodes
}) => {
return (
<View style={{ height: 30, backgroundColor: ‘green’ }}
onStartShouldSetResponder={() => console.log(node.name)} >
<Text
style={{
marginLeft: 20 * level,
color: ‘white’,
height: ‘auto’,
zIndex: 1,
overflow: ‘hidden’,
fontSize: 22
}} >
{getIndicator(isExpanded, hasChildrenNodes)}
{node.name}
</Text>
</View>
);
}}
/>
</View>
</SafeAreaView>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#FAFAFA’,
padding: 10
}
});
|
Screenshot:-
Also Read :
React Native Custom Checkbox Component iOS Android Example
React Navigation Latest Version 5.x in React Native Example Tutorial
Create Transparent Background View in React Native Android iOS
React Native Custom JSON ListView With Images and Text Example
React Native Use Hindi Language Font in Android iOS App using Custom Fonts
