Our first experience with React Native

Maybe this is one of those articles that cannot be considered a techie one. It's more to express an opinion of what We think could be a great advance on "hybrid" apps. We, at Brainattica, take too seriously native app development because We believe in getting the most out of your devices. But now Facebook (they are doing very well over the past months) has shipped (months ago) React Native and we think it's something we may test and have an strong opinion about it.

React Native iOS is about 8 months old (at the time of this post), and React Native Android is just a few weeks old. The launch of the second one was the reason why we decided to experiment with it.

The above paragraph expresses what some of you may already know: Brainattica loves to try new technologies and always wants to find a new path solve new problems if it's shorter than before.

This weekend we've been working/playing with React Native. If you haven't heard yet about it you may know that it's a facebook framework to develop hybrid ios & android apps (android version is just a few days old). You can find out how to start with React Native here.

You may also know that you can only work with it on OSX.

The first thing I've found is that iOS deployment is much more simple than Android one. On Android you have to setup Android SDK, download dependencies, etc. I come from Android development, so when I found those issues, I was supposed to fix them rapidly. I don't know if an iOS dev would solve them as easy as it should be React Native development.

One of the things I've first noticed is that each platform has its own components. For example, ToolbarAndroid, TabBarIOS, etc. This has advantages and disadvantages:

  • You can have different navigation on different platforms and use native elements which are not available on the other. That's really great, you can have 100% native experience. That's good! You have native code! Please welcome animations to the hybrid world! And of course, please welcome the experience of a true native app.
  • It's good, but it has a big drawback for people coming from other hybrid frameworks (as Cordova): You cannot share 100% code lines between platforms. Some UI pieces must be written for each platform. Models, bussines logic, etc, of course, can be shared between two platforms.

Do we think is good or bad? We think this could be the way to write hybrid apps (although we still think some performant apps should be written natively). You don't have to write all the funcionality for iOS and Android, but you CAN write different widgets or navigation patterns on different platforms. That's brilliant.

The bad navigation experience we were finding on hybrid apps must dissapear, and RN could be the solution.

Just as an exercise to know how this platform works we've updated to github an small example working on Android and iOS for fetching a movies database as you type on an input. It's nothing serious but you can get the idea of how you can develop a "hybrid" app.

Moreover, example apparchitecture includes a Redux example, and as you can see, the way to initialize the iOS app (in the main component) is:

...
  render() {
    return (
      <Container>
        <SearchInput onChangeText={this.onChangeText.bind(this)}/>
        <ScrollView>
          {
            this.state.movies.map(movie => {
              return <MovieItem
                         title={movie.Title}
                         year={movie.Year}
                         poster={movie.Poster}
                         type={movie.Type} />
            })
          }
        </ScrollView>
      </Container>
    );
  }
...

The android example is pretty close to this, but I've included an Android Toolbar just to exercise a different navigation on both platforms:

render() {
  return (
    <View>  
      <ToolbarAndroid
        title='Movies App'
        style={styles.toolbar}
        actions={[{title: 'Settings', show: 'always'}]}
        onActionSelected={this.onActionSelected} />
      <Container>
        <ScrollView>
          {
            this.state.movies.map(movie => {
              return <MovieItem title={movie.Title} year={movie.Year} poster={movie.Poster} type={movie.Type} />
            })
          }
        </ScrollView>
      </Container>
    </View>
  );
}

Of course this can be modularized more and the part where we paint the movies can be built in a sepparte component, but this is just an introduction article about our opinion.

You can play with it and share your thoughts about all is writen on this post.

https://github.com/brainattica/react-native-movies-app

If you want us to explain the example more, you can tweet us or comment here :)

Here you have how it looks like on both platforms:

comments powered by Disqus