CODEWITHSUNDEEP
androidlistviewtabsreact-nativenavigation-drawer
Sauron
Sauron

Reputation: 6657

Building tabbed navigation drawer listview in React Native

I have the present layout within Android encompassing a navigation drawer with tabbed listviews:

enter image description here

and

enter image description here

How can this interface be replicated in React Native?

Upvotes: 1

Views: 2697

Answers (1)

Frederick Motte
Frederick Motte

Reputation: 1164

Firstly, the menu drawer can be built by using the DrawerLayoutAndroid component. Its API is quite simple (https://facebook.github.io/react-native/docs/drawerlayoutandroid.html); if you only want it to respond to the menu button click (and not gestures) you have to set the drawerLockMode prop, you can open it programmatically by calling the openDrawer method. You wrap the Navigator component (for navigating between views) around this DrawerLayoutAndroid; see my post here for more information: How can I change the scene(Navigator) by click DrawerLayoutAndroid

To build the tabular view with swiping gestures, unless you want to build it all yourself from scratch (which is definitely possible) I recommend the following community project: react-native-scrollable-tab-view (https://github.com/brentvatne/react-native-scrollable-tab-view).

Upvotes: 3

Related Questions