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 :-
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:-
