[codorial] WIP App navigation

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 (
+      <View>
+        <Text>
+          Login
+        </Text>
+      </View>
+    );
+  }
+}
+
+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 (
+      <View>
+        <Button
+          onPress={this._register}
+          title="Register Now!"
+        />
+      </View>
+    );
+  }
+}
+
+export default Login;
+```
+
+Go ahead and click the button, you'll be pushed to a new screen. By pressing the back arrow on the header, `react-navigation` will automatically
+call the `goBack` method for us:
+
+![Transition!](assets/3-unauthenticated-push-pop.gif =300x*)
+
+> To style the `Register` page, simply add it's own `navigationOptions` static config!
 

codorials/authentication-with-firebase/integrating-redux.md

@@ -51,7 +51,7 @@ takes care of the hard work!
 
 Back within our original bootstrap file, we'll wrap the `App` component in the `Provider` component, so our business logic has access to Redux.
 
-```js
+```jsx
 // src/index.js
 
 import React, { Component } from 'react';

codorials/authentication-with-firebase/understanding-firebase-auth.md

@@ -37,10 +37,10 @@ The callback for the `onAuthStateChanged` method returns a single parameter, com
 
 The concept here is simple;
 
+- the method is first called once Firebase responds, then any time user state changes thereafter.
 - if a user is "signed in", our parameter will be a `class`, containing all sorts of information we know about the user,
 from their e-mail address to any social provider IDs they may have signed in through.
 - if the user signed out, the parameter will be `null` value.
-- the method is immediately triggered when called.
 
 > The `user` class provides a `.toJSON()` method to serialize the users details if required.
 
@@ -96,7 +96,7 @@ Firebase on it's own is super simple, however when using in a React environment
 For any React component to update, a state or prop change needs to occur. As our Firebase auth methods are asynchronous we cannot rely on
 the data being available on component mount. To solve this issue, we can make use of state:
 
-```js
+```jsx
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 import firebase from 'react-native-firebase';
@@ -160,7 +160,7 @@ If this happens and you're updating state, you'll get a yellow box warning.
 To get around this, Firebase returns an unsubscribe function to every subscriber method, which when calls removes the subscription.
 This can be easily implemented using React lifecycle methods and class properties:
 
-```js
+```jsx
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 import firebase from 'react-native-firebase';
@@ -171,7 +171,7 @@ class App extends React.Component {
     super();
     this.unsubscribe = null; // Set a empty class method
     this.state = {
-      loading: false,
+      loading: true,
       user: null,
     };
   }
@@ -189,7 +189,6 @@ class App extends React.Component {
       this.unsubscribe();
     }
   }
-}
 ```
 
 ## Further reading