[codorial] WIP Use relative images
This commit is contained in:
parent
48bbd71b36
commit
7963ddb662
|
@ -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
|
||||
|
|
@ -18,6 +18,10 @@
|
|||
{
|
||||
"title": "Integrating Redux",
|
||||
"file": "integrating-redux"
|
||||
},
|
||||
{
|
||||
"title": "App Navigation",
|
||||
"file": "app-navigation"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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!
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue