How to implement slider menu in react Native

Question

I'm new to react. I need to develop slider menu in React-native. I follow below link but that is not I want http://www.reactnative.com/a-slide-menu-inspired-from-android-for-react-native/

Actually I need image which I attached here.

Please help me..

Answer 1

From what I understand, you want to toogle the slider menu with the hamburger button.

Although react-native-navigation-drawer

That can be achieved with the toogleSlideMenu function of the SliderMenu.

A simple example might be:

import React, {
  View,
  Text,
  ScrollView,
} from 'react-native';

import SlideMenu from 'react-native-navigation-drawer';


var BasicExample = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <View>
          <Text onPress={() => this._slideMenu.toogleSlideMenu()}> Your status bar </Text>
        </View>
        <SlideMenu
          ref={(c) => this._slideMenu = c}
          menu={<Menu />} 
          >
          <View>
            <Text>Your content</Text>
          </View>
        </SlideMenu>
      </View>
    );
  }
});

var Menu = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          contentContainerStyle={styles.contentContainer}
          style={styles.scrollView}>
          <Text>Gallery</Text>
          <Text>Latest</Text>
          <Text>Events</Text>
          <Text>Update</Text>
        </ScrollView>
      </View>
    );
  }
});

Answer 2

I've added an example that implements react-native-router-flux component to react-native-drawer. In this way it presents an easy scaffolding as cross-platform.