Month: December 2016

Initial Reaction to React Native

This is to summarize my first experience with React Native. My overall impression is positive and setup went rather smoothly. I hit a few issues with build process and the environment that are worth listing here.

After generating the initial app (using ‘react-native init’) and trying to run it.

  1. “Missing Iconions” icon error. It turns out I was missing a ‘linking’ step. Although I had added the icons using npm, they still needed to be linked to the native project, in this case the Xcode project file. ‘react-native link’ does the trick.
  2. “Could not load app due to a missing require()”. Weird error! A quick search suggested that there is a name mismatch. Once you generate the app, you cannot change the name that gets registered with the AppRegistry. 
  3. Changing the name back did not fix the issue. I got another strange error but this time React gave me three suggestions to fix it. Apparently there is some caching of app content going on that needs to be cleaned up, either by deleting the npm_modules folder and clearing npm cache or simply by killing the packager process and restarting it. This error occurred a few times since then and every time killing the packager solved it.
As soon as I started writing some UI components, I realized that I must be repeating work that someone else has done. Then, I landed on Native Base, which looked promising. I hit a few issues with it as well which added to my initial list:
  • The ‘List’ component skipped the first item. No matter how many items are included in the model, it always skipped the first one when rendering. It turns out that the List component has to be wrapped in a ScrollView.
  • I was not able to mix usage of Native Base ‘ListItem’ with React Native TouchableHighlight to produce a selectable list item that shows a visual queue when tapped. It turns out that there is already a ‘button’ property that can be set on the ‘List Item’ to produce such a visual effect. It is not perfect, but it is OK for a toy app.
Got the basic Native Base components to work in my app. Back to using just React Native components. 
  1. I attempted to add some navigation using NavigatorIOS. At first, it did not show any content I added to it. As I found out, some styles must be set on the navigator in order for it to work. Most notably, you have to use the {{flex:1}} style.
  2. Specifying property types using PropTypes is neat. Just avoid the pitfall: PropTypes.something.isRequired is correct, whereas PropTypes.something.required produces mysterious error messages!
  3. Also be careful when passing functions as properties. I mistakenly passed one of the properties as {someFunc(someParams)} instead of just {someFunc} which, of course, lead to invoking the function rather than passing a callback.
I am aggregating more notes that I will share later.