While we wait and hopefully approach the official release of React Native from Facebook we can catch a glimpse of the founding technologies that will power our future apps from the guys who are lucky enough (attendees of the React.js Conf) to test it.

Among them is Robbie McCorkell that posted a really interesting article: React Native – The Killer Feature that Nobody Talks About.

From his article we're borrowing the following snippet (actually, a fully working sample app).

TappyButtonApp.js

/**
 * @providesModule TappyButtonApp
 * @flow
 */
"use strict";

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

var TappyButtonApp = React.createClass({
  getInitialState() {
    return {
      score: 0,
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>{"Score: " + this.state.score}</Text>
        <TouchableHighlight
          activeOpacity={0.6}
          underlayColor={"white"}
          onPress={() => this.setState({ score: ++this.state.score })}
        >
          <Text style={styles.button}>Tap</Text>
        </TouchableHighlight>
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    color: "blue",
  },
  label: {
    marginBottom: 30,
  },
});

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

module.exports = TappyButtonApp;

When run it will output a button that, when clicked, will increase the counter.