Added ProgressViewIOS

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/UIExplorerList.js

@@ -45,6 +45,7 @@ var COMPONENTS = [
   require('./NavigatorIOSColorsExample'),
   require('./NavigatorIOSExample'),
   require('./PickerIOSExample'),
+  require('./ProgressViewIOSExample'),
   require('./ScrollViewExample'),
   require('./SegmentedControlIOSExample'),
   require('./SliderIOSExample'),

Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js

@@ -0,0 +1,49 @@
+
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule SegmentedControlIOS
+ */
+
+'use strict';
+
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+var Text = require('Text');
+var View = require('View');
+
+var Dummy = React.createClass({
+  render: function() {
+    return (
+      <View style={[styles.dummy, this.props.style]}>
+        <Text style={styles.text}>
+          ProgressViewIOS is not supported on this platform!
+        </Text>
+      </View>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  dummy: {
+    width: 120,
+    height: 20,
+    backgroundColor: '#ffbcbc',
+    borderWidth: 1,
+    borderColor: 'red',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#333333',
+    margin: 5,
+    fontSize: 10,
+  }
+});
+
+module.exports = Dummy;

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ProgressViewIOS
+ * @flow
+ */
+'use strict';
+
+var Image = require('Image');
+var NativeMethodsMixin = require('NativeMethodsMixin');
+var NativeModules = require('NativeModules');
+var PropTypes = require('ReactPropTypes');
+var React = require('React');
+var StyleSheet = require('StyleSheet');
+
+var requireNativeComponent = require('requireNativeComponent');
+var verifyPropTypes = require('verifyPropTypes');
+
+/**
+ * Use `ProgressViewIOS` to render a UIProgressView on iOS.
+ */
+var ProgressViewIOS = React.createClass({
+  mixins: [NativeMethodsMixin],
+
+  propTypes: {
+    /**
+     * The progress bar style.
+     */
+    progressViewStyle: PropTypes.oneOf(['default', 'bar']),
+
+    /**
+     * The progress value (between 0 and 1).
+     */
+    progress: PropTypes.number,
+
+    /**
+     * The tint color of the progress bar itself.
+     */
+    progressTintColor: PropTypes.string,
+
+    /**
+     * The tint color of the progress bar track.
+     */
+    trackTintColor: PropTypes.string,
+
+    /**
+     * A stretchable image to display as the progress bar.
+     */
+    progressImage: Image.propTypes.source,
+
+    /**
+     * A stretchable image to display behind the progress bar.
+     */
+    trackImage: Image.propTypes.source,
+  },
+
+  render: function() {
+    return (
+      <RCTProgressView
+        {...this.props}
+        style={[styles.progressView, this.props.style]}
+      />
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  progressView: {
+    height: NativeModules.ProgressViewManager.ComponentHeight
+  },
+});
+
+var RCTProgressView = requireNativeComponent(
+  'RCTProgressView',
+  null
+);
+if (__DEV__) {
+  verifyPropTypes(
+    RCTProgressView,
+    RCTProgressView.viewConfig
+  );
+}
+
+module.exports = ProgressViewIOS;

Libraries/react-native/react-native.js

@@ -24,11 +24,12 @@ var ReactNative = Object.assign(Object.create(require('React')), {
   Image: require('Image'),
   ListView: require('ListView'),
   MapView: require('MapView'),
+  Navigator: require('Navigator'),
   NavigatorIOS: require('NavigatorIOS'),
   PickerIOS: require('PickerIOS'),
-  Navigator: require('Navigator'),
-  SegmentedControlIOS: require('SegmentedControlIOS'),
+  ProgressViewIOS: require('ProgressViewIOS'),
   ScrollView: require('ScrollView'),
+  SegmentedControlIOS: require('SegmentedControlIOS'),
   SliderIOS: require('SliderIOS'),
   SwitchIOS: require('SwitchIOS'),
   TabBarIOS: require('TabBarIOS'),
@@ -47,12 +48,12 @@ var ReactNative = Object.assign(Object.create(require('React')), {
   AsyncStorage: require('AsyncStorage'),
   CameraRoll: require('CameraRoll'),
   InteractionManager: require('InteractionManager'),
-  LinkingIOS: require('LinkingIOS'),
   LayoutAnimation: require('LayoutAnimation'),
+  LinkingIOS: require('LinkingIOS'),
   NetInfo: require('NetInfo'),
+  PanResponder: require('PanResponder'),
   PixelRatio: require('PixelRatio'),
   PushNotificationIOS: require('PushNotificationIOS'),
-  PanResponder: require('PanResponder'),
   StatusBarIOS: require('StatusBarIOS'),
   StyleSheet: require('StyleSheet'),
   VibrationIOS: require('VibrationIOS'),

React/React.xcodeproj/project.pbxproj

@@ -16,6 +16,7 @@
 		134FCB361A6D42D900051CC8 /* RCTSparseArray.m in Sources */ = {isa = PBXBuildFile; fileRef = 83BEE46D1A6D19BC00B5863B /* RCTSparseArray.m */; };
 		134FCB3D1A6E7F0800051CC8 /* RCTContextExecutor.m in Sources */ = {isa = PBXBuildFile; fileRef = 134FCB3A1A6E7F0800051CC8 /* RCTContextExecutor.m */; };
 		134FCB3E1A6E7F0800051CC8 /* RCTWebViewExecutor.m in Sources */ = {isa = PBXBuildFile; fileRef = 134FCB3C1A6E7F0800051CC8 /* RCTWebViewExecutor.m */; };
+		13513F3C1B1F43F400FCE529 /* RCTProgressViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13513F3B1B1F43F400FCE529 /* RCTProgressViewManager.m */; };
 		13723B501A82FD3C00F88898 /* RCTStatusBarManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13723B4F1A82FD3C00F88898 /* RCTStatusBarManager.m */; };
 		1372B70A1AB030C200659ED6 /* RCTAppState.m in Sources */ = {isa = PBXBuildFile; fileRef = 1372B7091AB030C200659ED6 /* RCTAppState.m */; };
 		137327E71AA5CF210034F82E /* RCTTabBar.m in Sources */ = {isa = PBXBuildFile; fileRef = 137327E01AA5CF210034F82E /* RCTTabBar.m */; };
@@ -104,6 +105,8 @@
 		134FCB3A1A6E7F0800051CC8 /* RCTContextExecutor.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTContextExecutor.m; sourceTree = "<group>"; };
 		134FCB3B1A6E7F0800051CC8 /* RCTWebViewExecutor.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWebViewExecutor.h; sourceTree = "<group>"; };
 		134FCB3C1A6E7F0800051CC8 /* RCTWebViewExecutor.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWebViewExecutor.m; sourceTree = "<group>"; };
+		13513F3A1B1F43F400FCE529 /* RCTProgressViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTProgressViewManager.h; sourceTree = "<group>"; };
+		13513F3B1B1F43F400FCE529 /* RCTProgressViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTProgressViewManager.m; sourceTree = "<group>"; };
 		13723B4E1A82FD3C00F88898 /* RCTStatusBarManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTStatusBarManager.h; sourceTree = "<group>"; };
 		13723B4F1A82FD3C00F88898 /* RCTStatusBarManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTStatusBarManager.m; sourceTree = "<group>"; };
 		1372B7081AB030C200659ED6 /* RCTAppState.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTAppState.h; sourceTree = "<group>"; };
@@ -307,6 +310,8 @@
 				58114A141AAE854800E7D092 /* RCTPickerManager.h */,
 				58114A151AAE854800E7D092 /* RCTPickerManager.m */,
 				13442BF31AA90E0B0037E5B0 /* RCTPointerEvents.h */,
+				13513F3A1B1F43F400FCE529 /* RCTProgressViewManager.h */,
+				13513F3B1B1F43F400FCE529 /* RCTProgressViewManager.m */,
 				131B6AF01AF1093D00FFC3E0 /* RCTSegmentedControl.h */,
 				131B6AF11AF1093D00FFC3E0 /* RCTSegmentedControl.m */,
 				131B6AF21AF1093D00FFC3E0 /* RCTSegmentedControlManager.h */,
@@ -524,6 +529,7 @@
 				58114A501AAE93D500E7D092 /* RCTAsyncLocalStorage.m in Sources */,
 				832348161A77A5AA00B55238 /* Layout.c in Sources */,
 				14F4D38B1AE1B7E40049C042 /* RCTProfile.m in Sources */,
+				13513F3C1B1F43F400FCE529 /* RCTProgressViewManager.m in Sources */,
 				14F3620D1AABD06A001CE568 /* RCTSwitch.m in Sources */,
 				14F3620E1AABD06A001CE568 /* RCTSwitchManager.m in Sources */,
 				13B080201A69489C00A75B9A /* RCTActivityIndicatorViewManager.m in Sources */,

React/Views/RCTProgressViewManager.h

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "RCTViewManager.h"
+
+@interface RCTProgressViewManager : RCTViewManager
+
+@end

React/Views/RCTProgressViewManager.m

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "RCTProgressViewManager.h"
+
+#import "RCTConvert.h"
+
+@implementation RCTConvert (RCTProgressViewManager)
+
+RCT_ENUM_CONVERTER(UIProgressViewStyle, (@{
+  @"default": @(UIProgressViewStyleDefault),
+  @"bar": @(UIProgressViewStyleBar),
+}), UIProgressViewStyleDefault, integerValue)
+
+@end
+
+@implementation RCTProgressViewManager
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  return [[UIProgressView alloc] init];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(progressViewStyle, UIProgressViewStyle)
+RCT_EXPORT_VIEW_PROPERTY(progress, float)
+RCT_EXPORT_VIEW_PROPERTY(progressTintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(trackTintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(progressImage, UIImage)
+RCT_EXPORT_VIEW_PROPERTY(trackImage, UIImage)
+
+- (NSDictionary *)constantsToExport
+{
+  UIProgressView *view = [[UIProgressView alloc] init];
+  return @{
+    @"ComponentHeight": @(view.intrinsicContentSize.height),
+  };
+}
+
+@end