'Update app properties in runtime' UIExplorer demo

Reviewed By: javache

Differential Revision: D2615815

fb-gh-sync-id: 557ce1b2bc76360fe19a0893e0f317c09b685e23

Examples/UIExplorer/RCTRootViewIOSExample.js

@@ -0,0 +1,69 @@
+/**
+ * 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 {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var requireNativeComponent = require('requireNativeComponent');
+var UpdatePropertiesExampleView = requireNativeComponent('UpdatePropertiesExampleView');
+
+class AppPropertiesUpdateExample extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>
+          Press the button to update the field below by passing new properties to the RN app.
+        </Text>
+        <UpdatePropertiesExampleView style={styles.nativeView}>
+          <Text style={styles.text}>
+            Error: This demo is accessible only from UIExplorer app
+          </Text>
+        </UpdatePropertiesExampleView>
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+  },
+  text: {
+    marginBottom: 20
+  },
+  nativeView: {
+    height: 140,
+    width: 280
+  }
+});
+
+exports.title = 'RCTRootView';
+exports.description = 'Examples that show useful methods when embedding React Native in a native application';
+exports.examples = [
+{
+  title: 'Updating app properties in runtime',
+  render(): React.Component {
+    return (
+      <AppPropertiesUpdateExample />
+    );
+  },
+}];

Examples/UIExplorer/SetPropertiesExampleApp.js

@@ -0,0 +1,43 @@
+/**
+ * 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');
+var Text = require('Text');
+var View = require('View');
+
+var SetPropertiesExampleApp = React.createClass({
+
+  render: function() {
+    var wrapperStyle = {
+      backgroundColor: this.props.color,
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    };
+
+    return (
+      <View style={wrapperStyle}>
+        <Text>
+          Embedded React Native view
+        </Text>
+      </View>
+    );
+  },
+});
+
+module.exports = SetPropertiesExampleApp;

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -50,6 +50,7 @@
 		14D6D7281B2222EF001FB087 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDED91B0651EA00C62182 /* libRCTWebSocket.a */; };
 		14D6D7291B2222EF001FB087 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14AADF041AC3DB95002390C9 /* libReact.a */; };
 		14DC67F41AB71881001358AB /* libRCTPushNotification.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14DC67F11AB71876001358AB /* libRCTPushNotification.a */; };
+		272E6B3F1BEA849E001FCF37 /* UpdatePropertiesExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */; settings = {ASSET_TAGS = (); }; };
 		3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
 		3D36915B1BDA8CBB007B22D8 /* uie_thumb_big.png in Resources */ = {isa = PBXBuildFile; fileRef = 3D36915A1BDA8CBB007B22D8 /* uie_thumb_big.png */; };
 		3DB99D0C1BA0340600302749 /* UIExplorerIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */; };
@@ -222,6 +223,8 @@
 		14D6D7101B220EB3001FB087 /* libOCMock.a */ = {isa = PBXFileReference; lastKnownFileType = archive.ar; path = libOCMock.a; sourceTree = "<group>"; };
 		14DC67E71AB71876001358AB /* RCTPushNotification.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTPushNotification.xcodeproj; path = ../../Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj; sourceTree = "<group>"; };
 		14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
+		272E6B3B1BEA849E001FCF37 /* UpdatePropertiesExampleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = UpdatePropertiesExampleView.h; path = UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.h; sourceTree = "<group>"; };
+		272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = UpdatePropertiesExampleView.m; path = UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.m; sourceTree = "<group>"; };
 		357858F81B28D2C400341EDB /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
 		3D36915A1BDA8CBB007B22D8 /* uie_thumb_big.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = uie_thumb_big.png; path = UIExplorer/Images.xcassets/uie_thumb_big.imageset/uie_thumb_big.png; sourceTree = SOURCE_ROOT; };
 		3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = UIExplorerIntegrationTests.m; sourceTree = "<group>"; };
@@ -365,6 +368,7 @@
 		13B07FAE1A68108700A75B9A /* UIExplorer */ = {
 			isa = PBXGroup;
 			children = (
+				272E6B3A1BEA846C001FCF37 /* NativeExampleViews */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
@@ -491,6 +495,15 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		272E6B3A1BEA846C001FCF37 /* NativeExampleViews */ = {
+			isa = PBXGroup;
+			children = (
+				272E6B3B1BEA849E001FCF37 /* UpdatePropertiesExampleView.h */,
+				272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */,
+			);
+			name = NativeExampleViews;
+			sourceTree = "<group>";
+		};
 		357858F91B28D2C400341EDB /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -854,6 +867,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				272E6B3F1BEA849E001FCF37 /* UpdatePropertiesExampleView.m in Sources */,
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);

Examples/UIExplorer/UIExplorer/AppDelegate.h

@@ -14,9 +14,11 @@
 
 #import <UIKit/UIKit.h>
 
+@class RCTBridge;
+
 @interface AppDelegate : UIResponder <UIApplicationDelegate>
 
 @property (nonatomic, strong) UIWindow *window;
+@property (nonatomic, readonly) RCTBridge *bridge;
 
 @end
-

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -26,10 +26,10 @@
 
 - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self
+  _bridge = [[RCTBridge alloc] initWithDelegate:self
-                                            launchOptions:launchOptions];
+                                  launchOptions:launchOptions];
 
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge
                                                    moduleName:@"UIExplorerApp"
                                             initialProperties:nil];
 

Examples/UIExplorer/UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.h

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+#import <UIKit/UIKit.h>
+#import "RCTView.h"
+
+@interface UpdatePropertiesExampleView : RCTView
+
+@end

Examples/UIExplorer/UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.m

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+
+#import "AppDelegate.h"
+
+#import "UpdatePropertiesExampleView.h"
+#import "RCTJavaScriptLoader.h"
+#import "RCTBridge.h"
+#import "RCTRootView.h"
+#import "RCTViewManager.h"
+
+@interface UpdatePropertiesExampleViewManager : RCTViewManager
+
+@end
+
+@implementation UpdatePropertiesExampleViewManager
+
+RCT_EXPORT_MODULE();
+
+- (UIView *)view
+{
+  return [UpdatePropertiesExampleView new];
+}
+
+@end
+
+@implementation UpdatePropertiesExampleView
+{
+  RCTRootView *_rootView;
+  UIButton *_button;
+  BOOL _beige;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  self = [super initWithFrame:frame];
+  if (self) {
+    _beige = YES;
+
+    AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
+
+    _rootView = [[RCTRootView alloc] initWithBridge:appDelegate.bridge
+                                         moduleName:@"SetPropertiesExampleApp"
+                                  initialProperties:@{@"color":@"beige"}];
+
+    _button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
+    [_button setTitle:@"Native Button" forState:UIControlStateNormal];
+    [_button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
+    [_button setBackgroundColor:[UIColor grayColor]];
+
+    [_button addTarget:self
+                action:@selector(changeColor)
+      forControlEvents:UIControlEventTouchUpInside];
+
+    [self addSubview:_button];
+    [self addSubview:_rootView];
+  }
+  return self;
+}
+
+- (void)layoutSubviews
+{
+  float spaceHeight = 20;
+  float buttonHeight = 40;
+  float rootViewWidth = self.bounds.size.width;
+  float rootViewHeight = self.bounds.size.height - spaceHeight - buttonHeight;
+
+  [_rootView setFrame:CGRectMake(0, 0, rootViewWidth, rootViewHeight)];
+  [_button setFrame:CGRectMake(0, rootViewHeight + spaceHeight, rootViewWidth, buttonHeight)];
+}
+
+- (void)changeColor
+{
+  _beige = !_beige;
+  [_rootView setAppProperties:@{@"color":_beige ? @"beige" : @"purple"}];
+}
+
+- (NSArray<UIView<RCTComponent> *> *)reactSubviews
+{
+  return @[];
+}
+
+@end

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -22,6 +22,8 @@ var {
   AppRegistry,
   NavigatorIOS,
   StyleSheet,
+  Text,
+  View
 } = React;
 
 var UIExplorerApp = React.createClass({
@@ -72,6 +74,27 @@ var styles = StyleSheet.create({
   },
 });
 
+var SetPropertiesExampleApp = React.createClass({
+
+  render: function() {
+    var wrapperStyle = {
+      backgroundColor: this.props.color,
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    };
+
+    return (
+      <View style={wrapperStyle}>
+        <Text>
+          Embedded React Native view
+        </Text>
+      </View>
+    );
+  },
+});
+
+AppRegistry.registerComponent('SetPropertiesExampleApp', () => SetPropertiesExampleApp);
 AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
 UIExplorerList.registerComponents();
 

Examples/UIExplorer/UIExplorerList.ios.js

@@ -72,6 +72,7 @@ var APIS = [
   require('./PanResponderExample'),
   require('./PointerEventsExample'),
   require('./PushNotificationIOSExample'),
+  require('./RCTRootViewIOSExample'),
   require('./StatusBarIOSExample'),
   require('./TimerExample'),
   require('./VibrationIOSExample'),