Examples from Custom iOS Views in React Native on almostobsolete.net

custom-view.m

#import "MyCustomView.h"

@implementation MyCustomView
{
    UIColor *squareColor;
}

- (void)setIsRed:(BOOL)isRed
{
    squareColor= (isRed)  ? [UIColor redColor] : [UIColor greenColor];
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    [squareColor setFill];
    CGContextFillRect(UIGraphicsGetCurrentContext(), rect);
}

helloworld.js

var React = require('react-native');
var { AppRegistry, Image, Text } = React;

var App = React.createClass({
  render: function() {
    return (
      <View>
        <Image src={require('image!hello')}/>
        <Text>Hello World!</Text>
      </View>
    );
  }
});

AppRegistry.registerComponent('helloworld', () => App);

imports.m

#import "MyCustomView.h"
#import <UIKit/UIKit.h>

index.ios.js

/**
 * Example: Native Components in React Native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View
} = React;

var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');

var MyCustomView = createReactIOSNativeComponentClass({
  validAttributes: {isRed: true},
  uiViewClassName: 'MyCustomView',
})

var demo = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text>
          Red one
        </Text>
        <MyCustomView style={{width: 10, height: 10}} isRed={true}/>
        <Text>
          Not red one
        </Text>
        <MyCustomView style={{width: 10, height: 10}} isRed={false}/>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  customView: {
    width: 10,
    height: 10
  }
});

AppRegistry.registerComponent('demo', () => demo);

MyCustomView.m

#import "MyCustomView.h"

@implementation MyCustomView
{
    UIColor *squareColor;
}

- (void)setIsRed:(BOOL)isRed
{
    squareColor= (isRed)  ? [UIColor redColor] : [UIColor greenColor];
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    [squareColor setFill];
    CGContextFillRect(UIGraphicsGetCurrentContext(), rect);
}

@end

rct-export-view-property.m

RCT_EXPORT_VIEW_PROPERTY(setRed, BOOL)

render.js

  render: function() {
    return (
      <View style={styles.container}>
        <Text>
          Red one
        </Text>
        <MyCustomView style={{width: 10, height: 10}} isRed={true}/>
        <Text>
          Not red one
        </Text>
        <MyCustomView style={{width: 10, height: 10}} isRed={false}/>
      </View>
    );
  }

usage.js

var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');

var MyCustomView = createReactIOSNativeComponentClass({
  validAttributes: {isRed: true},
  uiViewClassName: 'MyCustomView',
})

view-method.m

- (UIView *)view
{
    MyCustomView * theView;
    theView = [[MyCustomView alloc] init];
    return theView;
}

I don't understand why the "RCT_EXPORT_VIEW_PROPERTY(setRed, BOOL)" uses "setRed" where there was only "setIsRed" method in the MyCustomView.m code.

RCT_EXPORT_VIEW_PROPERTY is like a callback??