https://github.com/cuongndc9/expo-boilerplate
🌳📱 React Native boilerplate with Expo, Redux and Redux Saga.
https://github.com/cuongndc9/expo-boilerplate
103cuong android expo expo-boilerplate inapp-notifications notifications react-native react-navigation redux redux-saga sign
Last synced: about 1 month ago
JSON representation
🌳📱 React Native boilerplate with Expo, Redux and Redux Saga.
- Host: GitHub
- URL: https://github.com/cuongndc9/expo-boilerplate
- Owner: cuongndc9
- Created: 2019-10-03T11:42:28.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-07T19:25:40.000Z (3 months ago)
- Last Synced: 2025-03-07T20:26:30.732Z (3 months ago)
- Topics: 103cuong, android, expo, expo-boilerplate, inapp-notifications, notifications, react-native, react-navigation, redux, redux-saga, sign
- Language: JavaScript
- Homepage:
- Size: 564 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# expo-boilerplate
> 🌳📱 React Native boilerplate with Expo, Redux and Redux Saga.
*Build on 🙏 [VivifyIdeas Expo boilerplate](https://github.com/Vivify-Ideas/expo-boilerplate)*
## **Built in functions**
- Sign in
- Sign up
- Facebook sign in
- Google sign in
- Forgot & reset password
- Internationalization
- Global Error Modal ( Something went wrong )
- Edit profile
- Change password
- Push and inapp notifications
## **TBD**
- Sockets
- Chat
## **Code structure and technologies**
For our forms we use [Formik](https://github.com/jaredpalmer/formik), and for validation we use [Yup](https://github.com/jquense/yup).
In components folder there are some examples of our forms, they all use custom text inputs which are located in `FormFields.js`, and in validation folder you will find some `Yup` validation examples.
├── components
├──── auth
├──── shared
├─────── FormFields.js
└── validation
For state management we use [React Redux](https://github.com/reduxjs/react-redux) with [Redux Saga](https://github.com/redux-saga/redux-saga) and [Reselect](https://github.com/reduxjs/reselect).
├── store
├──── actions
├──── index.js
├──── reducer
├──── selectors
└──── sagas
For localization we have `$t` wrapper around [I18n-js](https://github.com/fnando/i18n-js) library.
To use it all you need to do is:
```
import $t from 'i18n';
$t('common.ok');
```
For notifications we use expo notifications. Their setup is located in `NetworkInterceptor.js`. Since the **_iOS_** doesnt support inapp notifications, we use [React Native In App Notifications](https://github.com/AlexSensei/react-native-in-app-notification).
All handling of notifications is done in `NotificationHandleService.js`. It has two main methods, `showInApp` which will trigger the `In App Notification` to be shown, and `handleOnClick` which handles the logic when you click on notification.
The whole application is wrapped in `InAppNotificationProvider` which, as props takes styles for `In APp notifications` you can see them all [here](https://github.com/AlexSensei/react-native-in-app-notification).
## **Going to production**
Before you can publish the application there are a few things that you need to do in `app.json` file.
### **_iOS_**
You will need to set your `bundleIdentifier`, usually it looks something like this `com.yoursite.applicationame`. Next is `buildNumber` it usualy starts from `1`, but each time you republish your application you need to increase this number. After that you have `infoPlist` which can contain messages which will be displayed when application asks you for some permissions, more about it can be found on this [link](https://developer.apple.com/documentation/bundleresources/information_property_list).
And last but not least, `associatedDomains`, they are used for universal linking, so that application knows which links to intercept and to open in the application, e.g. reset password link, You can read more about it [here](https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/enabling_universal_links).
### **_Android_**
As for **_android_**, you have `package` which is same as `bundleIdentifier` on **_iOS_**. Next to that there are `permissions`, you will need to specifiy all permissions that your application needs, for example `Camera` or `Location`, you can find all the examples for it [here](https://docs.expo.io/versions/latest/sdk/permissions/#android-permissions-equivalents-inside-appjson). Lastly you need to setup your `intentFilters` which have the same function as `associatedDomains` for **_iOS_**. Heres an example how they should look:
```
"intentFilters": [
{
"action": "VIEW",
"data": {
"scheme": "https",
"host": "*.myapp.io"
},
"category": [
"BROWSABLE",
"DEFAULT"
]
}
]
```
More about `app.json` configuration can be found [here](https://docs.expo.io/versions/latest/workflow/configuration/).