How to implement side menu using react-native-router-flux with redux

1.2k views Asked by At

I tried almost solution I found here, and I found that this link contains a tutorial about using RNRF drawer feature with redux: https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md but the link is not working anymore, can someone help me with this?

this is my Router.js

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import HomeScreen from './screens/HomeScreen';
import LandingScreen from './screens/LandingScreen';
import ProfileScreen from './screens/ProfileScreen';
import EmailLoginScreen from './screens/EmailLoginScreen';
import FacebookLoginScreen from './screens/FacebookLoginScreen';
import SideMenu from './screens/SideMenu';

const RouterComponent = () => {
  return (
    <Router>
    <Scene overlay>
     <Scene key="lightbox" lightbox leftButtonTextStyle={{ color: 'green' }} backButtonTextStyle={{ color: 'red' }} initial>
      <Scene key="root">
        <Scene key='landing' component={LandingScreen} hideNavBar={true} initial  />
        <Scene key='fbLogin' component={FacebookLoginScreen} hideNavBar={true}  />
        <Scene key='emailLogin' component={EmailLoginScreen} title="Email Login"  />

        <Scene key='drawer' drawer contentComponent={SideMenu} title="Menu" >
          <Scene key='home' component={HomeScreen}   />
          <Scene key='profile' component={ProfileScreen} title="My Profile"  />
        </Scene>

      </Scene>
    </Scene>
    </Scene>
    </Router>
  );
};


export default RouterComponent;

This my SideMenu.js:

import React, { Component, PropTypes } from 'react';
import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import Button from 'react-native-button';
import { CardSection } from '../components/CardSection';

const contextTypes = {
  drawer: React.PropTypes.object,
};

const propTypes = {
  name: PropTypes.string,
  sceneStyle: ViewPropTypes.style,
  title: PropTypes.string,
};

const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    backgroundColor: '#fff'
  },
  container: {
    padding: 15,
    height: 45,
    overflow: 'hidden',
    alignSelf: 'flex-start',
  },
  textStyle: {
    fontSize: 18,
    color: '#555',
  },
  nameContainer: {
    padding: 15,
    height: 45,
    overflow: 'hidden',
    alignSelf: 'flex-start',
  },
  name: {
    fontSize: 22,
    color: '#555',
    fontWeight: '400',
  }
});

class SideMenu extends Component {
  render() {
    return (
      <View style={[styles.viewContainer, this.props.sceneStyle]}>

      <CardSection style={{ flexDirection: 'column', padding: 30 }}>
        <Button
          containerStyle={styles.container}
          style={styles.name}
          onPress={() => { Actions.home(); }}
        >Home</Button>
      </CardSection>

        <CardSection style={{ flexDirection: 'column', padding: 30 }}>
          <Button
            containerStyle={styles.container}
            style={styles.name}
            onPress={() => { Actions.profile(); }}
          >Profile</Button>
        </CardSection>
      </View>
    );
  }
}

SideMenu.contextTypes = contextTypes;
SideMenu.propTypes = propTypes;

export default SideMenu;

Error: Debugger error

0

There are 0 answers