Permalink
Browse files

'Update app properties in runtime' UIExplorer demo

Reviewed By: javache

Differential Revision: D2615815

fb-gh-sync-id: 557ce1b2bc76360fe19a0893e0f317c09b685e23
  • Loading branch information...
Pawel Sienkowski facebook-github-bot-2
Pawel Sienkowski authored and facebook-github-bot-2 committed Nov 12, 2015
1 parent eae91cc commit f1712b0cc37d4389039002f0417900189230bc03
@@ -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 />
+ );
+ },
+}];
@@ -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;
@@ -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 */,
);
@@ -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
-
@@ -26,10 +26,10 @@ @implementation AppDelegate
- (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
- RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self
- launchOptions:launchOptions];
+ _bridge = [[RCTBridge alloc] initWithDelegate:self
+ launchOptions:launchOptions];
- RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge
moduleName:@"UIExplorerApp"
initialProperties:nil];
@@ -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
@@ -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
@@ -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();
@@ -72,6 +72,7 @@ var APIS = [
require('./PanResponderExample'),
require('./PointerEventsExample'),
require('./PushNotificationIOSExample'),
+ require('./RCTRootViewIOSExample'),
require('./StatusBarIOSExample'),
require('./TimerExample'),
require('./VibrationIOSExample'),

0 comments on commit f1712b0

Please sign in to comment.