Updates from Mon 30 Mar

- [ReactNative] Clean up no longer needed reference to NavigationBarClass | Philipp von Weitershausen
- [TextInput] returnKeyType, enablesReturnKeyAutomatically, secureTextEntry, more keyboardTypes | Tadeu Zagallo
- [ReactNative] PropTypes for NavigationBars | Philipp von Weitershausen
- Changed LayoutAnimation to use ms instead of seconds for consistency | Nick Lockwood
- Better date support | Nick Lockwood
- Renamed throttleScrollCallbackMS to scrollEventThrottle | Nick Lockwood
- Fixed threading issues in RCTImageDownloader | Nick Lockwood
- [iOS][Assets]: Cleaning up more 1x png from Libraries | Radu Marin
- [ReactNative][docs] LinkingIOS | Tadeu Zagallo
- Fixing TouchableOpacity and TouchableHighlight documentation | Ben Alpert
- [react-native] Add React.addons.createFragment | Ben Alpert

Examples/Movies/SearchScreen.js

@@ -31,8 +31,16 @@ var MovieScreen = require('./MovieScreen');
 
 var fetch = require('fetch');
 
+/**
+ * This is for demo purposes only, and rate limited.
+ * In case you want to use the Rotten Tomatoes' API on a real app you should
+ * create an account at http://developer.rottentomatoes.com/
+ */
 var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/';
-var API_KEYS = ['7waqfqbprs7pajbz28mqf6vz', 'y4vwv8m33hed9ety83jmv52f'];
+var API_KEYS = [
+  '7waqfqbprs7pajbz28mqf6vz',
+  // 'y4vwv8m33hed9ety83jmv52f', Fallback api_key
+];
 
 // Results should be cached keyed by the query
 // with values of null meaning "being fetched"

Examples/SampleApp/SampleApp.xcodeproj/project.pbxproj

@@ -9,6 +9,7 @@
 /* Begin PBXBuildFile section */
 		00481BE81AC0C86700671115 /* libRCTWebSocketDebugger.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00481BE61AC0C7FA00671115 /* libRCTWebSocketDebugger.a */; };
 		00481BEA1AC0C89D00671115 /* libicucore.dylib in Frameworks */ = {isa = PBXBuildFile; fileRef = 00481BE91AC0C89D00671115 /* libicucore.dylib */; };
+		008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */ = {isa = PBXBuildFile; fileRef = 008F07F21AC5B25A0029DE68 /* main.jsbundle */; };
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E61ABCBA2D00DB3ED1 /* libRCTAdSupport.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302B41ABCB8E700DB3ED1 /* libRCTAdSupport.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -92,6 +93,7 @@
 /* Begin PBXFileReference section */
 		00481BDB1AC0C7FA00671115 /* RCTWebSocketDebugger.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocketDebugger.xcodeproj; path = ../../Libraries/RCTWebSocketDebugger/RCTWebSocketDebugger.xcodeproj; sourceTree = "<group>"; };
 		00481BE91AC0C89D00671115 /* libicucore.dylib */ = {isa = PBXFileReference; lastKnownFileType = "compiled.mach-o.dylib"; name = libicucore.dylib; path = usr/lib/libicucore.dylib; sourceTree = SDKROOT; };
+		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = iOS/main.jsbundle; sourceTree = "<group>"; };
 		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
 		00C302AF1ABCB8E700DB3ED1 /* RCTAdSupport.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAdSupport.xcodeproj; path = ../../Libraries/AdSupport/RCTAdSupport.xcodeproj; sourceTree = "<group>"; };
 		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../../Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
@@ -189,6 +191,7 @@
 		13B07FAE1A68108700A75B9A /* SampleApp */ = {
 			isa = PBXGroup;
 			children = (
+				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
@@ -405,6 +408,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 			);

Examples/SampleApp/iOS/AppDelegate.m

@@ -31,7 +31,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   // OPTION 2
   // Load from pre-bundled file on disk. To re-generate the static bundle, run
   //
-  // $ curl http://localhost:8081/Examples/SampleApp/index.ios.bundle -o main.jsbundle
+  // $ curl 'http://localhost:8081/Examples/SampleApp/index.ios.bundle?dev=false&minify=true' -o iOS/main.jsbundle
   //
   // and uncomment the next following line
   // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

Examples/SampleApp/iOS/main.jsbundle

@@ -0,0 +1,5 @@
+// Offline JS
+// To re-generate the offline bundle, run this from root of your project
+// $ curl 'http://localhost:8081/Examples/SampleApp/index.ios.bundle?dev=false&minify=true' -o iOS/main.jsbundle
+
+throw new Error('Offline JS file is empty. See iOS/main.jsbundle for instructions');

Examples/UIExplorer/ListViewPagingExample.js

@@ -226,9 +226,9 @@ var styles = StyleSheet.create({
 var animations = {
   layout: {
     spring: {
-      duration: 0.75,
+      duration: 750,
       create: {
-        duration: 0.3,
+        duration: 300,
         type: LayoutAnimation.Types.easeInEaseOut,
         property: LayoutAnimation.Properties.opacity,
       },
@@ -238,13 +238,13 @@ var animations = {
       },
     },
     easeInEaseOut: {
-      duration: 0.3,
+      duration: 300,
       create: {
         type: LayoutAnimation.Types.easeInEaseOut,
         property: LayoutAnimation.Properties.scaleXY,
       },
       update: {
-        delay: 0.1,
+        delay: 100,
         type: LayoutAnimation.Types.easeInEaseOut,
       },
     },

Examples/UIExplorer/ScrollViewExample.js

@@ -33,7 +33,7 @@ exports.examples = [
     return (
       <ScrollView
         onScroll={() => { console.log('onScroll!'); }}
-        throttleScrollCallbackMS={200}
+        scrollEventThrottle={200}
         contentInset={{top: -50}}
         style={styles.scrollView}>
         {THUMBS.map(createThumbRow)}

Examples/UIExplorer/TextExample.ios.js

@@ -76,6 +76,15 @@ exports.examples = [
       </Text>
     );
   },
+}, {
+  title: 'Padding',
+  render: function() {
+    return (
+      <Text style={{padding: 10}}>
+        This text is indented by 10px padding on all sides.
+      </Text>
+    );
+  },
 }, {
   title: 'Font Family',
   render: function() {

Examples/UIExplorer/TextInputExample.js

@@ -174,6 +174,89 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Keyboard types',
+    render: function() {
+      var keyboardTypes = [
+        'default',
+        'ascii-capable',
+        'numbers-and-punctuation',
+        'url',
+        'number-pad',
+        'phone-pad',
+        'name-phone-pad',
+        'email-address',
+        'decimal-pad',
+        'twitter',
+        'web-search',
+        'numeric',
+      ];
+      var examples = keyboardTypes.map((type) => {
+        return (
+          <WithLabel key={type} label={type}>
+            <TextInput
+              keyboardType={type}
+              style={styles.default}
+            />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Return key types',
+    render: function() {
+      var returnKeyTypes = [
+        'default',
+        'go',
+        'google',
+        'join',
+        'next',
+        'route',
+        'search',
+        'send',
+        'yahoo',
+        'done',
+        'emergency-call',
+      ];
+      var examples = returnKeyTypes.map((type) => {
+        return (
+          <WithLabel key={type} label={type}>
+            <TextInput
+              returnKeyType={type}
+              style={styles.default}
+            />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Enable return key automatically',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="true">
+            <TextInput enablesReturnKeyAutomatically={true} style={styles.default} />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Secure text entry',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="true">
+            <TextInput secureTextEntry={true} style={styles.default} value="abc" />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
   {
     title: 'Event handling',
     render: function(): ReactElement { return <TextEventsExample /> },

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj.rej

@@ -0,0 +1,72 @@
+diff a/Libraries/FBReactKit/js/react-native-github/Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj b/Libraries/FBReactKit/js/react-native-github/Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj	(rejected hunks)
+@@ -19,6 +19,7 @@
+ 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
+ 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+ 		147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 147CED4B1AB34F8C00DA3E4C /* libRCTActionSheet.a */; };
++		D85B829E1AB6D5D7003F4FE2 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D85B829C1AB6D5CE003F4FE2 /* libRCTVibration.a */; };
+ /* End PBXBuildFile section */
+
+ /* Begin PBXContainerItemProxy section */
+@@ -78,6 +79,13 @@
+ 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+ 			remoteInfo = RCTActionSheet;
+ 		};
++		D85B829B1AB6D5CE003F4FE2 /* PBXContainerItemProxy */ = {
++			isa = PBXContainerItemProxy;
++			containerPortal = D85B82911AB6D5CE003F4FE2 /* RCTVibration.xcodeproj */;
++			proxyType = 2;
++			remoteGlobalIDString = 832C81801AAF6DEF007FA2F7;
++			remoteInfo = RCTVibration;
++		};
+ /* End PBXContainerItemProxy section */
+
+ /* Begin PBXFileReference section */
+@@ -98,6 +106,7 @@
+ 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+ 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
+ 		14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
++		D85B82911AB6D5CE003F4FE2 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../../Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
+ /* End PBXFileReference section */
+
+ /* Begin PBXFrameworksBuildPhase section */
+@@ -112,6 +121,7 @@
+ 			isa = PBXFrameworksBuildPhase;
+ 			buildActionMask = 2147483647;
+ 			files = (
++				D85B829E1AB6D5D7003F4FE2 /* libRCTVibration.a in Frameworks */,
+ 				147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */,
+ 				134454601AAFCABD003F0779 /* libRCTAdSupport.a in Frameworks */,
+ 				134A8A2A1AACED7A00945AAE /* libRCTGeolocation.a in Frameworks */,
+@@ -145,6 +155,7 @@
+ 		1316A21D1AA397F400C0188E /* Libraries */ = {
+ 			isa = PBXGroup;
+ 			children = (
++				D85B82911AB6D5CE003F4FE2 /* RCTVibration.xcodeproj */,
+ 				14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */,
+ 				13417FFA1AA91531003F314A /* ReactKit.xcodeproj */,
+ 				134454551AAFCAAE003F0779 /* RCTAdSupport.xcodeproj */,
+@@ -334,6 +353,10 @@
+ 					ProjectRef = 13417FEA1AA914B8003F314A /* RCTText.xcodeproj */;
+ 				},
+ 				{
++					ProductGroup = D85B82921AB6D5CE003F4FE2 /* Products */;
++					ProjectRef = D85B82911AB6D5CE003F4FE2 /* RCTVibration.xcodeproj */;
++				},
++				{
+ 					ProductGroup = 13417FFB1AA91531003F314A /* Products */;
+ 					ProjectRef = 13417FFA1AA91531003F314A /* ReactKit.xcodeproj */;
+ 				},
+@@ -396,6 +419,13 @@
+ 			remoteRef = 147CED4A1AB34F8C00DA3E4C /* PBXContainerItemProxy */;
+ 			sourceTree = BUILT_PRODUCTS_DIR;
+ 		};
++		D85B829C1AB6D5CE003F4FE2 /* libRCTVibration.a */ = {
++			isa = PBXReferenceProxy;
++			fileType = archive.ar;
++			path = libRCTVibration.a;
++			remoteRef = D85B829B1AB6D5CE003F4FE2 /* PBXContainerItemProxy */;
++			sourceTree = BUILT_PRODUCTS_DIR;
++		};
+ /* End PBXReferenceProxy section */
+
+ /* Begin PBXResourcesBuildPhase section */

Examples/UIExplorer/UIExplorer/Images.xcassets/story-background.imageset/Contents.json

@@ -1,10 +1,5 @@
 {
   "images" : [
-    {
-      "idiom" : "universal",
-      "scale" : "1x",
-      "filename" : "story-background.png"
-    },
     {
       "idiom" : "universal",
       "scale" : "2x",

Libraries/Animation/AnimationUtils.js

@@ -211,21 +211,27 @@ var ticksPerSecond = 60;
 var lastUsedTag = 0;
 
 module.exports = {
+  /**
+   * Returns a new unique animation tag.
+   */
   allocateTag: function(): number {
     return ++lastUsedTag;
   },
 
+  /**
+   * Returns the values of the easing function at discrete ticks (60 per second).
+   */
   evaluateEasingFunction: function(duration: number, easing: string | EasingFunction): Array<number> {
     if (typeof easing === 'string') {
       easing = defaults[easing] || defaults.easeOutQuad;
     }
 
     var tickCount = Math.round(duration * ticksPerSecond / 1000);
-    var sample = [];
+    var samples = [];
     for (var i = 0; i <= tickCount; i++) {
-      sample.push(easing(i / tickCount));
+      samples.push(easing.call(defaults, i / tickCount));
     }
 
-    return sample;
+    return samples;
   },
 };

Libraries/Animation/LayoutAnimation.js

@@ -92,13 +92,13 @@ var LayoutAnimation = {
   configChecker: configChecker,
   Presets: {
     easeInEaseOut: create(
-      0.3, Types.easeInEaseOut, Properties.opacity
+      300, Types.easeInEaseOut, Properties.opacity
     ),
     linear: create(
-      0.5, Types.linear, Properties.opacity
+      500, Types.linear, Properties.opacity
     ),
     spring: {
-      duration: 0.7,
+      duration: 700,
       create: {
         type: Types.linear,
         property: Properties.opacity,

Libraries/Components/ScrollResponder.js

@@ -11,7 +11,6 @@
  */
 'use strict';
 
-var NativeModules = require('NativeModules');
 var NativeModules = require('NativeModules');
 var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
 var Subscribable = require('Subscribable');

Libraries/Components/ScrollView/ScrollView.js

@@ -64,7 +64,7 @@ var ScrollView = React.createClass({
     showsHorizontalScrollIndicator: PropTypes.bool,
     showsVerticalScrollIndicator: PropTypes.bool,
     style: StyleSheetPropType(ViewStylePropTypes),
-    throttleScrollCallbackMS: PropTypes.number, // null
+    scrollEventThrottle: PropTypes.number, // null
 
     /**
      * When true, the scroll view bounces horizontally when it reaches the end
@@ -211,12 +211,12 @@ var ScrollView = React.createClass({
       );
     }
     if (__DEV__) {
-      if (this.props.onScroll && !this.props.throttleScrollCallbackMS) {
+      if (this.props.onScroll && !this.props.scrollEventThrottle) {
         var onScroll = this.props.onScroll;
         this.props.onScroll = function() {
           console.log(
             'You specified `onScroll` on a <ScrollView> but not ' +
-            '`throttleScrollCallbackMS`. You will only receive one event. ' +
+            '`scrollEventThrottle`. You will only receive one event. ' +
             'Using `16` you get all the events but be aware that it may ' +
             'cause frame drops, use a bigger number if you don\'t need as ' +
             'much precision.'
@@ -325,7 +325,7 @@ var validAttributes = {
   showsHorizontalScrollIndicator: true,
   showsVerticalScrollIndicator: true,
   stickyHeaderIndices: {diff: deepDiffer},
-  throttleScrollCallbackMS: true,
+  scrollEventThrottle: true,
   zoomScale: true,
 };