Starter code for an expo project using redux and navigation
After cloning the repo, make sure to delete the .git
folder from the root directory. Then, initialize your own git directory using git init
.
Then, change the application's name
and slug
properties in app.json
to whatever you want.
Now your project should be unique.
Run npm install
and expo start
in order to start running the project
A common use case for mobile apps is to have two sides to an app: an unauthorized section and an authorized section.
Usually, the flow goes:
- App Loads
- Checks persisting storage for an authenticated user
- if one exists, show the authorized side of the app
- if one does not exist, show the unauthorized side
This template facilitates this flow.
You can find the beginnings of the two navigators in the navigation
folder. In order to add more screens and facilitate their navigation, you can look at the documentation here. Here's a simple example of how to add another screen:
- Create the screen file as a react component, as shown in
Home.js
, i.e.Welcome.js
:
import React, { Component } from "react";
import { View, Text } from "react-native";
class Welcome extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View>
<Text>Welcome!!!</Text>
</View>
);
}
}
export default Welcome;
- Import this component into
authorizedNavigator.js
- Add it to the stack navigator component, like so:
import React, { Component } from "react";
import Home from "../screens/Home";
import Welcome from "../screens/Welcome";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { connect } from "react-redux";
const Stack = createStackNavigator();
class AuthorizedNavigator extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Welcome" component={Welcome} /> //<--- new screen
</Stack.Navigator>
</NavigationContainer>
);
}
}
const mapStateToProps = () => {
return {};
};
export default connect(mapStateToProps)(AuthorizedNavigator);
There are two reducers this template uses: a persisting reducer and a session reducer.
The persisting reducer will take care of saving data to local storage for you, and the data saved will persist through app closures.
The session reducer is for temporary data that doesn't need to be saved over closures, but still needs to be used throughout the application.