diff --git a/App.js b/App.js index 711e0a8..187413d 100644 --- a/App.js +++ b/App.js @@ -36,8 +36,6 @@ export default class App extends React.Component { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', + backgroundColor: '#fff' }, }) diff --git a/Containers/ForgottenPasswordScreen.js b/Containers/ForgottenPasswordScreen.js new file mode 100644 index 0000000..42f39a8 --- /dev/null +++ b/Containers/ForgottenPasswordScreen.js @@ -0,0 +1,22 @@ +import React from 'react' +import { StyleSheet, Text, View } from 'react-native' + +export default class App extends React.Component { + render() { + return ( + + I am Forgotten Password + + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}) diff --git a/Containers/LoginScreen.js b/Containers/LoginScreen.js index 06788d6..be00f20 100644 --- a/Containers/LoginScreen.js +++ b/Containers/LoginScreen.js @@ -5,7 +5,25 @@ export default class App extends React.Component { render() { return ( - HIYA!!!!! + I am Login Screen + + this.props.navigation.navigate('signupScreen')} > + Go to Signup + + + this.props.navigation.navigate('forgottenPasswordScreen')} > + Go to Forgot Password + + + this.props.navigation.navigate('drawerStack')} > + Pretend we logged in + ) } @@ -18,4 +36,8 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + linky: { + color: 'blue', + paddingTop: 10 + } }) diff --git a/Containers/Screen1.js b/Containers/Screen1.js new file mode 100644 index 0000000..7fcc6b0 --- /dev/null +++ b/Containers/Screen1.js @@ -0,0 +1,25 @@ +import React from 'react' +import { StyleSheet, Text, View } from 'react-native' + +export default class App extends React.Component { + static navigationOptions = { + drawerLabel: 'Screen One' + } + + render() { + return ( + + Screen 1 + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}) diff --git a/Containers/Screen2.js b/Containers/Screen2.js new file mode 100644 index 0000000..d09aef4 --- /dev/null +++ b/Containers/Screen2.js @@ -0,0 +1,25 @@ +import React from 'react' +import { StyleSheet, Text, View } from 'react-native' + +export default class App extends React.Component { + static navigationOptions = { + drawerLabel: 'Screen Two' + } + + render() { + return ( + + Screen2 + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}) diff --git a/Containers/Screen3.js b/Containers/Screen3.js new file mode 100644 index 0000000..4758948 --- /dev/null +++ b/Containers/Screen3.js @@ -0,0 +1,25 @@ +import React from 'react' +import { StyleSheet, Text, View } from 'react-native' + +export default class App extends React.Component { + static navigationOptions = { + drawerLabel: 'Screen Three' + } + + render() { + return ( + + Screen3 + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}) diff --git a/Containers/SignupScreen.js b/Containers/SignupScreen.js new file mode 100644 index 0000000..c6a71a4 --- /dev/null +++ b/Containers/SignupScreen.js @@ -0,0 +1,21 @@ +import React from 'react' +import { StyleSheet, Text, View } from 'react-native' + +export default class App extends React.Component { + render() { + return ( + + I am Signup Screen + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + alignItems: 'center', + justifyContent: 'center', + }, +}) diff --git a/Navigation/AppNavigation.js b/Navigation/AppNavigation.js index 8fddc9b..cdbad9d 100644 --- a/Navigation/AppNavigation.js +++ b/Navigation/AppNavigation.js @@ -1,13 +1,56 @@ -import { StackNavigator } from 'react-navigation' +import React from 'react' +import { Text } from 'react-native' +import { StackNavigator, DrawerNavigator } from 'react-navigation' import LoginScreen from '../Containers/LoginScreen' +import SignupScreen from '../Containers/SignupScreen' +import ForgottenPasswordScreen from '../Containers/ForgottenPasswordScreen' +import Screen1 from '../Containers/Screen1' +import Screen2 from '../Containers/Screen2' +import Screen3 from '../Containers/Screen3' + +// drawer stack +const DrawerStack = DrawerNavigator({ + screen1: { screen: Screen1 }, + screen2: { screen: Screen2 }, + screen3: { screen: Screen3 }, +}, { + gesturesEnabled: false +}) + +const DrawerNavigation = StackNavigator({ + DrawerStack: { screen: DrawerStack } +}, { + headerMode: 'float', + navigationOptions: ({navigation}) => ({ + headerStyle: {backgroundColor: 'green'}, + title: 'Logged In to your app!', + gesturesEnabled: false, + headerLeft: navigation.navigate('DrawerOpen')}>Menu + }) +}) + +// login stack +const LoginStack = StackNavigator({ + loginScreen: { screen: LoginScreen }, + signupScreen: { screen: SignupScreen }, + forgottenPasswordScreen: { screen: ForgottenPasswordScreen, navigationOptions: { title: 'Forgot Password' } } +}, { + headerMode: 'float', + navigationOptions: { + headerStyle: {backgroundColor: 'red'}, + title: 'You are not logged in' + } +}) // Manifest of possible screens const PrimaryNav = StackNavigator({ - LoginScreen: { screen: LoginScreen } + loginStack: { screen: LoginStack }, + drawerStack: { screen: DrawerNavigation } }, { // Default config for all screens headerMode: 'none', - initialRouteName: 'LoginScreen' + title: 'Main', + initialRouteName: 'loginStack' }) export default PrimaryNav