From ef6d086a0e4c7f09b0da0fc89d8aa038410a4e47 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Thu, 1 Mar 2018 12:01:26 +0000 Subject: [PATCH] [codorial] WIP App navigation --- .../app-navigation.md | 104 +++++++++++++++++- .../assets/1-unauthenticated-nav.jpg | Bin 0 -> 27104 bytes .../assets/2-unauthenticated-nav.jpg | Bin 0 -> 30693 bytes .../assets/3-unauthenticated-push-pop.gif | Bin 0 -> 348727 bytes .../integrating-redux.md | 2 +- .../understanding-firebase-auth.md | 9 +- 6 files changed, 105 insertions(+), 10 deletions(-) create mode 100644 codorials/authentication-with-firebase/assets/1-unauthenticated-nav.jpg create mode 100644 codorials/authentication-with-firebase/assets/2-unauthenticated-nav.jpg create mode 100644 codorials/authentication-with-firebase/assets/3-unauthenticated-push-pop.gif diff --git a/codorials/authentication-with-firebase/app-navigation.md b/codorials/authentication-with-firebase/app-navigation.md index b46a611b..502b2b62 100644 --- a/codorials/authentication-with-firebase/app-navigation.md +++ b/codorials/authentication-with-firebase/app-navigation.md @@ -91,13 +91,109 @@ export default App; Our `UnauthenticatedStack` component will now show the `Login` component as it's the first item in the `StackNavigator`. Reload your app and you should have your `Login` component rendering! -TODO image +![Basic Navigation](assets/1-unauthenticated-nav.jpg =300x*) ## Styling the navigator -As you can see, `react-navigation` provides a base view which is platform specific. +As you can see, `react-navigation` provides basic styling to mimic the feel of Android's [Material Design](https://material.io). The +library provides a simple, React like API to style and control your app. -.. +> If you're using iOS, the functionality will remain the same however the basic styling will represent that of the iOS interface instead! -## Pushing a new stack +For this example we're going to add a title to our screen and liven up the colors - there's loads more you can do with `react-navigation` though, +just check out their in-depth [documentation](https://reactnavigation.org/docs/getting-started.html). + +Lets go ahead and style the screen, using a class static `navigationOptions` object which lets `react-navigation` access our screen component: + +```jsx +// src/screens/unauthenticated/Login.js +import React, { Component } from 'react'; +import { View, Text } from 'react-native'; + +class Login extends Component { + + // Add our react-navigation static method: + static navigationOptions = { + title: 'Login', + headerStyle: { + backgroundColor: '#E6853E', + }, + headerTintColor: '#fff', + }; + + render() { + return ( + + + Login + + + ); + } +} + +export default Login; +``` + +With this basic config you'll end up with an Android looking app with minimal configuration. Whats better is that `react-navigation` will also +take care of any back buttons and screen animations when navigating through the stack, pretty nifty. + +![Styled Navigation](assets/1-unauthenticated-nav.jpg =300x*) + +## Pushing to a new stack + +Pushing a new screen onto the stack is a common practice on mobile apps, however requires a slightly different mindset if you're from a web development +background. The basics of a stack allow you to `push` and `pop` where screens effectively overlay each other. The user cannot change stack item +unless you give them the ability to (compared to a website where the user could manually enter a different URL). This allows for greater +control over what a user is able to push/pop to. + +Each component we assign to our `StackNavigator` gets cloned by `react-navigation` with a prop called `navigation` which gives us full control over +all of the navigation functionality we'll need. + +- To "push" to a new screen we call the `navigate` method with the screen name we defined as the object key within `StackNavigator`. +- To "pop", or go back to the previous screen on the stack we call the `goBack` method. + +Lets add a simple button to push to the `Register` screen we defined: + +```jsx +// src/screens/unauthenticated/Login.js +import React, { Component } from 'react'; +import { View, Button } from 'react-native'; + +class Login extends Component { + + static navigationOptions = { + title: 'Login', + headerStyle: { + backgroundColor: '#E6853E', + }, + headerTintColor: '#fff', + }; + + // Call this method on the button press + _register = () => { + this.props.navigation.navigate('Register'); + }; + + render() { + return ( + +