Up-To-Date React Native Demos

Through my time as a Open Source Developer for React Native Libraries good examples seemed like the key to me. They can help new users understand your thoughts better and they might as well be a better solution than an extensive documentation. For that reason I try to come up with example projects that the user of my library can check out, run and test on his or her own.

To give developers with little time a better chance to see what my library is doing I try to include gifs and a link to a demo. In case of react-native (and pure JS libraries) I decided to use Expo and I am super happy with this decision so far. The only thing that bothered me is that I forgot to run the publish command from time to time.

Expo CLI & CI = 💕

To keep my demos up to date a CI driven solution is the best way to go. I decided for wercker in this case but you may use any other CI as well, the solution is independent. If you want to follow along make sure you have an account for a CI & the Expo CLI installed.

The first thing I like to do is to create an account. I like to have a separate account for each project, so that I don’t risk anything putting these credentials into the CI environment, but you may skip over this if you want. To create a new account you need to log out run exp register.

After completing this process you have a new account, please put the username and password as environment variables into your CI. I named them EXPO_USERNAME and EXPO_PASSWORD in my example. Now we are ready to configure your CI.

My complete solution in wercker looks like this, I will walk you through it.

First of all we need an environment where we have node and npm available. After that we first install the expo CLI by running npm install -g exp. After that (actually the order doesn’t really matter) we do a npm install in our project so that we may run expos packager, which is used in the publish command.

Now we are almost done, we need to log-in by running exp login -u $EXPO_USERNAME -p $EXPO_PASSWORD. Last but not least make sure to run the actual publish command: exp publish. The URL is prompted at the end of this command, so if you want to have a link in the readme just wait for the first CI build to finish 👍.