Updates from Fri 5 Jun

Examples/Movies/SearchScreen.js

@@ -281,7 +281,7 @@ var SearchScreen = React.createClass({
         renderRow={this.renderRow}
         onEndReached={this.onEndReached}
         automaticallyAdjustContentInsets={false}
-        keyboardDismissMode="onDrag"
+        keyboardDismissMode="on-drag"
         keyboardShouldPersistTaps={true}
         showsVerticalScrollIndicator={false}
       />;

Examples/UIExplorer/ProgressViewIOSExample.js

@@ -0,0 +1,83 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  ProgressViewIOS,
+  StyleSheet,
+  View,
+} = React;
+var TimerMixin = require('react-timer-mixin');
+
+var ProgressViewExample = React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState() {
+    return {
+      progress: 0,
+    };
+  },
+
+  componentDidMount() {
+    this.updateProgress();
+  },
+
+  updateProgress() {
+    var progress = this.state.progress + 0.01;
+    this.setState({ progress });
+    this.requestAnimationFrame(() => this.updateProgress());
+  },
+
+  getProgress(offset) {
+    var progress = this.state.progress + offset;
+    return Math.sin(progress % Math.PI) % 1;
+  },
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ProgressViewIOS style={styles.progressView} progress={this.getProgress(0)}/>
+        <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={this.getProgress(0.2)}/>
+        <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={this.getProgress(0.4)}/>
+        <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={this.getProgress(0.6)}/>
+        <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={this.getProgress(0.8)}/>
+      </View>
+    );
+  },
+});
+
+exports.framework = 'React';
+exports.title = 'ProgressViewIOS';
+exports.description = 'ProgressViewIOS';
+exports.examples = [{
+  title: 'ProgressViewIOS',
+  render() {
+    return (
+      <ProgressViewExample/>
+    );
+  }
+}];
+
+var styles = StyleSheet.create({
+  container: {
+    marginTop: -20,
+    backgroundColor: 'transparent',
+  },
+  progressView: {
+    marginTop: 20,
+  }
+});

Examples/UIExplorer/StatusBarIOSExample.js

@@ -32,11 +32,11 @@ exports.examples = [{
   render() {
     return (
       <View>
-        {Object.keys(StatusBarIOS.Style).map((key) =>
+        {['default', 'light-content'].map((style) =>
           <TouchableHighlight style={styles.wrapper}
-            onPress={() => StatusBarIOS.setStyle(StatusBarIOS.Style[key])}>
+            onPress={() => StatusBarIOS.setStyle(style)}>
             <View style={styles.button}>
-              <Text>setStyle(StatusBarIOS.Style.{key})</Text>
+              <Text>setStyle('{style}')</Text>
             </View>
           </TouchableHighlight>
         )}
@@ -48,11 +48,11 @@ exports.examples = [{
   render() {
     return (
       <View>
-        {Object.keys(StatusBarIOS.Style).map((key) =>
+        {['default', 'light-content'].map((style) =>
           <TouchableHighlight style={styles.wrapper}
-            onPress={() => StatusBarIOS.setStyle(StatusBarIOS.Style[key], true)}>
+            onPress={() => StatusBarIOS.setStyle(style, true)}>
             <View style={styles.button}>
-              <Text>setStyle(StatusBarIOS.Style.{key}, true)</Text>
+              <Text>setStyle('{style}', true)</Text>
             </View>
           </TouchableHighlight>
         )}
@@ -64,18 +64,18 @@ exports.examples = [{
   render() {
     return (
       <View>
-        {Object.keys(StatusBarIOS.Animation).map((key) =>
+        {['none', 'fade', 'slide'].map((animation) =>
           <View>
             <TouchableHighlight style={styles.wrapper}
-              onPress={() => StatusBarIOS.setHidden(true, StatusBarIOS.Animation[key])}>
+              onPress={() => StatusBarIOS.setHidden(true, animation)}>
               <View style={styles.button}>
-                <Text>setHidden(true, StatusBarIOS.Animation.{key})</Text>
+                <Text>setHidden(true, '{animation}')</Text>
               </View>
             </TouchableHighlight>
             <TouchableHighlight style={styles.wrapper}
-              onPress={() => StatusBarIOS.setHidden(false, StatusBarIOS.Animation[key])}>
+              onPress={() => StatusBarIOS.setHidden(false, animation)}>
               <View style={styles.button}>
-                <Text>setHidden(false, StatusBarIOS.Animation.{key})</Text>
+                <Text>setHidden(false, '{animation}')</Text>
               </View>
             </TouchableHighlight>
           </View>

Examples/UIExplorer/TouchableExample.js

@@ -75,6 +75,14 @@ exports.examples = [
   render: function(): ReactElement {
     return <TouchableFeedbackEvents />;
   },
+}, {
+  title: 'Touchable delay for events',
+  description: '<Touchable*> components also accept delayPressIn, ' +
+    'delayPressOut, and delayLongPress as props. These props impact the ' +
+    'timing of feedback events.',
+  render: function(): ReactElement {
+    return <TouchableDelayEvents />;
+  },
 }];
 
 var TextOnPressBox = React.createClass({
@@ -148,6 +156,44 @@ var TouchableFeedbackEvents = React.createClass({
   },
 });
 
+var TouchableDelayEvents = React.createClass({
+  getInitialState: function() {
+    return {
+      eventLog: [],
+    };
+  },
+  render: function() {
+    return (
+      <View>
+        <View style={[styles.row, {justifyContent: 'center'}]}>
+        <TouchableOpacity
+          style={styles.wrapper}
+          onPress={() => this._appendEvent('press')}
+          delayPressIn={400}
+          onPressIn={() => this._appendEvent('pressIn - 400ms delay')}
+          delayPressOut={1000}
+          onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
+          delayLongPress={800}
+          onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
+          <Text style={styles.button}>
+            Press Me
+          </Text>
+        </TouchableOpacity>
+      </View>
+        <View style={styles.eventLogBox}>
+          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
+        </View>
+      </View>
+    );
+  },
+  _appendEvent: function(eventName) {
+    var limit = 6;
+    var eventLog = this.state.eventLog.slice(0, limit - 1);
+    eventLog.unshift(eventName);
+    this.setState({eventLog});
+  },
+});
+
 var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
 
 var styles = StyleSheet.create({

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -50,6 +50,10 @@
 
 //  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 
+#if RUNNING_ON_CI
+   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"UIExplorerApp"
                                                    launchOptions:launchOptions];

Examples/UIExplorer/UIExplorer/Info.plist

@@ -7,7 +7,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>com.facebook.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<string>com.facebook.internal.uiexplorer.local</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
@@ -22,6 +22,8 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string>You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, otherwise it is going to *fail silently*!</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -34,8 +36,6 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string>You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, otherwise it is going to *fail silently*!</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

Examples/UIExplorer/UIExplorerList.js

@@ -45,6 +45,7 @@ var COMPONENTS = [
   require('./NavigatorIOSColorsExample'),
   require('./NavigatorIOSExample'),
   require('./PickerIOSExample'),
+  require('./ProgressViewIOSExample'),
   require('./ScrollViewExample'),
   require('./SegmentedControlIOSExample'),
   require('./SliderIOSExample'),
@@ -156,7 +157,7 @@ class UIExplorerList extends React.Component {
           renderSectionHeader={this._renderSectionHeader}
           keyboardShouldPersistTaps={true}
           automaticallyAdjustContentInsets={false}
-          keyboardDismissMode="onDrag"
+          keyboardDismissMode="on-drag"
         />
       </View>
     );