Christian Engvall

There are some steps that need to be taken in order to publish a React Native app to the iOS App Store. But first you need to know how to submit a native app to the app store. That is out of scope for this tutorial since there is a tutorial at Ray Wenderlich that covers that whole process. It helps you with setting up a developer account, create certificates and profiles and so on. After finishing those steps you can continue reading below.

1. Remove localhost from info.plist

First we need to remove the localhost exception from info.plist. By default all traffic over HTTP is rejected since iOS 9 with App Transport Security. React Native has added an exception to localhost to make development easier.

Open info.plist and expand the App Transport Security settings and Exception Domains. Under there you’ll find the localhost entry. Remove it.

Info plist - App Transport Security settings

2. Create a release scheme

When building an app for release the React Native Developer Menu will be disabled.

React Native Developer menu - borrowed from official docs

The Javascript files we’ve created for our app will be bundled and put locally in the app so we can test it without being connected to a computer.

Go to Product -> Scheme -> Edit Scheme in XCode. Select Run tab and set the Build Configuration dropdown to Release.

XCode release scheme

3. Build app with release scheme

Select Product -> Build from XCode or build the app from the command line using this command:

react-native run-ios --configuration Release

4. Documentation

To get to know more about this you can take a look at the React Native Documentation

Off topic on React native google maps

If you are using React native google maps in your app you might run in to problems when building an archive to publish on the app store.

I got an error “duplicate symbols for architecture…” and a friendly Github:er called se1exin posted a solution to the problem.

I’m interested in trying React native instead of Ionic for Dogwalk. And when doing this i’ll be writing the steps I take if someone else is interested in learning this as well. Now we’ll take a look on how to install React Native.

For React Native we need node, Watchman, React Native CLI and Xcode. Watchman is a service for watching changes in files and trigger actions when that happens. Reactive CLI is the command interface for React Native. Xcode is Apples IDE.

1. Install node and Watchman

Install node and watchman with Homebrew

brew install node
brew install watchman

2. Install React Native CLI

And then install React Native CLI with npm

npm install -g react-native-cli

3. Install Xcode and the Xcode Command line tools

Install Xcode from the Mac app store.

Then open the preferences of Xcode and install Command line tools.

Command line tools - Image borrowed from React native

4. Creating a React Native project

Run these commands in a terminal:

react-native init MyNewProject
cd MyNewProject
react-native run-ios

And we’ll end up with a screen like this:

React native start screen

React Native documentation

To continue to explore React Native take a look at the Learn the basics in the documentation.

When running git rebase you reapply commits on top of another base tip. Ok, nice what does that mean? The official git docs provides a good explanation of this.

If we have a feature branch called topic created from master at commit E. And if master has new commits before our branches can look like this:

      A---B---C topic
     /
D---E---F---G master

To rebase this branch with master we would use this command:

git rebase master

Our branches would then look like this:

              A'--B'--C' topic
             /
D---E---F---G master

Git rebase interactive

We can also use rebase to, for example, squash or fixup commits that that fits better into an already made commit. This would come in handy after a code review is done and there are changes that fit in other commits.

Say i have this line added to my new feature branch:

the first commit of this new feature

And this line was commited with the message First commit of this new feature

After a code review a new line was added to that file, and a new commit was created

the first commit of this new feature
- This is a line that should have been in the first commit but was discovered missing in a code review

This commit got the message Fixing a code review.

To keep the branch nice and tidy you can squash or fixup these two commits into one.

when running:

git rebase -i master

I would get the following view in my terminal:

pick c7ffd6a First commit of this new feature
pick cfa6850 Fixing a code review
# Rebase cedc856..cfa6850 onto cedc856 (2 commands)
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
# d, drop = remove commit
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#
# Note that empty commits are commented out

When typing fixup before the code review commit and saving, the commit will meld into the previous commit.

pick c7ffd6a First commit of this new feature
fixup cfa6850 Fixing a code review

Do git rebase, sqash and fixups with a GUI

You do not need to do this in the terminal if you do not want to. You can use for example GitUp

GitUp Squash and fixups

If you right-click on a commit you get a lot of options for example Fixup with Parent and Squash with parent. But you also have the oiption to Swap with parent (Move down) and Swap with Child (Move up) which you can use before squashing or fixuping if there are other commits between the ones you want to combine.

To complement GitUp you can use the GitHub desktop app to see what your commits contains and which ones should be melded together.

Github Desktop

push and pull after rebase

I work with github as an origin to this repo. To push the repo now when you have done a rebase you need to force the push:

git push origin a-feature-branch -f

For other users that now want to continue to work on this branch they now need to do a:

git reset --hard origin/a-feature-branch

When working in a Visual Studio 2017 solution I started to get this problem when running sass.js task via task runner explorer.

>> File "ui\_checkout.scss" changed.
Loading "sass.js" tasks...ERROR
>> Error: Missing binding C:<path>\node_modules\node-sass\vendor\win32-x64-46\binding.node
>> Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 4.x
>>
>> Found bindings for the following environments:
>>   - Windows 64-bit with Node.js 5.x
>>
>> This usually happens because your environment has changed since running `npm install`.
>> Run `npm rebuild node-sass --force` to build the binding for your current environment.
Warning: Task "sass:dist" not found. Use --force to continue.
Aborted due to warnings.
Completed in 0.796s at Tue Mar 28 2017 13:44:11 GMT+0200 (Central Europe Summer Time) - Waiting...

When googling this problem I found this nice explanation by Ryan Hayes

However I ran into an issue today in which I updated Node.JS outside of Visual Studio, but since VS uses its own install that is separate from any outside installation, you can potentially run into a node_modules package dependency issue where one version of npm installs a package (which makes it rely on that version of Node/npm), and then you can’t run commands in the other version (they break).

Running npm install or npm rebuild node-sass –force, as the error message says, did not help.

How to solve it

• Open Visual Studio 2017
• Go to Tools -> Options…
• Go to Projects and Solutions -> Web Package Management
• move $(PATH) to the top of that list and close that window.

Web package management - Visual Studio 2017

• Now close all running tasks (if any)
• Restart Visual Studio

Task runner explorer

What is Redis and what is it used for? I’ve come across it in two of the projects I’ve been working on, but never had to do anything else than start it. It seems to be used along side a persistence database.

This is the first post in the What is series where I’m aiming to answer questions I’m thinking about but never take the time to answer. I got this idea from another Swedish developer, who I cant remember the name of right now. Inez or Ines maybe? If you know who i’m looking for, please let me know in the comments :)

How does redis explain itself

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs and geospatial indexes with radius queries. Redis has built-in replication, Lua scripting, LRU eviction, transactions and different levels of on-disk persistence, and provides high availability via Redis Sentinel and automatic partitioning with Redis Cluster. -Redis.io

Ok, so I guess it can be used as a database itself, and i do not need to have another one in my application, such as postgres, mysql or any other database.

It seems to be some kind of cache as well. Have to look into that.

Is it a cache, database or both?

After going through the FAQ I learned that using Redis together with an on-disk database is a good idea and a common design pattern that is used. Use Redis for write heavy small data and store big blobs of data into an sql on disk database.

But you can use redis as a stand alone database that keeps data in memory and eventually saves it to disk.

But what do they mean by using it as a cache? Well, since Redis keeps data in memory you can load data into it that is used and displayed often without getting the data from disk everytime, for example loading product data from an sql-database, making it very quick.

Installing redis

I used this guide to install Redis.

brew install redis

And then when it’s installed i ran this command to launch Redis when my computer starts.

ln -sfv /usr/local/opt/redis/*.plist ~/Library/LaunchAgents

To check if redis is running you can run:

redis-cli ping

This should reply pong if it’s running, else it says

Could not connect to Redis at 127.0.0.1:6379: Connection refused

Then you need to run this command in a terminal to start it:

redis-server