status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-04 13:44:04 +00:00
Code Issues Projects Releases Wiki Activity

'Update app properties in runtime' UIExplorer demo

Browse Source 
Reviewed By: javache

Differential Revision: D2615815

fb-gh-sync-id: 557ce1b2bc76360fe19a0893e0f317c09b685e23
This commit is contained in:
Pawel Sienkowski 2015-11-12 11:39:05 -08:00 committed by facebook-github-bot-2
parent eae91cc680
commit f1712b0cc3
9 changed files with 270 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
Examples/UIExplorer/RCTRootViewIOSExample.js Normal file
View File

@ -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 />
);
},
}];

43
Examples/UIExplorer/SetPropertiesExampleApp.js Normal file
View File

@ -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;

14
Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj
View File

@ -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 */,
);

4
Examples/UIExplorer/UIExplorer/AppDelegate.h
View File

@ -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

6
Examples/UIExplorer/UIExplorer/AppDelegate.m
View File

@ -26,10 +26,10 @@
- (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];

20
Examples/UIExplorer/UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.h Normal file
View File

@ -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

94
Examples/UIExplorer/UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.m Normal file
View File

@ -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

23
Examples/UIExplorer/UIExplorerApp.ios.js
View File

@ -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();

1
Examples/UIExplorer/UIExplorerList.ios.js
View File

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