tawhidabdullah / beerkip

Tutorial on how to build a React Native app synced with a WordPress API (user authentication and data synchronization).

beerkip
a React Native & WordPress experiment

This is the mobile application repo for a React Native app fully integrated with a WordPress back-end (for user authentication via JWT and data synchronization).

Read the tutorial (7 articles in French) »

About the app

See a quick demo video »

This React Native app is a demo concept developed for demonstration purpose. It is made to store a list of favorite beers, create new beers and delete beers and synchronize them with the WordPress database.

To see the WordPress plugin in charge of intercepting AJAX requests and synchronizing data, visit the beerkip-wp repo.

Use the app

1. Download the Android .apk and install the app.
2. You can login by using the beerkip login and beerkip password to browse, create or edit your own beers.

Features

• User authentication is done with the help of the JWT Authentication for WP REST API plugin by Enrique Chavez.
• Once logged in, you can access your list of favorites beers.
• You can use a form to create a new beer.
• Data synchronization (push and pull) is fully integrated with a WordPress back-end (repo is here).

Installation

This app is using React Native v0.60. To install it and use it locally :

1. Clone this repo.
2. Run npm install to install dependencies.
3. Launch your emulator/connect your device and run react-native run-android.

Note: the iOS links have not been set up, you might need to create them properly to make it work on iPhone devices.

Branches

You'll find a total of (at least) 7 branches on this repo, each branch being related to a specific article tutorial on my blog.

A quick summary of the various things that we will set up :

1. set up screens navigation and basic screens with react-navigation
2. create our Redux store and make it persistent in the smartphone local storage with redux-persist
3. set up basic login and beer creation forms using redux-form
4. add fields validation to these forms
5. create a repeatable field in the beer reation form
6. implement the user authentication logic on the login form, integrated with WordPress
7. synchronize beers data with the WordPress database (sending new data / receiving existing data)