expo-boilerplate

🌳📱 React Native boilerplate with Expo, Redux and Redux Saga.

Build on 🙏 VivifyIdeas 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, and for validation we use 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 with Redux Saga and Reselect.

├── store
├──── actions
├──── index.js
├──── reducer
├──── selectors
└──── sagas

For localization we have $t wrapper around 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.

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.

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. 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.

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. 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.