What to expect from React Native

Two weeks have gone by since the React.js Conf and the announcement of React Native that left all of us lined up, eagerly waiting to build our next apps with JavaScript.

What we saw demoed at the Conference was a demo of what engineers at Facebook proved to be possible with the kind of abstraction offered with the View Layer offered by React.

Even if what we saw was very convincing must be remembered that the project wasn't really ready for prime time, meaning it wasn't really ready to be Open Sourced yet.
Android version of React Native has been spoilered but never shown. iOS version was really a barebone, preassembled project, that the lucky guys attending the event were left tinkering with.

In the meantime we can imagine (hope) that Facebook is unloading more resources to the project to speed it up and keep it with the momentum and the hype created with the announcement.

So what to expect in the coming days (or weeks)?

Some sort of generator is needed to spawn new projects, both iOS and Android, but we cannot possibly know until it's released.
APIs are going to change both on the markup (JSX) side than on the native bridge side. But, again, we cannot know this until everything is official.

So were are we left us?

React Native is born to address three big pillars: Touch Handling, Native Components, Style & Layout.

React Native is React in the end, and even if it isn't the only choice, what is really going to feed React Views is

Native Components: JSX

We've seen this at work with the MoviesApp Demo both in

//[...]
var MoviesApp = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{title: 'Movies', component: <SearchScreen >}}
        routeMapper={MoviesRouteMapper}
      />
    );
  }
});`

`var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  }
});

module.exports = MoviesApp;

and

//[...]
var getImageSource = require("./getImageSource");

var MovieCell = React.createClass({
  render: function () {
    return (
      <View>
        <TouchableHighlight onPress={this.props.onselect}>
          <View style={styles.row}>
            <Image
              source={getImageSource(this.props.movie, "det")}
              style={styles.cellImage}
            />
            <View style={styles.textContainer}>
              <Text style={styles.movieTitle} numberOfLines={2}>
                {this.props.movie.title}
              </Text>
              <Text style={styles.movieYear} numberOfLines={1}>
                {this.props.movie.year}
              </Text>
            </View>
          </View>
        </TouchableHighlight>
        <View style={styles.cellBorder} />
      </View>
    );
  },
});

and around the internet with some custom Demo Apps

"use strict";

var React = require("react-native");
var {
  Bundler,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  ScrollView,
  TextInput,
} = React;

var ChecklistApp = React.createClass({
  getInitialState() {
    return {
      items: [{ body: "sour cream" }],
    };
  },

  renderItems() {
    return this.state.items.map((item) => {
      return <Text style={styles.item}>{item.body}</Text>;
    });
  },

  handleSubmit(event) {
    var item = { body: event.nativeEvent.text };
    var items = this.state.items;
    items.unshift(item);
    this.setState({ items });
  },

  render() {
    return (
      <View style={{ marginTop: 20 }}>
        <Text>Checklist</Text>
        <TextInput
          style={styles.input}
          autoFocus={true}
          onSubmitEditing={this.handleSubmit}
        />
        <View style={styles.list}>{this.renderItems()}</View>
      </View>
    );
  },
});

var styles = {
  input: {
    height: 26,
    borderWidth: 0.5,
    borderColor: "#0f0f0f",
    padding: 4,
    fontSize: 13,
  },

  list: {
    top: 0,
    bottom: 100,
    backgroundColor: "#eeeeee",
  },

  item: {
    padding: 10,
  },
};

Bundler.registerComponent("ChecklistApp", () => ChecklistApp);

module.exports = ChecklistApp;

So, if you want to invest some time and get ahead of the official React Native announcement, go spend some time tinkering with JSX. Every View is going to be written with the official JSX Syntax.

Style & Layout: Flexbox

Even if, being Open Source, there could be other implementations, it doesn't seem possible that the actual JavaScript implementation of the CSS Flexbox is ever going to go away. So, again, if something, bid on it and learn Flexbox.
It will look something like:

var styles = {
  movieTitle: {
    flex: 1,
    fontSize: 16,
    fontWeight: "bold",
    marginBottom: 2,
  },
  movieYear: {
    color: "#999999",
    fontSize: 12,
  },
};

If you want to know and learn more:

At least take a look at the minimum specification implemented by React Native.

Name

Value

width, height

positive number

left, right, top, bottom

number

margin, marginLeft, marginRight, marginTop, marginBottom

number

padding, paddingLeft, paddingRight, paddingTop, paddingBottom

positive number

borderWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth

positive number

flexDirection

'column', 'row'

justifyContent

'flex-start', 'center', 'flex-end', 'space-between', 'space-around'

alignItems, alignSelf

'flex-start', 'center', 'flex-end', 'stretch'

flex

positive number

position

'relative', 'absolute'

Flux

If you're already experienced with these concept then consider investigating on the Flux Architecture.
React is a View Layer and you're left to figure out how to assemble the rest of your code.
Well, Facebook did the homework for us, but turns out different people (and companies) figured out a Flux implementation that best suited their needs.

On the topic