Introducing the new

react-native upgrade

Meetup React Paris #1503/11/2016

MENicolas Cuillery @ncuillery

› JavaScript dev & trainer at Zenika.› Currently working on 6play apps.

The beginningreact-native init

MyRNProject

android

ios

...

...

...

“Host” appsDisplay a fullscreen React RootView.Contain the native part of RN & 3rd-parties.

https://github.com/facebook/react-native/tree/master/local-cli/generatorhttps://github.com/facebook/react-native/tree/master/local-cli/generator-ioshttps://github.com/facebook/react-native/tree/master/local-cli/generator-android

The upgradeMoving your project to the latest

version of RN

How to upgrade existing project scaffolded with Yeoman ?

The problemThe upgrading process is painful

Why ?

Unfriendly contentConflicts generally happen in native files, unfamiliar to the JS developer. Those file can even be not supposed to be touched by hand (project.pbxproj )

Fast paceRN is upgraded every 2 or 3 weeks, making you repeating the process for each version.

Necessary changesChance of conflicts increases each time a native is touched: linking 3rd-parties, adding assets, configuring native stuff (device orientation, splashscreen, …)

AA

React Native0.X.0

React Native0.Y.0

AA

React Native0.X.0

React Native0.Y.0

AB

Developer’s changes

CA

React Native0.X.0

React Native0.Y.0

CA

React Native0.X.0

React Native0.Y.0

AB

Developer’s changes

How to sort out the “conflicts” ?

- Identify the undesirable conflicts- Knowing where do the changes come

from (Developer or React Native)

The solutionIsolate React Native changes

Working with a blank app

By running the upgrade command on a blank app, the conflict are only due to the React Native changes.

rn-diff

- Git is great to print differences in file contents.

- Github is great to show them.

https://github.com/ncuillery/rn-diff

rn-diff

- A branch for each version since 0.23.0.- Github compare view:

https://github.com/ncuillery/rn-diff/compare/rn-0.33.0...rn-0.35.0

AA

React Native0.X.0

React Native0.Y.0

AB

Developer’s changes

If a conflicted file doesn’t appear in the rn-diff compare view, skip it with peace of mind

Overwriteif the rn-diff shows the same (or almost the same) diff as Yeoman. And eventually report your changes by hand afterwards

In other cases, rn-diff helps you take the good decision

Do not overwriteIf rn-diff shows a small amount of changes: skip the file and copy-paste the React Native changes manually

The automationWorking with Git patches

Generate a Git patch

› Simply append “.diff” to the compare view URL

› Ready to “git apply --3way” ?

Project’s name in paths

Replace all occurrences to fit the user arborescence.

Blob in the local repo index

Add the rn-diff repo as remote and fetch it:

git remote add rn-diff https://github.com/ncuillery/rn-diff.gitgit fetch rn-diff

Project’s name in content

We can’t modify the content of the patch, otherwise the blob would change and the apply operation would fail. Leave it like that and manually update after the apply operation.

The integrationBecoming the “official” process

How to get rid of the drawbacks ?

Git has to be the main tool…… but Yeoman is still in the game.

Yeoman generates files that fit the user’s project perfectly

Get the 3 files in Git indexA

C

A

Already in HEAD branch ! B

Run the “upgrade” command on the current version and overwrite all files

Install the new version, run the “upgrade” command and overwrite all files

DEMO !

New react-native upgrade

› Automate these operations with shelljs.› Use Git env variables to create a local

Git repository on-the-fly.

https://github.com/facebook/react-native/pull/XXXXX

In the meantime:https://gist.github.com/ncuillery/4b09e36d772601301cf0d0c94dcde692

THANKS!Any questions?You can find me at:@ncuillery · nicolas.cuillery@gmail.com

Credits

› Integration into RN: Christopher Chedeau (@vjeux) & Konstantin Raev (@bestander_nz)

› Guidance about rn-diff: Ryan Kaskel (@ryankask) & Kenny Dits (@kenny_dee)

› Allocated time for Open-Source development: Zenika› Presentation template: SlidesCarnival