[codorial] WIP Use relative images

This commit is contained in:
Elliot Hesp 2018-03-01 10:03:55 +00:00
parent 48bbd71b36
commit 7963ddb662
5 changed files with 109 additions and 8 deletions

View File

@ -0,0 +1,103 @@
# App Navigation
React Navigation has gone through many cycles of navigation implementations and has been a pain point for developers for a good while.
A current "go to" navigation library is called [react-navigation](https://reactnavigation.org/). It's pure JavaScript implementation
which performs well and provides a solid foundation for navigation on both Android and iOS.
Authentication typically requires 3 screens; Login, Register & Forgot Password.
## Installation
Simply install the dependency via NPM, no native installation is needed:
```bash
npm install --save react-navigation
```
## Navigation Stacks
Navigation on an app typically works in stacks, where a user can navigate to a new screen (pushing a new screen onto the stack), or backwards (popping
a screen off the stack).
What's great about this concept is that we can create multiple instances of a stack, for example a stack for unauthenticated users and another for
authenticated ones.
To create a new stack, we import the `StackNavigator` from `react-navigation`. In it's basic form, the first item of the `StackNavigator` object
acts as our initial screen on the stack. Lets create a new directory and component for our unauthenticated state:
```js
// src/screens/unauthenticated/index.js
import { StackNavigator } from 'react-navigation';
import Login from './Login';
import Register from './Register';
export default StackNavigator({
Login: {
screen: Login,
},
Register: {
screen: Register,
}
});
```
In both the `Login` & `Register` files, create a basic React component (change Login to Register where appropriate):
```jsx
// src/screens/unauthenticated/Login.js
// src/screens/unauthenticated/Register.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class Login extends Component {
render() {
return (
<View>
<Text>
Login
</Text>
</View>
);
}
}
```
## Using the stack
StackNavigator returns a React component which can be rendered in our app. If we go back to our `src/App.js` component, we can now return
the stack:
```jsx
// src/App.js
import React, { Component } from 'react';
import UnauthenticatedStack from './screens/unauthenticated';
class App extends Component {
render() {
return <UnauthenticatedStack />;
}
}
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
## Styling the navigator
As you can see, `react-navigation` provides a base view which is platform specific.
..
## Pushing a new stack

View File

@ -18,6 +18,10 @@
{
"title": "Integrating Redux",
"file": "integrating-redux"
},
{
"title": "App Navigation",
"file": "app-navigation"
}
]
}

View File

@ -79,4 +79,4 @@ function bootstrap() {
export default bootstrap;
```
Our app now has access to the power of Redux!
Although noting will visually change, our app now has access to the power of Redux!

View File

@ -70,7 +70,7 @@ consumes our entire application.
Go ahead and boot up your app onto your emulator. You should simply be presented with a plain screen with the words "Bootstrapped!".
![Bootstrapped!](https://raw.githubusercontent.com/invertase/react-native-firebase/codorials/codorials/authentication-with-firebase/assets/app-bootstrapped.jpg =300x*)
![Bootstrapped!](assets/app-bootstrapped.jpg =300x*)
Although a good starting point, we want to separate we'll our business logic out of the bootstrap file, keeping it purely for app
initialization purposes. This can simply be done by creating a basic React component called `App.js`, which will also live in the `src` directory;

View File

@ -16,14 +16,8 @@ Find the Authentication section and you'll be prompted with a number of options.
You'll see we have a number of options here, however for purposes of this Codorial we'll be using "Email/Password" and "Facebook" as our providers.
Go ahead and enable these:
![Enabled Providers](https://raw.githubusercontent.com/invertase/react-native-firebase/codorials/codorials/authentication-with-firebase/assets/auth-providers.jpg)
![Enabled Providers](/assets/auth-providers.jpg)
![Enabled Providers](assets/auth-providers.jpg)
![](assets/auth-providers.jpg)
> If you don't have a Facebook app, simply enter dummy values. We'll cover this later on.
## Listening to the users authentication state