This repository provides an example of how to use GitHub Actions to generate a preview build for a React Native Expo application. It also demonstrates how to create a corresponding Neon database branch.
Before we begin, you will need to have a few things already setup.
- An Expo account for deploying and testing preview branches.
- A Neon account with with a database project for branching.
- A fork of this repository.
On your GitHub repository page, navigate to Settings
→ Secrets and variables
→ Actions
and add the following secrets and variables.
- Neon API Key: Obtain a Neon API key from the
API Keys
by clicking on your avatar in the upper right corner, thenAccount Settings
→API Keys
. Once you have created your API key, add it to your GitHub projectsRepository Secrets
with the nameNEON_API_KEY
. - Neon Project ID: The Neon Project ID can be obtained from your Neon project’s
Settings
→General
page. Add the Neon Project ID to your GitHub projectsRepository Variables
under then nameNEON_PROJECT_ID
. - Neon Database Username: Add the DB Role to be used for branch creation to your GitHub projects
Repository Variables
under then nameNEON_USERNAME
. - Expo Token: Obtain an Expo access token by going to
Account Settings
→Access tokens
. Then add aRobot user
by clicking onAdd robot
and giving it the nameGITHUB_ACTIONS
. Next, click onCreate token
and give it a descriptive, meaningful name, something likeGitHub actions token for PR builds
. Finally, copy the token and add it to your GitHub projectsRepository Secrets
with the nameEXPO_TOKEN
.
Go to the SQL Editor for your database project in the Neon Console and run the SQL statements below.
CREATE TABLE neon_app_content(id SERIAL PRIMARY KEY, text_field TEXT NOT NULL, value TEXT);
INSERT INTO neon_app_content(text_field, value) VALUES ('name', 'Ryan')
To test it all out, perform the following steps:
- Create a development branch.
- Change the word
Welcome
on line 37 of the ./app/(tabs)/index.tsx file toGreetings
. - Commit your changes and push the branch to your repository.
- Create a pull request for your development branch into main.
- Once the GitHub Action completes, open the preview build on your mobile device using the QR code in the comments of the Pull Request. You should an image like below.
- Go back to the SQL Editor in the Neon console and run the following SQL statement against the database branch for your PR. It should be named something like this
preview/pr-4-development_branch_name
.
UPDATE neon_app_content
SET value='Program'
WHERE text_field = 'name'
- Reload the app on your mobile device by using a 3-finger press on the app, and selecting
Reload
. You should now see the name changed fromRyan
toProgram
.