React Native Project Git Workflow

I use Git/source control heavily on all of my projects. That doesn't mean it's complex though. I have 6 commands that I do 95% of my work with and a simple process to follow to easily manage versions and ensure I get my work done and can easily rollback if (when) I mess something up.

The Basics

I keep my git workflow simple and I do it all from the command line. If you're not comfortable with the command line I'll share with you some alternatives in the next section. That said, I like the CLI because it keeps me moving quickly without getting bogged down.

If you don't already have git installed, you can do so by following these instructions. You can check if it's installed by running git --version.

First, you need to start the git project. This is done from the project directory by running git init .. This will create a hidden .git/ directory in your project but you'll never need to use that. It's possible that when you created your React Native project git was already initialized.

The next thing you'll want to do is setup a .gitignore file in the root of your project. This will allow you to ignore directories that you shouldn't track in source control, such as node_modules/.

Once you make a set of changes you can view which files changed by running git status.

To create a new commit, run git add index.js. Alternatively you can add all changed files by running git add ..

At this point index.js is "staged" and ready to be committed. To create the commit run git commit -m "This is a message" where "This is a message" is a short summary of the changes you made in that commit.

And there you have a commit! You can view a list of all the project's commits by running git log.

Let's say you make another change to index.js. You can view that the file changed when running git status. To view the actual changes to the file you can run git diff.

Note: I typically don't use the CLI for this part. I'll discuss this in alternative tools.

Let's say now we're ready to push our changes to Github (or whatever your preference is). To do so you'll run git push which will push your changes to Github. To pull any changes from there you would use git pull.

The final thing we'll cover is creating and switching branches. Branches allow you to organize and work on different things independently.

To create a new branch you would use git checkout -b my-new-branch (my-new-branch would be whatever you're calling that branch). Then you can work on that code, make commits, and if you need to switch back to your main code for a bit simply switch branches by using git checkout master.

When you're ready to merge code from one branch to another, say from my-new-branch into master, you can merge it by running git merge my-new-branch.

Note: I typically don't use the CLI for this part. I typically create a pull request in Github to review the changes.

And that's the extent of the commands I use for git!

How does Github fit into all of this? It's simply an online repository to put your code. It builds on top of Git and makes everything easily accessible and shareable, especially if you're working with other people. Also - it backs up your code!

Pro Tip

I use a lot of the same commands very often. To save a bit of time I've created a few alias' in my .bash_rc.

alias gil="git log"
alias gic="git commit -m"
alias gico="git checkout"
alias gip="git pull"
alias gipu="git push"
alias gis="git status"
alias gia="git add"

For example, with the above configuration, I can simply run gic "My new commit" rather than git commit -m "My new commit".

Tools

Alternative/additional tools to the CLI.

Editor Integration: Whatever editor you use I'm sure there's a Git/source control plugin available. I use Visual Studio Code which has a built in Git plugin that is fantastic. I constantly use it to view my code changes (instead of using git diff).
Source Tree is a graphical interface to work with Git. It does a bunch of stuff and I've heard many people like it.
Github Desktop if you're 100% bought into Github you can use their desktop tool to bring Github to your machine.

Project Workflow

Okay, with the commands I use covered, what's my actual React Native project workflow look like? First, two notes:

I'm making the assumption that you've got a project and you've already run git init ..
The master branch always represents what is currently in production.

With those covered, let's dive in.

New version: Create branch from master for the next version - let's call it v1.2.1. This is the base for all feature development in that version.
New feature: Create a branch off of v1.2.1 for each new feature - improve-search.
Feature implementation: Write and commit your code on the improve-search branch.
Add feature to version: Create a pull request from improve-search into v1.2.1. I do this via the Github website.
Code review: Do a review via the Github website, merge if it looks good. Update v1.2.1 description with what was added in latest PR.
Version release: When v1.2.1 is ready, open a pull request to master. This pull request should have a comprehensive summary of what's included.
Testing: Be sure to test the new version on both iOS and Android! Make any bug fixes needed. Merge when ready.
Publishing: From the master branch increase the version number, assemble new release, and publish.

And that's my workflow. I've used it on projects that are just me, up to teams of 10 developers, and it works quickly and easily. By using this workflow it's hard to step on each others toes.