53 |
54 | ## Animation Example Set
55 |
56 | - `Animated.Value` `this.props.open` passed in from parent
57 | - `interpolate` works with string "shapes," e.g. `'rgb(0, 0, 255)'`, `'45deg'`
58 | - Examples easily composed as separate components
59 | - Dismissing tracks interpolated gesture
60 | - Custom release logic
61 |
62 |
63 |
64 |
65 | ## Tilting Photo
66 |
67 | - Pan -> translateX * 2, rotate, opacity (via tracking)
68 | - Gesture release triggers separate animations
69 | - `addListener` for async, arbitrary logic on animation progress
70 | - `interpolate` easily creates parallax and other effects
71 |
72 |
73 |
74 | ## Bobbles
75 |
76 | - Static positions defined
77 | - Listens to events to maybe change selection
78 | - Springs previous selection back
79 | - New selection tracks selector
80 | - `getTranslateTransform` adds convenience
81 |
82 |
83 |
84 | ## Chained
85 |
86 | - Classic "Chat Heads" animation
87 | - Each sticker tracks the one before it with a soft spring
88 | - `decay` maintains gesture velocity, followed by `spring` to home
89 | - `stopAnimation` provides the last value for `setOffset`
90 |
91 |
92 |
93 | ## Scrolling
94 |
95 | - `Animated.event` can track all sorts of stuff
96 | - Multi-part ranges and extrapolation options
97 | - Transforms decompose into ordered components
98 |
99 |
100 |
101 | # React Native: Animated
102 |
103 | - Landing soon in master (days)
104 | - GitHub: @vjeux, @sahrens
105 | - Questions?
106 |
107 |
108 |
--------------------------------------------------------------------------------
/UIExplorerUnitTests/LayoutSubviewsOrderingTest.m:
--------------------------------------------------------------------------------
1 | // Copyright 2004-present Facebook. All Rights Reserved.
2 |
3 | #import
4 | #import
5 |
6 | #import
7 |
8 | @interface LayoutSubviewsOrderingTest : XCTestCase
9 |
10 | @end
11 |
12 | @implementation LayoutSubviewsOrderingTest
13 |
14 | /**
15 | * This test exists to insure that didLayoutSubviews is always called immediately after layoutSubviews for a VC:View
16 | * pair. In Catalyst we have multiple levels of ViewController containment, and we rely on this ordering
17 | * to insure that layoutGuides are set on RKViewControllers before Views further down in the heirarchy have
18 | * their layoutSubviews called (and need to use the aforementioned layoutGuides)
19 | */
20 | - (void)testLayoutSubviewsOrdering
21 | {
22 | // create some Views and ViewControllers
23 | UIViewController *parentVC = [[UIViewController alloc] init];
24 | UIView *parentView = [[UIView alloc] init];
25 | UIViewController *childVC = [[UIViewController alloc] init];
26 | UIView *childView = [[UIView alloc] init];
27 |
28 | // The ordering we expect is:
29 | // parentView::layoutSubviews
30 | // parentVC::didLayoutSubviews
31 | // childView::layoutSubviews
32 | // childVC::didLayoutSubviews
33 |
34 | id parentViewMock = [OCMockObject partialMockForObject:parentView];
35 | id parentVCMock = [OCMockObject partialMockForObject:parentVC];
36 | id childViewMock = [OCMockObject partialMockForObject:childView];
37 | id childVCMock = [OCMockObject partialMockForObject:childVC];
38 |
39 | __block int layoutOrderCount = 0;
40 | [[[parentViewMock stub] andDo:^(NSInvocation *inv) {
41 | if (layoutOrderCount < 4) {
42 | layoutOrderCount++;
43 | XCTAssertEqual(layoutOrderCount, 1, @"Expect parentView::layoutSubviews to be called first");
44 | }
45 | }] layoutSubviews];
46 | [[[parentVCMock stub] andDo:^(NSInvocation *inv) {
47 | if (layoutOrderCount < 4) {
48 | layoutOrderCount++;
49 | XCTAssertEqual(layoutOrderCount, 2, @"Expect parentVC::viewDidLayoutSubviews to be called 2nd");
50 | }
51 | }] viewDidLayoutSubviews];
52 | [[[childViewMock stub] andDo:^(NSInvocation *inv) {
53 | if (layoutOrderCount < 4) {
54 | layoutOrderCount++;
55 | XCTAssertEqual(layoutOrderCount, 3, @"Expect childView::layoutSubviews to be called 3rd");
56 | }
57 | }] layoutSubviews];
58 | [[[childVCMock stub] andDo:^(NSInvocation *inv) {
59 | if (layoutOrderCount < 4) {
60 | layoutOrderCount++;
61 | XCTAssertEqual(layoutOrderCount, 4, @"Expect childVC::viewDidLayoutSubviews to be called last");
62 | [childVCMock stopMocking];
63 | }
64 | }] viewDidLayoutSubviews];
65 |
66 | // setup View heirarchy and force layout
67 | parentVC.view = parentView;
68 | childVC.view = childView;
69 | [parentVC addChildViewController:childVC];
70 | [childVC didMoveToParentViewController:parentVC];
71 | [parentView addSubview:childView];
72 |
73 | [childViewMock setNeedsLayout];
74 | [parentViewMock layoutIfNeeded];
75 |
76 | XCTAssertEqual(layoutOrderCount, 4, @"Expect layoutSubviews/viewDidLayoutSubviews to be called");
77 | }
78 |
79 | @end
80 |
--------------------------------------------------------------------------------
/ScrollableTabViewExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author brentvatne
3 | * @github https://github.com/brentvatne/react-native-scrollable-tab-view
4 | * @name CustomTabBar
5 | * @added marsprince
6 | */
7 | 'use strict';
8 |
9 | var Platform = require('Platform');
10 | var React = require('react-native');
11 | var ScrollableTabView = require('react-native-scrollable-tab-view');
12 | var CustomTabBar=require('./components/CustomTabBar');
13 | var {
14 | StyleSheet,
15 | Text,
16 | View,
17 | ScrollView,
18 | } = React;
19 | var deviceWidth = require('Dimensions').get('window').width;
20 |
21 | var ScrollableTabViewExample = React.createClass({
22 | render() {
23 | return (
24 |
25 | }>
26 |
27 |
28 | News
29 |
30 |
31 |
32 |
33 | Friends
34 |
35 |
36 |
37 |
38 | Messenger
39 |
40 |
41 |
42 |
43 | Notifications
44 |
45 |
46 |
47 |
48 | Other nav
49 |
50 |
51 |
52 |
53 | );
54 | }
55 | });
56 |
57 | exports.title = '';
58 | exports.description = 'ScrollableTabView ' +
59 | 'show different pages.';
60 |
61 | exports.displayName = 'ScrollableTabView Example';
62 | exports.examples = [
63 | {
64 | title: 'Basic ScrollableTabView ',
65 | render: function() {
66 | return (
67 |
68 |
69 | );
70 | },
71 | },
72 | ];
73 | var styles = StyleSheet.create({
74 | container: {
75 | flex: 1,
76 | marginTop: 30,
77 | },
78 | tabView: {
79 | width: deviceWidth,
80 | padding: 10,
81 | backgroundColor: 'rgba(0,0,0,0.01)',
82 | },
83 | card: {
84 | borderWidth: 1,
85 | backgroundColor: '#fff',
86 | borderColor: 'rgba(0,0,0,0.1)',
87 | margin: 5,
88 | height: 150,
89 | padding: 15,
90 | shadowColor: '#ccc',
91 | shadowOffset: {width: 2, height: 2},
92 | shadowOpacity: 0.5,
93 | shadowRadius: 3,
94 | },
95 | });
96 |
--------------------------------------------------------------------------------
/AppStateIOSExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @providesModule AppStateIOSExample
15 | * @flow
16 | */
17 | 'use strict';
18 |
19 | var React = require('react-native');
20 | var {
21 | AppStateIOS,
22 | Text,
23 | View
24 | } = React;
25 |
26 | var AppStateSubscription = React.createClass({
27 | getInitialState() {
28 | return {
29 | appState: AppStateIOS.currentState,
30 | previousAppStates: [],
31 | memoryWarnings: 0,
32 | };
33 | },
34 | componentDidMount: function() {
35 | AppStateIOS.addEventListener('change', this._handleAppStateChange);
36 | AppStateIOS.addEventListener('memoryWarning', this._handleMemoryWarning);
37 | },
38 | componentWillUnmount: function() {
39 | AppStateIOS.removeEventListener('change', this._handleAppStateChange);
40 | AppStateIOS.removeEventListener('memoryWarning', this._handleMemoryWarning);
41 | },
42 | _handleMemoryWarning: function() {
43 | this.setState({memoryWarnings: this.state.memoryWarnings + 1})
44 | },
45 | _handleAppStateChange: function(appState) {
46 | var previousAppStates = this.state.previousAppStates.slice();
47 | previousAppStates.push(this.state.appState);
48 | this.setState({
49 | appState,
50 | previousAppStates,
51 | });
52 | },
53 | render() {
54 | if (this.props.showMemoryWarnings) {
55 | return (
56 |
57 | {this.state.memoryWarnings}
58 |
59 | );
60 | }
61 | if (this.props.showCurrentOnly) {
62 | return (
63 |
64 | {this.state.appState}
65 |
66 | );
67 | }
68 | return (
69 |
70 | {JSON.stringify(this.state.previousAppStates)}
71 |
72 | );
73 | }
74 | });
75 |
76 | exports.title = 'AppStateIOS';
77 | exports.description = 'iOS app background status';
78 | exports.examples = [
79 | {
80 | title: 'AppStateIOS.currentState',
81 | description: 'Can be null on app initialization',
82 | render() { return {AppStateIOS.currentState}; }
83 | },
84 | {
85 | title: 'Subscribed AppStateIOS:',
86 | description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
87 | render(): ReactElement { return ; }
88 | },
89 | {
90 | title: 'Previous states:',
91 | render(): ReactElement { return ; }
92 | },
93 | {
94 | title: 'Memory Warnings',
95 | description: "In the simulator, hit Shift+Command+M to simulate a memory warning.",
96 | render(): ReactElement { return ; }
97 | },
98 | ];
99 |
--------------------------------------------------------------------------------
/ActionSheetIOSExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | ActionSheetIOS,
21 | StyleSheet,
22 | Text,
23 | View,
24 | } = React;
25 |
26 | var BUTTONS = [
27 | 'Button Index: 0',
28 | 'Button Index: 1',
29 | 'Button Index: 2',
30 | 'Destruct',
31 | 'Cancel',
32 | ];
33 | var DESTRUCTIVE_INDEX = 3;
34 | var CANCEL_INDEX = 4;
35 |
36 | var ActionSheetExample = React.createClass({
37 | getInitialState() {
38 | return {
39 | clicked: 'none',
40 | };
41 | },
42 |
43 | render() {
44 | return (
45 |
46 |
47 | Click to show the ActionSheet
48 |
49 |
50 | Clicked button at index: "{this.state.clicked}"
51 |
52 |
53 | );
54 | },
55 |
56 | showActionSheet() {
57 | ActionSheetIOS.showActionSheetWithOptions({
58 | options: BUTTONS,
59 | cancelButtonIndex: CANCEL_INDEX,
60 | destructiveButtonIndex: DESTRUCTIVE_INDEX,
61 | },
62 | (buttonIndex) => {
63 | this.setState({ clicked: BUTTONS[buttonIndex] });
64 | });
65 | }
66 | });
67 |
68 | var ShareActionSheetExample = React.createClass({
69 | getInitialState() {
70 | return {
71 | text: ''
72 | };
73 | },
74 |
75 | render() {
76 | return (
77 |
78 |
79 | Click to show the Share ActionSheet
80 |
81 |
82 | {this.state.text}
83 |
84 |
85 | );
86 | },
87 |
88 | showShareActionSheet() {
89 | ActionSheetIOS.showShareActionSheetWithOptions({
90 | url: 'https://code.facebook.com',
91 | },
92 | (error) => {
93 | console.error(error);
94 | },
95 | (success, method) => {
96 | var text;
97 | if (success) {
98 | text = `Shared via ${method}`;
99 | } else {
100 | text = 'You didn\'t share';
101 | }
102 | this.setState({text})
103 | });
104 | }
105 | });
106 |
107 | var style = StyleSheet.create({
108 | button: {
109 | marginBottom: 10,
110 | fontWeight: '500',
111 | }
112 | });
113 |
114 | exports.title = 'ActionSheetIOS';
115 | exports.description = 'Interface to show iOS\' action sheets';
116 | exports.examples = [
117 | {
118 | title: 'Show Action Sheet',
119 | render(): ReactElement { return ; }
120 | },
121 | {
122 | title: 'Show Share Action Sheet',
123 | render(): ReactElement { return ; }
124 | }
125 | ];
126 |
--------------------------------------------------------------------------------
/UIExplorer/AppDelegate.m:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | */
14 |
15 | #import "AppDelegate.h"
16 |
17 | #import "RCTBridge.h"
18 | #import "RCTJavaScriptLoader.h"
19 | #import "RCTRootView.h"
20 |
21 | @interface AppDelegate()
22 |
23 | @end
24 |
25 | @implementation AppDelegate
26 |
27 | - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
28 | {
29 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self
30 | launchOptions:launchOptions];
31 |
32 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
33 | moduleName:@"UIExplorerApp"
34 | initialProperties:nil];
35 |
36 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
37 | UIViewController *rootViewController = [UIViewController new];
38 | rootViewController.view = rootView;
39 | self.window.rootViewController = rootViewController;
40 | [self.window makeKeyAndVisible];
41 | return YES;
42 | }
43 |
44 | - (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge
45 | {
46 | NSURL *sourceURL;
47 |
48 | /**
49 | * Loading JavaScript code - uncomment the one you want.
50 | *
51 | * OPTION 1
52 | * Load from development server. Start the server from the repository root:
53 | *
54 | * $ npm start
55 | *
56 | * To run on device, change `localhost` to the IP address of your computer
57 | * (you can get this by typing `ifconfig` into the terminal and selecting the
58 | * `inet` value under `en0:`) and make sure your computer and iOS device are
59 | * on the same Wi-Fi network.
60 | */
61 |
62 | sourceURL = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle?platform=ios&dev=true"];
63 |
64 | /**
65 | * OPTION 2
66 | * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
67 | * to your Xcode project folder and run
68 | *
69 | * $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle' -o main.jsbundle
70 | *
71 | * then add the `main.jsbundle` file to your project and uncomment this line:
72 | */
73 |
74 | // sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
75 |
76 | #if RUNNING_ON_CI
77 | sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
78 | #endif
79 |
80 | return sourceURL;
81 | }
82 |
83 | - (void)loadSourceForBridge:(RCTBridge *)bridge
84 | withBlock:(RCTSourceLoadBlock)loadCallback
85 | {
86 | [RCTJavaScriptLoader loadBundleAtURL:[self sourceURLForBridge:bridge]
87 | onComplete:loadCallback];
88 | }
89 |
90 | @end
91 |
--------------------------------------------------------------------------------
/createExamplePage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @providesModule createExamplePage
15 | * @flow
16 | */
17 | 'use strict';
18 |
19 | var React = require('react-native');
20 | var {
21 | Platform,
22 | } = React;
23 | var ReactNative = require('ReactNative');
24 | var UIExplorerBlock = require('./UIExplorerBlock');
25 | var UIExplorerPage = require('./UIExplorerPage');
26 |
27 | var invariant = require('invariant');
28 |
29 | import type { Example, ExampleModule } from 'ExampleTypes';
30 |
31 | var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
32 | : ReactClass {
33 | invariant(!!exampleModule.examples, 'The module must have examples');
34 |
35 | var ExamplePage = React.createClass({
36 | statics: {
37 | title: exampleModule.title,
38 | description: exampleModule.description,
39 | },
40 |
41 | getBlock: function(example: Example, i) {
42 | if (example.platform) {
43 | if (Platform.OS !== example.platform) {
44 | return;
45 | }
46 | example.title += ' (' + example.platform + ' only)';
47 | }
48 | // Hack warning: This is a hack because the www UI explorer requires
49 | // renderComponent to be called.
50 | var originalRender = React.render;
51 | var originalRenderComponent = React.renderComponent;
52 | var originalIOSRender = ReactNative.render;
53 | var originalIOSRenderComponent = ReactNative.renderComponent;
54 | var renderedComponent;
55 | // TODO remove typecasts when Flow bug #6560135 is fixed
56 | // and workaround is removed from react-native.js
57 | (React: Object).render =
58 | (React: Object).renderComponent =
59 | (ReactNative: Object).render =
60 | (ReactNative: Object).renderComponent =
61 | function(element, container) {
62 | renderedComponent = element;
63 | };
64 | var result = example.render(null);
65 | if (result) {
66 | renderedComponent = React.cloneElement(result, {
67 | navigator: this.props.navigator,
68 | });
69 | }
70 | (React: Object).render = originalRender;
71 | (React: Object).renderComponent = originalRenderComponent;
72 | (ReactNative: Object).render = originalIOSRender;
73 | (ReactNative: Object).renderComponent = originalIOSRenderComponent;
74 | return (
75 |
79 | {renderedComponent}
80 |
81 | );
82 | },
83 |
84 | render: function() {
85 | return (
86 |
87 | {exampleModule.examples.map(this.getBlock)}
88 |
89 | );
90 | }
91 | });
92 |
93 | return ExamplePage;
94 | };
95 |
96 | module.exports = createExamplePage;
97 |
--------------------------------------------------------------------------------
/UIExplorerUnitTests/RCTConvert_NSURLTests.m:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | */
14 |
15 | #import
16 |
17 | #import "RCTConvert.h"
18 | #import "RCTUtils.h"
19 |
20 | @interface RCTConvert_NSURLTests : XCTestCase
21 |
22 | @end
23 |
24 | @implementation RCTConvert_NSURLTests
25 |
26 | #define TEST_URL(name, _input, _expectedURL) \
27 | - (void)test_##name { \
28 | NSURL *result = [RCTConvert NSURL:_input]; \
29 | XCTAssertEqualObjects(result.absoluteString, _expectedURL); \
30 | } \
31 |
32 | #define TEST_PATH(name, _input, _expectedPath) \
33 | - (void)test_##name { \
34 | NSURL *result = [RCTConvert NSURL:_input]; \
35 | XCTAssertEqualObjects(result.path, _expectedPath); \
36 | } \
37 |
38 | #define TEST_BUNDLE_PATH(name, _input, _expectedPath) \
39 | TEST_PATH(name, _input, [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:_expectedPath])
40 |
41 | // Basic tests
42 | TEST_URL(basic, @"http://example.com", @"http://example.com")
43 | TEST_URL(null, (id)kCFNull, nil)
44 |
45 | // Resource files
46 | TEST_PATH(fileURL, @"file:///blah/hello.jsbundle", @"/blah/hello.jsbundle")
47 | TEST_BUNDLE_PATH(filePath, @"blah/hello.jsbundle", @"blah/hello.jsbundle")
48 | TEST_BUNDLE_PATH(filePathWithSpaces, @"blah blah/hello.jsbundle", @"blah blah/hello.jsbundle")
49 | TEST_BUNDLE_PATH(filePathWithEncodedSpaces, @"blah%20blah/hello.jsbundle", @"blah blah/hello.jsbundle")
50 | TEST_BUNDLE_PATH(imageAt2XPath, @"images/foo@2x.jpg", @"images/foo@2x.jpg")
51 | TEST_BUNDLE_PATH(imageFile, @"foo.jpg", @"foo.jpg")
52 |
53 | // User documents
54 | TEST_PATH(documentsFolder, @"~/Documents",
55 | [NSSearchPathForDirectoriesInDomains
56 | (NSDocumentDirectory, NSUserDomainMask, YES) firstObject])
57 |
58 | // Remote files
59 | TEST_URL(fullURL, @"http://example.com/blah/hello.jsbundle", @"http://example.com/blah/hello.jsbundle")
60 | TEST_URL(urlWithSpaces, @"http://example.com/blah blah/foo", @"http://example.com/blah%20blah/foo")
61 | TEST_URL(urlWithEncodedSpaces, @"http://example.com/blah%20blah/foo", @"http://example.com/blah%20blah/foo")
62 | TEST_URL(imageURL, @"http://example.com/foo@2x.jpg", @"http://example.com/foo@2x.jpg")
63 | TEST_URL(imageURLWithSpaces, @"http://example.com/blah foo@2x.jpg", @"http://example.com/blah%20foo@2x.jpg")
64 |
65 | // Unicode
66 | TEST_URL(unicodeURL,
67 | @"https://ru.wikipedia.org/wiki/\u0417\u0430\u0433\u043B\u0430\u0432"
68 | "\u043D\u0430\u044F_\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
69 | @"https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B3%D0%BB%D0%B0%D0%B2"
70 | "%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0")
71 |
72 | // Data URLs
73 | - (void)testDataURL
74 | {
75 | NSURL *expectedURL = RCTDataURL(@"text/plain", [@"abcde" dataUsingEncoding:NSUTF8StringEncoding]);
76 | NSURL *testURL = [NSURL URLWithString:@"data:text/plain;base64,YWJjZGU="];
77 | XCTAssertEqualObjects([testURL absoluteString], [expectedURL absoluteString]);
78 | }
79 |
80 | @end
81 |
--------------------------------------------------------------------------------
/UIExplorerUnitTests/RCTImageLoaderHelpers.m:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | */
14 |
15 | #import "RCTImageLoaderHelpers.h"
16 |
17 | @implementation RCTConcreteImageURLLoader
18 | {
19 | RCTImageURLLoaderCanLoadImageURLHandler _canLoadImageURLHandler;
20 | RCTImageURLLoaderLoadImageURLHandler _loadImageURLHandler;
21 | float _priority;
22 | }
23 |
24 | + (NSString *)moduleName
25 | {
26 | return nil;
27 | }
28 |
29 | - (instancetype)init
30 | {
31 | return nil;
32 | }
33 |
34 | - (instancetype)initWithPriority:(float)priority canLoadImageURLHandler:(RCTImageURLLoaderCanLoadImageURLHandler)canLoadImageURLHandler loadImageURLHandler:(RCTImageURLLoaderLoadImageURLHandler)loadImageURLHandler
35 | {
36 | if ((self = [super init])) {
37 | _canLoadImageURLHandler = [canLoadImageURLHandler copy];
38 | _loadImageURLHandler = [loadImageURLHandler copy];
39 | _priority = priority;
40 | }
41 |
42 | return self;
43 | }
44 |
45 | - (BOOL)canLoadImageURL:(NSURL *)requestURL
46 | {
47 | return _canLoadImageURLHandler(requestURL);
48 | }
49 |
50 | - (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL size:(CGSize)size scale:(CGFloat)scale resizeMode:(UIViewContentMode)resizeMode progressHandler:(RCTImageLoaderProgressBlock)progressHandler completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
51 | {
52 | return _loadImageURLHandler(imageURL, size, scale, resizeMode, progressHandler, completionHandler);
53 | }
54 |
55 | - (float)imageLoaderPriority
56 | {
57 | return _priority;
58 | }
59 |
60 | @end
61 |
62 | @implementation RCTConcreteImageDecoder
63 | {
64 | RCTImageDecoderCanDecodeImageDataHandler _canDecodeImageDataHandler;
65 | RCTImageDecoderDecodeImageDataHandler _decodeImageDataHandler;
66 | float _priority;
67 | }
68 |
69 | + (NSString *)moduleName
70 | {
71 | return nil;
72 | }
73 |
74 | - (instancetype)init
75 | {
76 | return nil;
77 | }
78 |
79 | - (instancetype)initWithPriority:(float)priority canDecodeImageDataHandler:(RCTImageDecoderCanDecodeImageDataHandler)canDecodeImageDataHandler decodeImageDataHandler:(RCTImageDecoderDecodeImageDataHandler)decodeImageDataHandler
80 | {
81 | if ((self = [super init])) {
82 | _canDecodeImageDataHandler = [canDecodeImageDataHandler copy];
83 | _decodeImageDataHandler = [decodeImageDataHandler copy];
84 | _priority = priority;
85 | }
86 |
87 | return self;
88 | }
89 |
90 | - (BOOL)canDecodeImageData:(NSData *)imageData
91 | {
92 | return _canDecodeImageDataHandler(imageData);
93 | }
94 |
95 | - (RCTImageLoaderCancellationBlock)decodeImageData:(NSData *)imageData size:(CGSize)size scale:(CGFloat)scale resizeMode:(UIViewContentMode)resizeMode completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
96 | {
97 | return _decodeImageDataHandler(imageData, size, scale, resizeMode, completionHandler);
98 | }
99 |
100 | - (float)imageDecoderPriority
101 | {
102 | return _priority;
103 | }
104 |
105 | @end
106 |
--------------------------------------------------------------------------------
/UIExplorer/Base.lproj/LaunchScreen.xib:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
20 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/ios/UIExplorerApp/Base.lproj/LaunchScreen.xib:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
21 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/AsyncStorageExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | AsyncStorage,
21 | PickerIOS,
22 | Text,
23 | View
24 | } = React;
25 | var PickerItemIOS = PickerIOS.Item;
26 |
27 | var STORAGE_KEY = '@AsyncStorageExample:key';
28 | var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
29 |
30 | var BasicStorageExample = React.createClass({
31 | componentDidMount() {
32 | this._loadInitialState().done();
33 | },
34 |
35 | async _loadInitialState() {
36 | try {
37 | var value = await AsyncStorage.getItem(STORAGE_KEY);
38 | if (value !== null){
39 | this.setState({selectedValue: value});
40 | this._appendMessage('Recovered selection from disk: ' + value);
41 | } else {
42 | this._appendMessage('Initialized with no selection on disk.');
43 | }
44 | } catch (error) {
45 | this._appendMessage('AsyncStorage error: ' + error.message);
46 | }
47 | },
48 |
49 | getInitialState() {
50 | return {
51 | selectedValue: COLORS[0],
52 | messages: [],
53 | };
54 | },
55 |
56 | render() {
57 | var color = this.state.selectedValue;
58 | return (
59 |
60 |
63 | {COLORS.map((value) => (
64 |
69 | ))}
70 |
71 |
72 | {'Selected: '}
73 |
74 | {this.state.selectedValue}
75 |
76 |
77 | {' '}
78 |
79 | Press here to remove from storage.
80 |
81 | {' '}
82 | Messages:
83 | {this.state.messages.map((m) => {m})}
84 |
85 | );
86 | },
87 |
88 | async _onValueChange(selectedValue) {
89 | this.setState({selectedValue});
90 | try {
91 | await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
92 | this._appendMessage('Saved selection to disk: ' + selectedValue);
93 | } catch (error) {
94 | this._appendMessage('AsyncStorage error: ' + error.message);
95 | }
96 | },
97 |
98 | async _removeStorage() {
99 | try {
100 | await AsyncStorage.removeItem(STORAGE_KEY);
101 | this._appendMessage('Selection removed from disk.');
102 | } catch (error) {
103 | this._appendMessage('AsyncStorage error: ' + error.message);
104 | }
105 | },
106 |
107 | _appendMessage(message) {
108 | this.setState({messages: this.state.messages.concat(message)});
109 | },
110 | });
111 |
112 | exports.title = 'AsyncStorage';
113 | exports.description = 'Asynchronous local disk storage.';
114 | exports.examples = [
115 | {
116 | title: 'Basics - getItem, setItem, removeItem',
117 | render(): ReactElement { return ; }
118 | },
119 | ];
120 |
--------------------------------------------------------------------------------
/StatusBarIOSExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | StyleSheet,
21 | View,
22 | Text,
23 | TouchableHighlight,
24 | StatusBarIOS,
25 | } = React;
26 |
27 | exports.framework = 'React';
28 | exports.title = 'StatusBarIOS';
29 | exports.description = 'Module for controlling iOS status bar';
30 | exports.examples = [{
31 | title: 'Status Bar Style',
32 | render() {
33 | return (
34 |
35 | {['default', 'light-content'].map((style) =>
36 | StatusBarIOS.setStyle(style)}>
38 |
39 | setStyle('{style}')
40 |
41 |
42 | )}
43 |
44 | );
45 | },
46 | }, {
47 | title: 'Status Bar Style Animated',
48 | render() {
49 | return (
50 |
51 | {['default', 'light-content'].map((style) =>
52 | StatusBarIOS.setStyle(style, true)}>
54 |
55 | setStyle('{style}', true)
56 |
57 |
58 | )}
59 |
60 | );
61 | },
62 | }, {
63 | title: 'Status Bar Hidden',
64 | render() {
65 | return (
66 |
67 | {['none', 'fade', 'slide'].map((animation) =>
68 |
69 | StatusBarIOS.setHidden(true, animation)}>
71 |
72 | setHidden(true, '{animation}')
73 |
74 |
75 | StatusBarIOS.setHidden(false, animation)}>
77 |
78 | setHidden(false, '{animation}')
79 |
80 |
81 |
82 | )}
83 |
84 | );
85 | },
86 | }, {
87 | title: 'Status Bar Network Activity Indicator',
88 | render() {
89 | return (
90 |
91 | StatusBarIOS.setNetworkActivityIndicatorVisible(true)}>
93 |
94 | setNetworkActivityIndicatorVisible(true)
95 |
96 |
97 | StatusBarIOS.setNetworkActivityIndicatorVisible(false)}>
99 |
100 | setNetworkActivityIndicatorVisible(false)
101 |
102 |
103 |
104 | );
105 | },
106 | }];
107 |
108 | var styles = StyleSheet.create({
109 | wrapper: {
110 | borderRadius: 5,
111 | marginBottom: 5,
112 | },
113 | button: {
114 | backgroundColor: '#eeeeee',
115 | padding: 10,
116 | },
117 | });
118 |
--------------------------------------------------------------------------------
/AnimatedGratuitousApp/AnExScroll.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @providesModule AnExScroll
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | Animated,
21 | Image,
22 | ScrollView,
23 | StyleSheet,
24 | Text,
25 | View,
26 | } = React;
27 |
28 | class AnExScroll extends React.Component {
29 | constructor(props) {
30 | super(props);
31 | this.state = {
32 | scrollX: new Animated.Value(0),
33 | };
34 | }
35 |
36 | render() {
37 | var width = this.props.panelWidth;
38 | return (
39 |
40 |
49 |
50 |
54 |
55 | {'I\'ll find something to put here.'}
56 |
57 |
58 |
59 | {'And here.'}
60 |
61 |
62 | {'But not here.'}
63 |
64 |
65 |
83 |
84 | );
85 | }
86 | }
87 |
88 | var styles = StyleSheet.create({
89 | container: {
90 | backgroundColor: 'transparent',
91 | flex: 1,
92 | },
93 | text: {
94 | padding: 4,
95 | paddingBottom: 10,
96 | fontWeight: 'bold',
97 | fontSize: 18,
98 | backgroundColor: 'transparent',
99 | },
100 | bunny: {
101 | backgroundColor: 'transparent',
102 | position: 'absolute',
103 | height: 160,
104 | width: 160,
105 | },
106 | page: {
107 | alignItems: 'center',
108 | justifyContent: 'flex-end',
109 | },
110 | });
111 |
112 | var HAWK_PIC = {uri: 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xfa1/t39.1997-6/10734304_1562225620659674_837511701_n.png'};
113 | var BUNNY_PIC = {uri: 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png'};
114 |
115 | module.exports = AnExScroll;
116 |
--------------------------------------------------------------------------------
/PickerIOSExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | PickerIOS,
21 | Text,
22 | View,
23 | } = React;
24 |
25 | var PickerItemIOS = PickerIOS.Item;
26 |
27 | var CAR_MAKES_AND_MODELS = {
28 | amc: {
29 | name: 'AMC',
30 | models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'],
31 | },
32 | alfa: {
33 | name: 'Alfa-Romeo',
34 | models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'],
35 | },
36 | aston: {
37 | name: 'Aston Martin',
38 | models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'],
39 | },
40 | audi: {
41 | name: 'Audi',
42 | models: ['90', '4000', '5000', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q5', 'Q7'],
43 | },
44 | austin: {
45 | name: 'Austin',
46 | models: ['America', 'Maestro', 'Maxi', 'Mini', 'Montego', 'Princess'],
47 | },
48 | borgward: {
49 | name: 'Borgward',
50 | models: ['Hansa', 'Isabella', 'P100'],
51 | },
52 | buick: {
53 | name: 'Buick',
54 | models: ['Electra', 'LaCrosse', 'LeSabre', 'Park Avenue', 'Regal',
55 | 'Roadmaster', 'Skylark'],
56 | },
57 | cadillac: {
58 | name: 'Cadillac',
59 | models: ['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville'],
60 | },
61 | chevrolet: {
62 | name: 'Chevrolet',
63 | models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle',
64 | 'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt'],
65 | },
66 | };
67 |
68 | var PickerExample = React.createClass({
69 | getInitialState: function() {
70 | return {
71 | carMake: 'cadillac',
72 | modelIndex: 3,
73 | };
74 | },
75 |
76 | render: function() {
77 | var make = CAR_MAKES_AND_MODELS[this.state.carMake];
78 | var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
79 | return (
80 |
81 | Please choose a make for your car:
82 | this.setState({carMake, modelIndex: 0})}>
85 | {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
86 |
91 | )
92 | )}
93 |
94 | Please choose a model of {make.name}:
95 | this.setState({modelIndex})}>
99 | {CAR_MAKES_AND_MODELS[this.state.carMake].models.map(
100 | (modelName, modelIndex) => (
101 |
106 | ))
107 | }
108 |
109 | You selected: {selectionString}
110 |
111 | );
112 | },
113 | });
114 |
115 | exports.displayName = (undefined: ?string);
116 | exports.title = '';
117 | exports.description = 'Render lists of selectable options with UIPickerView.';
118 | exports.examples = [
119 | {
120 | title: '',
121 | render: function(): ReactElement {
122 | return ;
123 | },
124 | }];
125 |
--------------------------------------------------------------------------------
/NetInfoExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | NetInfo,
21 | Text,
22 | View
23 | } = React;
24 |
25 | var ReachabilitySubscription = React.createClass({
26 | getInitialState() {
27 | return {
28 | reachabilityHistory: [],
29 | };
30 | },
31 | componentDidMount: function() {
32 | NetInfo.addEventListener(
33 | 'change',
34 | this._handleReachabilityChange
35 | );
36 | },
37 | componentWillUnmount: function() {
38 | NetInfo.removeEventListener(
39 | 'change',
40 | this._handleReachabilityChange
41 | );
42 | },
43 | _handleReachabilityChange: function(reachability) {
44 | var reachabilityHistory = this.state.reachabilityHistory.slice();
45 | reachabilityHistory.push(reachability);
46 | this.setState({
47 | reachabilityHistory,
48 | });
49 | },
50 | render() {
51 | return (
52 |
53 | {JSON.stringify(this.state.reachabilityHistory)}
54 |
55 | );
56 | }
57 | });
58 |
59 | var ReachabilityCurrent = React.createClass({
60 | getInitialState() {
61 | return {
62 | reachability: null,
63 | };
64 | },
65 | componentDidMount: function() {
66 | NetInfo.addEventListener(
67 | 'change',
68 | this._handleReachabilityChange
69 | );
70 | NetInfo.fetch().done(
71 | (reachability) => { this.setState({reachability}); }
72 | );
73 | },
74 | componentWillUnmount: function() {
75 | NetInfo.removeEventListener(
76 | 'change',
77 | this._handleReachabilityChange
78 | );
79 | },
80 | _handleReachabilityChange: function(reachability) {
81 | this.setState({
82 | reachability,
83 | });
84 | },
85 | render() {
86 | return (
87 |
88 | {this.state.reachability}
89 |
90 | );
91 | }
92 | });
93 |
94 | var IsConnected = React.createClass({
95 | getInitialState() {
96 | return {
97 | isConnected: null,
98 | };
99 | },
100 | componentDidMount: function() {
101 | NetInfo.isConnected.addEventListener(
102 | 'change',
103 | this._handleConnectivityChange
104 | );
105 | NetInfo.isConnected.fetch().done(
106 | (isConnected) => { this.setState({isConnected}); }
107 | );
108 | },
109 | componentWillUnmount: function() {
110 | NetInfo.isConnected.removeEventListener(
111 | 'change',
112 | this._handleConnectivityChange
113 | );
114 | },
115 | _handleConnectivityChange: function(isConnected) {
116 | this.setState({
117 | isConnected,
118 | });
119 | },
120 | render() {
121 | return (
122 |
123 | {this.state.isConnected ? 'Online' : 'Offline'}
124 |
125 | );
126 | }
127 | });
128 |
129 | exports.title = 'NetInfo';
130 | exports.description = 'Monitor network status';
131 | exports.examples = [
132 | {
133 | title: 'NetInfo.isConnected',
134 | description: 'Asynchronously load and observe connectivity',
135 | render(): ReactElement { return ; }
136 | },
137 | {
138 | title: 'NetInfo.reachabilityIOS',
139 | description: 'Asynchronously load and observe iOS reachability',
140 | render(): ReactElement { return ; }
141 | },
142 | {
143 | title: 'NetInfo.reachabilityIOS',
144 | description: 'Observed updates to iOS reachability',
145 | render(): ReactElement { return ; }
146 | },
147 | ];
148 |
--------------------------------------------------------------------------------
/CameraRollExample.ios.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | CameraRoll,
21 | Image,
22 | SliderIOS,
23 | StyleSheet,
24 | SwitchIOS,
25 | Text,
26 | View,
27 | TouchableOpacity
28 | } = React;
29 |
30 | var CameraRollView = require('./CameraRollView.ios');
31 | var AssetScaledImageExampleView = require('./AssetScaledImageExample');
32 |
33 | var CAMERA_ROLL_VIEW = 'camera_roll_view';
34 |
35 | var CameraRollExample = React.createClass({
36 |
37 | getInitialState() {
38 | return {
39 | groupTypes: 'SavedPhotos',
40 | sliderValue: 1,
41 | bigImages: true,
42 | };
43 | },
44 |
45 | render() {
46 | return (
47 |
48 |
51 | {(this.state.bigImages ? 'Big' : 'Small') + ' Images'}
52 |
56 | {'Group Type: ' + this.state.groupTypes}
57 |
63 |
64 | );
65 | },
66 |
67 | loadAsset(asset){
68 | this.props.navigator.push({
69 | title: 'Camera Roll Image',
70 | component: AssetScaledImageExampleView,
71 | backButtonTitle: 'Back',
72 | passProps: { asset: asset },
73 | });
74 | },
75 |
76 | _renderImage(asset) {
77 | var imageSize = this.state.bigImages ? 150 : 75;
78 | var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
79 | var location = asset.node.location.longitude ?
80 | JSON.stringify(asset.node.location) : 'Unknown location';
81 | return (
82 |
83 |
84 |
88 |
89 | {asset.node.image.uri}
90 | {location}
91 | {asset.node.group_name}
92 | {new Date(asset.node.timestamp).toString()}
93 |
94 |
95 |
96 | );
97 | },
98 |
99 | _onSliderChange(value) {
100 | var options = CameraRoll.GroupTypesOptions;
101 | var index = Math.floor(value * options.length * 0.99);
102 | var groupTypes = options[index];
103 | if (groupTypes !== this.state.groupTypes) {
104 | this.setState({groupTypes: groupTypes});
105 | }
106 | },
107 |
108 | _onSwitchChange(value) {
109 | this.refs[CAMERA_ROLL_VIEW].rendererChanged();
110 | this.setState({ bigImages: value });
111 | }
112 | });
113 |
114 | var styles = StyleSheet.create({
115 | row: {
116 | flexDirection: 'row',
117 | flex: 1,
118 | },
119 | url: {
120 | fontSize: 9,
121 | marginBottom: 14,
122 | },
123 | image: {
124 | margin: 4,
125 | },
126 | info: {
127 | flex: 1,
128 | },
129 | });
130 |
131 | exports.title = 'Camera Roll';
132 | exports.description = 'Example component that uses CameraRoll to list user\'s photos';
133 | exports.examples = [
134 | {
135 | title: 'Photos',
136 | render(): ReactElement { return ; }
137 | }
138 | ];
139 |
--------------------------------------------------------------------------------
/ResponderExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | StyleSheet,
21 | PanResponder,
22 | View,
23 | } = React;
24 |
25 | var CIRCLE_SIZE = 80;
26 | var CIRCLE_COLOR = 'blue';
27 | var CIRCLE_HIGHLIGHT_COLOR = 'green';
28 |
29 |
30 | var NavigatorIOSExample = React.createClass({
31 |
32 | statics: {
33 | title: 'PanResponder Sample',
34 | description: 'Basic gesture handling example',
35 | },
36 |
37 | _panResponder: {},
38 | _previousLeft: 0,
39 | _previousTop: 0,
40 | _circleStyles: {},
41 | circle: (null : ?{ setNativeProps(props: Object): void }),
42 |
43 | componentWillMount: function() {
44 | this._panResponder = PanResponder.create({
45 | onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
46 | onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
47 | onPanResponderGrant: this._handlePanResponderGrant,
48 | onPanResponderMove: this._handlePanResponderMove,
49 | onPanResponderRelease: this._handlePanResponderEnd,
50 | onPanResponderTerminate: this._handlePanResponderEnd,
51 | });
52 | this._previousLeft = 20;
53 | this._previousTop = 84;
54 | this._circleStyles = {
55 | left: this._previousLeft,
56 | top: this._previousTop,
57 | };
58 | },
59 |
60 | componentDidMount: function() {
61 | this._updatePosition();
62 | },
63 |
64 | render: function() {
65 | return (
66 |
68 | {
70 | this.circle = circle;
71 | }}
72 | style={styles.circle}
73 | {...this._panResponder.panHandlers}
74 | />
75 |
76 | );
77 | },
78 |
79 | _highlight: function() {
80 | this.circle && this.circle.setNativeProps({
81 | backgroundColor: CIRCLE_HIGHLIGHT_COLOR
82 | });
83 | },
84 |
85 | _unHighlight: function() {
86 | this.circle && this.circle.setNativeProps({
87 | backgroundColor: CIRCLE_COLOR
88 | });
89 | },
90 |
91 | _updatePosition: function() {
92 | this.circle && this.circle.setNativeProps(this._circleStyles);
93 | },
94 |
95 | _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
96 | // Should we become active when the user presses down on the circle?
97 | return true;
98 | },
99 |
100 | _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
101 | // Should we become active when the user moves a touch over the circle?
102 | return true;
103 | },
104 |
105 | _handlePanResponderGrant: function(e: Object, gestureState: Object) {
106 | this._highlight();
107 | },
108 | _handlePanResponderMove: function(e: Object, gestureState: Object) {
109 | this._circleStyles.left = this._previousLeft + gestureState.dx;
110 | this._circleStyles.top = this._previousTop + gestureState.dy;
111 | this._updatePosition();
112 | },
113 | _handlePanResponderEnd: function(e: Object, gestureState: Object) {
114 | this._unHighlight();
115 | this._previousLeft += gestureState.dx;
116 | this._previousTop += gestureState.dy;
117 | },
118 | });
119 |
120 | var styles = StyleSheet.create({
121 | circle: {
122 | width: CIRCLE_SIZE,
123 | height: CIRCLE_SIZE,
124 | borderRadius: CIRCLE_SIZE / 2,
125 | backgroundColor: CIRCLE_COLOR,
126 | position: 'absolute',
127 | left: 0,
128 | top: 0,
129 | },
130 | container: {
131 | flex: 1,
132 | paddingTop: 64,
133 | },
134 | });
135 |
136 | module.exports = NavigatorIOSExample;
137 |
--------------------------------------------------------------------------------
/PushNotificationIOSExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | AlertIOS,
21 | PushNotificationIOS,
22 | StyleSheet,
23 | Text,
24 | TouchableHighlight,
25 | View,
26 | } = React;
27 |
28 | var Button = React.createClass({
29 | render: function() {
30 | return (
31 |
35 |
36 | {this.props.label}
37 |
38 |
39 | );
40 | }
41 | });
42 |
43 | class NotificationExample extends React.Component {
44 | componentWillMount() {
45 | PushNotificationIOS.addEventListener('notification', this._onNotification);
46 | }
47 |
48 | componentWillUnmount() {
49 | PushNotificationIOS.removeEventListener('notification', this._onNotification);
50 | }
51 |
52 | render() {
53 | return (
54 |
55 |
59 |
60 | );
61 | }
62 |
63 | _sendNotification() {
64 | require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', {
65 | aps: {
66 | alert: 'Sample notification',
67 | badge: '+1',
68 | sound: 'default',
69 | category: 'REACT_NATIVE'
70 | },
71 | });
72 | }
73 |
74 | _onNotification(notification) {
75 | AlertIOS.alert(
76 | 'Notification Received',
77 | 'Alert message: ' + notification.getMessage(),
78 | [{
79 | text: 'Dismiss',
80 | onPress: null,
81 | }]
82 | );
83 | }
84 | }
85 |
86 | class NotificationPermissionExample extends React.Component {
87 | constructor(props) {
88 | super(props);
89 | this.state = {permissions: null};
90 | }
91 |
92 | render() {
93 | return (
94 |
95 |
99 |
100 | {JSON.stringify(this.state.permissions)}
101 |
102 |
103 | );
104 | }
105 |
106 | _showPermissions() {
107 | PushNotificationIOS.checkPermissions((permissions) => {
108 | this.setState({permissions});
109 | });
110 | }
111 | }
112 |
113 | var styles = StyleSheet.create({
114 | button: {
115 | padding: 10,
116 | alignItems: 'center',
117 | justifyContent: 'center',
118 | },
119 | buttonLabel: {
120 | color: 'blue',
121 | },
122 | });
123 |
124 | exports.title = 'PushNotificationIOS';
125 | exports.description = 'Apple PushNotification and badge value';
126 | exports.examples = [
127 | {
128 | title: 'Badge Number',
129 | render(): React.Component {
130 | PushNotificationIOS.requestPermissions();
131 |
132 | return (
133 |
134 |
143 | );
144 | },
145 | },
146 | {
147 | title: 'Push Notifications',
148 | render(): React.Component {
149 | return ;
150 | }
151 | },
152 | {
153 | title: 'Notifications Permissions',
154 | render(): React.Component {
155 | return ;
156 | }
157 | }];
158 |
--------------------------------------------------------------------------------
/UIExplorerUnitTests/RCTImageUtilTests.m:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | */
14 |
15 | #import
16 | #import
17 | #import
18 | #import
19 | #import "RCTImageUtils.h"
20 |
21 | #define RCTAssertEqualPoints(a, b) { \
22 | XCTAssertEqual(a.x, b.x); \
23 | XCTAssertEqual(a.y, b.y); \
24 | }
25 |
26 | #define RCTAssertEqualSizes(a, b) { \
27 | XCTAssertEqual(a.width, b.width); \
28 | XCTAssertEqual(a.height, b.height); \
29 | }
30 |
31 | #define RCTAssertEqualRects(a, b) { \
32 | RCTAssertEqualPoints(a.origin, b.origin); \
33 | RCTAssertEqualSizes(a.size, b.size); \
34 | }
35 |
36 | @interface RCTImageUtilTests : XCTestCase
37 |
38 | @end
39 |
40 | @implementation RCTImageUtilTests
41 |
42 | - (void)testLandscapeSourceLandscapeTarget
43 | {
44 | CGSize content = {1000, 100};
45 | CGSize target = {100, 20};
46 |
47 | {
48 | CGRect expected = {CGPointZero, {100, 20}};
49 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
50 | RCTAssertEqualRects(expected, result);
51 | }
52 |
53 | {
54 | CGRect expected = {CGPointZero, {100, 10}};
55 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
56 | RCTAssertEqualRects(expected, result);
57 | }
58 |
59 | {
60 | CGRect expected = {{-50, 0}, {200, 20}};
61 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
62 | RCTAssertEqualRects(expected, result);
63 | }
64 | }
65 |
66 | - (void)testPortraitSourceLandscapeTarget
67 | {
68 | CGSize content = {10, 100};
69 | CGSize target = {100, 20};
70 |
71 | {
72 | CGRect expected = {CGPointZero, {100, 20}};
73 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
74 | RCTAssertEqualRects(expected, result);
75 | }
76 |
77 | {
78 | CGRect expected = {CGPointZero, {2, 20}};
79 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
80 | RCTAssertEqualRects(expected, result);
81 | }
82 |
83 | {
84 | CGRect expected = {{0, -490}, {100, 1000}};
85 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
86 | RCTAssertEqualRects(expected, result);
87 | }
88 | }
89 |
90 | - (void)testPortraitSourcePortraitTarget
91 | {
92 | CGSize content = {10, 100};
93 | CGSize target = {20, 50};
94 |
95 | {
96 | CGRect expected = {CGPointZero, {20, 50}};
97 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
98 | RCTAssertEqualRects(expected, result);
99 | }
100 |
101 | {
102 | CGRect expected = {CGPointZero, {5, 50}};
103 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
104 | RCTAssertEqualRects(expected, result);
105 | }
106 |
107 | {
108 | CGRect expected = {{0, -75}, {20, 200}};
109 | CGRect result = RCTTargetRect(content, target, 2, UIViewContentModeScaleAspectFill);
110 | RCTAssertEqualRects(expected, result);
111 | }
112 | }
113 |
114 | - (void)testRounding
115 | {
116 | CGSize content = {10, 100};
117 | CGSize target = {20, 50};
118 |
119 | {
120 | CGRect expected = {{0, -75}, {20, 200}};
121 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
122 | RCTAssertEqualRects(expected, result);
123 | }
124 | }
125 |
126 | - (void)testScaling
127 | {
128 | CGSize content = {2, 2};
129 | CGSize target = {3, 3};
130 |
131 | CGRect expected = {CGPointZero, {3, 3}};
132 | CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
133 | RCTAssertEqualRects(expected, result);
134 | }
135 |
136 | @end
137 |
--------------------------------------------------------------------------------
/UIExplorerList.android.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The examples provided by Facebook are for non-commercial testing and
3 | * evaluation purposes only.
4 | *
5 | * Facebook reserves all rights not expressly granted.
6 | *
7 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
8 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
9 | * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
10 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
11 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
12 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
13 | *
14 | * @flow
15 | */
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | StyleSheet,
21 | View,
22 | } = React;
23 | var UIExplorerListBase = require('./UIExplorerListBase');
24 |
25 | var COMPONENTS = [
26 | /*
27 | * added by marsprince
28 | * @author facebook
29 | * */
30 | /*require('./AssetScaledImageExample'),*/
31 | /* require('./AsyncStorageExample'),*/
32 | /* require('./GeolocationExample'),*/
33 | /* require('./ImageCapInsetsExample'),*/
34 | /*require('./ImageEditingExample'),*/
35 | require('./ListViewExample'),
36 | require('./ListViewGridLayoutExample'),
37 | require('./ListViewPagingExample'),
38 | /* require('./MapViewExample'),*/
39 | /* require('./ModalExample.android'),*/
40 | /*require('./TransformExample'),*/
41 | /* require('./WebViewExample'),*/
42 |
43 | require('./ImageExample'),
44 | require('./ProgressBarAndroidExample'),
45 | require('./ScrollViewSimpleExample'),
46 | require('./SwitchAndroidExample'),
47 | require('./TextExample.android'),
48 | require('./TextInputExample.android'),
49 | require('./ToolbarAndroidExample'),
50 | require('./TouchableExample'),
51 | require('./ViewExample'),
52 | require('./ViewPagerAndroidExample.android'),
53 |
54 | require('./CustomTabBarExample'),/*dependencies:components/CustomTabBar*/
55 | require('./ScrollableTabViewExample'),/*dependencies:react-native-scrollable-tab-view*/
56 |
57 | ];
58 |
59 | var APIS = [
60 | /*
61 | * added by marsprince
62 | * @author facebook
63 | * */
64 | require('./AnimatedExample'),
65 | /* require('./NetInfoExample'),*/
66 | /* require('./ResponderExample'),*/
67 |
68 | require('./AccessibilityAndroidExample.android'),
69 | require('./BorderExample'),
70 | require('./LayoutEventsExample'),
71 | require('./LayoutExample'),
72 | require('./PanResponderExample'),
73 | require('./PointerEventsExample'),
74 | require('./TimerExample'),/*dependencies:react-timer-mixin*/
75 | require('./ToastAndroidExample.android'),
76 | require('./XHRExample'),
77 |
78 | ];
79 |
80 | type
81 | Props = {
82 | onSelectExample: Function,
83 | isInDrawer: bool,
84 | };
85 |
86 | class UIExplorerList extends React.Component {
87 | props:Props;
88 |
89 | render() {
90 | return (
91 |
98 | );
99 | }
100 |
101 | renderAdditionalView(renderRow, renderTextInput):React.Component {
102 | if (this.props.isInDrawer) {
103 | var homePage = renderRow({
104 | title: 'UIExplorer',
105 | description: 'List of examples',
106 | }, -1);
107 | return (
108 |
109 | {homePage}
110 |
111 | );
112 | }
113 | return renderTextInput(styles.searchTextInput);
114 | }
115 |
116 | onPressRow(example:any) {
117 | var Component = UIExplorerListBase.makeRenderable(example);
118 | this.props.onSelectExample({
119 | title: Component.title,
120 | component: Component,
121 | });
122 | }
123 | }
124 |
125 | var styles = StyleSheet.create({
126 | searchTextInput: {
127 | padding: 2,
128 | },
129 | });
130 |
131 | module.exports = UIExplorerList;
132 |
--------------------------------------------------------------------------------