0

I'm creating a react-native app using native-base library, and i'm using native-base list component for the side menu but i have a problem, i can't figure out how to make a submenu in my side menu, i need to be able to open a submenu with animation when a menu item is clicked.

The list is coded as follows:

<List>
   <ListItem>
     <Text>Menu 1</Text>
   </ListItem>
   <ListItem>
     <Text>Menu 3</Text>
   </ListItem>
   <ListItem>
     <Text>Menu 2</Text>
   </ListItem>
 </List>

But i want to add a submenu to it, for example if i click on Menu 1 a submenu with sub1 sub2 fade in. Here's an example in a video of the result i want: http://res.cloudinary.com/atf19/video/upload/v1500308199/AwesomeScreenshot-2017-07-17T16-14-52-723Z_wymybj.webm

I tried using another list inside my actual list but it just mess up the design, i looked for react native plugin that manage this kind of problem but i didn't find any.

PS: please be advice that the list items are created dynamically from a server.

Atef
  • 1,294
  • 1
  • 14
  • 27
  • What have you tried? What didn't work? Are you stuck on some unclear point in the documentation (for NativeBase or the Animated library)? Is the dynamic aspect of the list tripping you up somehow? Please always include things you've tried and researched, and see [How to Ask](https://stackoverflow.com/help/how-to-ask) for help on writing a good question. – Michael Cheng Jul 17 '17 at 19:10
  • @MichaelCheng I just added a brief of what i tried, but i'm actually can't find an approach to solve this, that's why i posted this question. – Atef Jul 17 '17 at 19:15
  • "I tried using another list inside my actual list but it just mess up the design" Post your code so people can point you towards the right direction and maybe point out areas where you are making a mistake. Again, see [How to Ask](https://stackoverflow.com/help/how-to-ask). – Michael Cheng Jul 17 '17 at 19:24

1 Answers1

0

The possible workaround: You could have ListItems at the same level created dynamically.

So if you click Menu1. You fetch the data and when ready:

<List>
   <ListItem>
     <Text>Menu 1</Text>
   </ListItem>
   <ListItem>
     <Text>ITEM 1</Text>
   </ListItem>
    <ListItem>
     <Text>ITEM 2</Text>
   </ListItem>
   ...
   <ListItem>
     <Text>Menu 3</Text>
   </ListItem>
   <ListItem>
     <Text>Menu 2</Text>
   </ListItem>
 </List>

And of course have a different style for each of this "child" items. In order to simulate the expected result.

I have done it with HTML components not RN yet. But the idea is the same.

hugomosh
  • 402
  • 6
  • 15