ReactJSConf snippets

MovieCell.js

//[...]
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>
    );
  }
});

MoviesApp.js

//[...]
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;

RKView.h

#import "RKView.h"
#import <UiKit/UIKit.h>
#import <FBReactKit/UIView+FBReactKit.h>
#import "UIView+FBReactKit.h"

@interface RKView : UIView

styles.js

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