Commit 7e781dee authored by Gijs Hendriksen's avatar Gijs Hendriksen

Added sidebar navigation

parent cd7be83e
import React from 'react';
import { Text, View } from 'react-native';
import { connect } from 'react-redux';
import styles from '../style';
import * as actions from '../actions/navigation';
const Sidebar = props =>
<View
style={styles.sidebar}
>
<Text style={styles.header}>MENU</Text>
<Text onPress={() => props.navigate('login')} style={styles.button} >Log in</Text>
<Text onPress={() => props.navigate('welcome')} style={styles.button} >Welcome</Text>
</View>
;
Sidebar.propTypes = {
navigate: React.PropTypes.func.isRequired,
};
const mapDispatchToProps = dispatch => ({
navigate: scene => dispatch(actions.navigate(scene)),
});
export default connect(() => ({}), mapDispatchToProps)(Sidebar);
import React from 'react';
import { connect } from 'react-redux';
import Drawer from 'react-native-drawer';
import * as actions from '../actions/navigation';
import Login from './Login';
import Welcome from './Welcome';
import Sidebar from './Sidebar';
// const mapStateToProps = state => state.currentScene;
......@@ -14,18 +16,32 @@ const mapDispatchToProps = dispatch => ({
navigate: scene => dispatch(actions.navigate(scene)),
});
const ReduxNavigator = (props) => {
const currentScene = props.currentScene;
switch (currentScene) {
const sceneToComponent = (scene) => {
switch (scene) {
case 'login':
return (<Login />);
return <Login />;
case 'welcome':
return (<Welcome />);
return <Welcome />;
default:
return (<Login />);
return <Login />;
}
};
const ReduxNavigator = props => (
<Drawer
type="displace"
content={<Sidebar />}
openDrawerOffset={0.4}
panOpenMask={0.2}
panCloseMask={0.2}
panThreshold={0.3}
tweenHandler={ratio => ({ main: { opacity: (2 - ratio) / 2 } })}
tapToClose
>
{sceneToComponent(props.currentScene)}
</Drawer>
);
ReduxNavigator.propTypes = {
currentScene: React.PropTypes.string.isRequired,
};
......
......@@ -27,6 +27,12 @@ export default function navigate(state = initialState, action = {}) {
currentScene: scene,
};
}
case types.NAVIGATE: {
return {
previousScenes: [],
currentScene: action.scene,
};
}
default:
return { ...state };
}
......
import { StyleSheet } from 'react-native';
const magenta = '#E62272';
const white = '#FFFFFF';
const black = '#000000';
const styles = StyleSheet.create({
sidebar: {
flex: 1,
backgroundColor: white,
},
header: {
backgroundColor: magenta,
color: white,
fontWeight: 'bold',
padding: 20,
},
button: {
backgroundColor: white,
color: black,
paddingLeft: 10,
paddingTop: 20,
paddingBottom: 20,
borderBottomWidth: 1,
},
});
export default styles;
import { StyleSheet, Dimensions } from 'react-native';
const magenta = '#E62272';
const deviceWidth = Dimensions.get('window').width;
// const deviceHeigth = Dimensions.get('window').heigth;
const margin = 10;
const styles = StyleSheet.create({
body: {
padding: 10,
flex: 1,
flexDirection: 'column',
alignItems: 'center',
},
bodyText: {
fontFamily: 'opensans',
},
textInput: {
alignSelf: 'stretch',
},
logo: {
width: deviceWidth - margin,
resizeMode: 'contain',
},
button: {
color: magenta,
},
});
export default styles;
......@@ -14,12 +14,13 @@
"text-summary"
],
"modulePaths": [
".yarn/"
".yarn/"
]
},
"dependencies": {
"react": "~15.4.0-rc.4",
"react-native": "^0.41.1",
"react-native-drawer": "^2.3.0",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
......
......@@ -3490,6 +3490,12 @@ react-native-cli@^2.0.1:
prompt "^0.2.14"
semver "^5.0.3"
react-native-drawer@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/react-native-drawer/-/react-native-drawer-2.3.0.tgz#a0369ec80ff0b61c9f152dbdea91fe76c843113a"
dependencies:
tween-functions "^1.0.1"
react-native@^0.41.1:
version "0.41.2"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.41.2.tgz#c6f486b8450a9909e6fed2dfd2c2af946563bf4f"
......@@ -4224,6 +4230,10 @@ tunnel-agent@~0.4.1:
version "0.4.3"
resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
tween-functions@^1.0.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
tweetnacl@^0.14.3, tweetnacl@~0.14.0:
version "0.14.5"
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment