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;