Big Updates from Fri Mar 6

- [ReactNative] Oss RCTSlider | Tadeu Zagallo
- [ReactNative] Oss RCTSwitch | Tadeu Zagallo
- [ReactNative] Remove ImageSourcePropType | Christopher Chedeau
- [ReactNative] s/Image.sourcePropType/Image.propTypes.source/ | Christopher Chedeau
- [ReactNative] s/Text.stylePropType/Text.propTypes.style/ | Christopher Chedeau
- [ReactNative] s/View.stylePropType/View.propTypes.style/ | Christopher Chedeau
- [ReactNative] Remove nativePropTypes | Christopher Chedeau
- [ReactNative] Inline ScrollViewPropTypes | Christopher Chedeau
- [ReactNative] Unify ScrollView.android and ScrollView.ios | Christopher Chedeau
- [ReactNative] Move around and reformat comments for the documentation | Christopher Chedeau
- Improved Geolocation API | Nick Lockwood
- [React Native] Move copyProperties and mergeHelpers to github dir | Ben Alpert
- Fixed some misspellings that are propagating through our code | Skotch Vail
- [ReactNative] OSS DatePicker | Spencer Ahrens
- [React Native] Update core modules for React 0.13 | Ben Alpert
- [React Native] Update React to v0.13.0-rc2 | Ben Alpert
- [react-packager] onchange endpoint that informs of changes | Amjad Masad
- [react-packager] dev option needs to default to true for backwards compat | Amjad Masad

Examples/UIExplorer/DatePickerExample.js

@@ -0,0 +1,157 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule DatePickerExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  DatePickerIOS,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} = React;
+
+var DatePickerExample = React.createClass({
+  getDefaultProps: function () {
+    return {
+      date: new Date(),
+      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      date: this.props.date,
+      timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
+    };
+  },
+
+  onDateChange: function(date) {
+    this.setState({date: date});
+  },
+
+  onTimezoneChange: function(event) {
+    var offset = parseInt(event.nativeEvent.text, 10);
+    if (isNaN(offset)) {
+      return;
+    }
+    this.setState({timeZoneOffsetInHours: offset});
+  },
+
+  render: function() {
+    // Ideally, the timezone input would be a picker rather than a
+    // text input, but we don't have any pickers yet :(
+    return (
+      <View>
+        <WithLabel label="Value:">
+          <Text>{
+            this.state.date.toLocaleDateString() +
+            ' ' +
+            this.state.date.toLocaleTimeString()
+          }</Text>
+        </WithLabel>
+        <WithLabel label="Timezone:">
+          <TextInput
+            onChange={this.onTimezoneChange}
+            style={styles.textinput}
+            value={this.state.timeZoneOffsetInHours.toString()}
+          />
+          <Text> hours from UTC</Text>
+        </WithLabel>
+        <Heading label="Date + time picker" />
+        <DatePickerIOS
+          date={this.state.date}
+          mode="datetime"
+          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
+          onDateChange={this.onDateChange}
+        />
+        <Heading label="Date picker" />
+        <DatePickerIOS
+          date={this.state.date}
+          mode="date"
+          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
+          onDateChange={this.onDateChange}
+        />
+        <Heading label="Time picker, 10-minute interval" />
+        <DatePickerIOS
+          date={this.state.date}
+          mode="time"
+          timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
+          onDateChange={this.onDateChange}
+          minuteInterval={10}
+        />
+      </View>
+    );
+  },
+});
+
+var WithLabel = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.labelContainer}>
+        <View style={styles.labelView}>
+          <Text style={styles.label}>
+            {this.props.label}
+          </Text>
+        </View>
+        {this.props.children}
+      </View>
+    );
+  }
+});
+
+var Heading = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.headingContainer}>
+        <Text style={styles.heading}>
+          {this.props.label}
+        </Text>
+      </View>
+    );
+  }
+});
+
+exports.title = '<DatePickerIOS>';
+exports.description = 'Select dates and times using the native UIDatePicker.';
+exports.examples = [
+{
+  title: '<DatePickerIOS>',
+  render: function() {
+    return <DatePickerExample />;
+  },
+}];
+
+var styles = StyleSheet.create({
+  textinput: {
+    height: 26,
+    width: 50,
+    borderWidth: 0.5,
+    borderColor: '#0f0f0f',
+    padding: 4,
+    fontSize: 13,
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 2,
+  },
+  labelView: {
+    marginRight: 10,
+    paddingVertical: 2,
+  },
+  label: {
+    fontWeight: 'bold',
+  },
+  headingContainer: {
+    padding: 4,
+    backgroundColor: '#f6f7f8',
+  },
+  heading: {
+    fontWeight: 'bold',
+    fontSize: 14,
+  },
+});

Examples/UIExplorer/GeoLocationExample.js

@@ -1,7 +1,7 @@
 /**
  * Copyright 2004-present Facebook. All Rights Reserved.
  *
- * @providesModule GeoLocationExample
+ * @providesModule GeolocationExample
  */
 /* eslint no-console: 0 */
 'use strict';
@@ -15,19 +15,19 @@ var {
 } = React;
 
 exports.framework = 'React';
-exports.title = 'GeoLocation';
-exports.description = 'Examples of using the GeoLocation API.';
+exports.title = 'Geolocation';
+exports.description = 'Examples of using the Geolocation API.';
 
 exports.examples = [
   {
     title: 'navigator.geolocation',
     render: function() {
-      return <GeoLocationExample />;
+      return <GeolocationExample />;
     },
   }
 ];
 
-var GeoLocationExample = React.createClass({
+var GeolocationExample = React.createClass({
   getInitialState: function() {
     return {
       initialPosition: 'unknown',

Examples/UIExplorer/SliderExample.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule SliderExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Slider,
+  Text,
+  StyleSheet,
+  View,
+} = React;
+
+var SliderExample = React.createClass({
+  getInitialState() {
+    return {
+      value: 0,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          {this.state.value}
+        </Text>
+        <Slider
+          style={styles.slider}
+          onValueChange={(value) => this.setState({value: value})} />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  slider: {
+    height: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: 'bold',
+    margin: 10,
+  },
+});
+
+exports.title = '<Slider>';
+exports.description = 'Slider input for numeric values';
+exports.examples = [
+  {
+    title: 'Slider',
+    render() { return <SliderExample />; }
+  }
+];

Examples/UIExplorer/SwitchExample.js

@@ -0,0 +1,141 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule SwitchExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  SwitchIOS,
+  Text,
+  View
+} = React;
+
+var BasicSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      trueSwitchIsOn: true,
+      falseSwitchIsOn: false,
+    };
+  },
+  render() {
+    return (
+      <View>
+        <SwitchIOS
+          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
+          style={{marginBottom: 10}}
+          value={this.state.falseSwitchIsOn} />
+        <SwitchIOS
+          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
+          value={this.state.trueSwitchIsOn} />
+      </View>
+    );
+  }
+});
+
+var DisabledSwitchExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <SwitchIOS
+          disabled={true}
+          style={{marginBottom: 10}}
+          value={true} />
+        <SwitchIOS
+          disabled={true}
+          value={false} />
+      </View>
+    );
+  },
+});
+
+var ColorSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      colorTrueSwitchIsOn: true,
+      colorFalseSwitchIsOn: false,
+    };
+  },
+  render() {
+    return (
+      <View>
+        <SwitchIOS
+          onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
+          onTintColor="#00ff00"
+          style={{marginBottom: 10}}
+          thumbTintColor="#0000ff"
+          tintColor="#ff0000"
+          value={this.state.colorFalseSwitchIsOn} />
+        <SwitchIOS
+          onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
+          onTintColor="#00ff00"
+          thumbTintColor="#0000ff"
+          tintColor="#ff0000"
+          value={this.state.colorTrueSwitchIsOn} />
+      </View>
+    );
+  },
+});
+
+var EventSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      eventSwitchIsOn: false,
+      eventSwitchRegressionIsOn: true,
+    };
+  },
+  render() {
+    return (
+      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+        <View>
+          <SwitchIOS
+            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchIsOn} />
+          <SwitchIOS
+            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchIsOn} />
+            <Text>{this.state.eventSwitchIsOn ? "On" : "Off"}</Text>
+        </View>
+        <View>
+          <SwitchIOS
+            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchRegressionIsOn} />
+          <SwitchIOS
+            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchRegressionIsOn} />
+          <Text>{this.state.eventSwitchRegressionIsOn ? "On" : "Off"}</Text>
+        </View>
+      </View>
+    );
+  }
+});
+
+exports.title = '<SwitchIOS>';
+exports.description = 'Native boolean input';
+exports.examples = [
+  {
+    title: 'Switches can be set to true or false',
+    render() { return <BasicSwitchExample />; }
+  },
+  {
+    title: 'Switches can be disabled',
+    render() { return <DisabledSwitchExample />; }
+  },
+  {
+    title: 'Custom colors can be provided',
+    render() { return <ColorSwitchExample />; }
+  },
+  {
+    title: 'Change events can be detected',
+    render() { return <EventSwitchExample />; }
+  },
+  {
+    title: 'Switches are controlled components',
+    render() { return <SwitchIOS />; }
+  }
+];