Nested List View React Native

Question

I need a nested List View like Safari's adding bookmark list. React for of that: https://ej2.syncfusion.com/react/documentation/listview/nested-list/

My data is nested it is shown below (small part of that):

const data = [
  {
    title: 'Computer',
  },
  {
    title: 'Software',
    items: [
      {
        title: 'JS',
      },
      {
        title: 'React JS',
        items: [
          {
            title: 'Components',
          },
          {
            title: 'Hooks',
          },
        ],
      },
    ],
  },
];

Which package do you suggest ?

It is not enough deeper and not navigating to see sub folder. I added a photo to explain what I want. @GuruparanGiritharan — Bertug
– Bertug, Commented May 11, 2020 at 12:31
you dont need a package for this, you can simply have two views and navigate using your navigation library — Guruparan Giritharan
– Guruparan Giritharan, Commented May 11, 2020 at 12:35
I didnt want to write too long data for the explanation. My data's nested level would be 4,5,6.. it depends. Because of that I mentioned about the apple's safari bookmark folder structure. Your answer is for small data. @GuruparanGiritharan — Bertug
– Bertug, Commented May 11, 2020 at 12:42
I agree with @GuruparanGiritharan, using several views is simpler and would allow you to go as deep as you want. — Raphael Pr
– Raphael Pr, Commented May 11, 2020 at 14:41

Vishal Pawar · Accepted Answer · 2021-07-13 14:45:02Z

You can use sectionList or map property for your array

using map:

<View style={{flex: 1}}>
    {data.map((item, index) => (
        <View key={index} style={{borderBottomColor: 'black', borderBottomWidth: 2}}>
            <Text style={{fontSize: 30, fontWeight: 'bold'}}>{item.title}</Text>
            {item.items && <>
            {item.items.map((item, index) => (
                <View key={index} style={{backgroundColor: '#7fc', borderBottomColor: 'blue', borderBottomWidth: 2}}>
                      <Text style={{fontSize: 20, marginLeft: 40, color: 'blue'}}>{item.title}</Text>
                     {item.items && <>
                     {item.items.map((item, index) => (
                       <View key={index}  style={{backgroundColor: 'yellow', borderBottomColor: 'red', borderBottomWidth: 2}}>
                           <Text style={{fontSize: 16, marginLeft: 80,}}>{item.title}</Text>
                       </View>
                    ))}
                   </>}
               </View>
            ))}
           </>}
        </View>
     ))}
</View>

this is how you can apply this code to your required view you can make your parent view to button and show or hide it with button press child component should be seperate component

I hope this will help you!

Collectives™ on Stack Overflow

Nested List View React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related