Animated submenu on react-native

Question

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.

Answer 1

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.