4 |
5 | @implementation AppDelegate
6 |
7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
8 | {
9 | self.moduleName = @"ImprovedExample";
10 | // You can add your custom initial props in the dictionary below.
11 | // They will be passed down to the ViewController used by React Native.
12 | self.initialProps = @{};
13 |
14 | return [super application:application didFinishLaunchingWithOptions:launchOptions];
15 | }
16 |
17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
18 | {
19 | return [self getBundleURL];
20 | }
21 |
22 | - (NSURL *)getBundleURL
23 | {
24 | #if DEBUG
25 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
26 | #else
27 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
28 | #endif
29 | }
30 |
31 | @end
32 |
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/improvedexample/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.improvedexample
2 |
3 | import com.facebook.react.ReactActivity
4 | import com.facebook.react.ReactActivityDelegate
5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
6 | import com.facebook.react.defaults.DefaultReactActivityDelegate
7 |
8 | class MainActivity : ReactActivity() {
9 |
10 | /**
11 | * Returns the name of the main component registered from JavaScript. This is used to schedule
12 | * rendering of the component.
13 | */
14 | override fun getMainComponentName(): String = "ImprovedExample"
15 |
16 | /**
17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
19 | */
20 | override fun createReactActivityDelegate(): ReactActivityDelegate =
21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
22 | }
23 |
--------------------------------------------------------------------------------
/example/src/examples/MutationObserver/MutationObserverIndex.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict-local
8 | * @format
9 | */
10 |
11 | import * as MutationObserverExample from './MutationObserverExample';
12 | import * as VisualCompletionExample from './VisualCompletionExample/VisualCompletionExample';
13 |
14 | export const framework = 'React';
15 | export const title = 'MutationObserver';
16 | export const category = 'UI';
17 | export const documentationURL =
18 | 'https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver';
19 | export const description = 'API to detect mutations in React Native nodes.';
20 | export const showIndividualExamples = true;
21 | export const examples = [MutationObserverExample];
22 |
23 | if (typeof IntersectionObserver !== 'undefined') {
24 | examples.push(VisualCompletionExample);
25 | }
26 |
--------------------------------------------------------------------------------
/example/src/examples/IntersectionObserver/IntersectionObserverIndex.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @flow strict-local
8 | * @format
9 | */
10 |
11 | import * as IntersectionObserverMDNExample from './IntersectionObserverMDNExample';
12 | import * as IntersectionObserverBenchmark from './IntersectionObserverBenchmark';
13 |
14 | export const framework = 'React';
15 | export const title = 'IntersectionObserver';
16 | export const category = 'UI';
17 | export const documentationURL =
18 | 'https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API';
19 | export const description =
20 | 'API to detect paint times for elements and changes in their intersections with other elements.';
21 | export const showIndividualExamples = true;
22 | export const examples = [
23 | IntersectionObserverMDNExample,
24 | IntersectionObserverBenchmark,
25 | ];
26 |
--------------------------------------------------------------------------------
/example/src/assets/messagingtest.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Messaging Test
5 |
6 |
7 |
8 |
9 | Messages received from React Native: 0
10 | (No messages)
11 |
14 |
15 |
28 |
29 |
--------------------------------------------------------------------------------
/example/src/components/UseCase.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @format
8 | * @flow
9 | */
10 |
11 | import * as React from 'react';
12 | import {StyleSheet, Text, View} from 'react-native';
13 |
14 | type Props = $ReadOnly<{|
15 | children?: React.Node,
16 | title?: ?string,
17 | note?: ?string,
18 | ios?: ?boolean,
19 | android?: ?boolean,
20 | |}>;
21 |
22 | export default function UseCase(props: Props): React.Node {
23 | const children = React.Children.toArray(props.children).filter(
24 | child => child !== ' ',
25 | );
26 | return (
27 |
28 | {props.title}
29 | {props.note}
30 | {children}
31 |
32 | );
33 | }
34 |
35 | const styles = StyleSheet.create({
36 | container: {
37 | justifyContent: 'center',
38 | alignItems: 'center',
39 | },
40 | });
41 |
--------------------------------------------------------------------------------
/example/src/examples/Crash/CrashExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | *
7 | * @format
8 | * @flow strict-local
9 | */
10 |
11 | import type {Node} from 'react';
12 | import {Button} from 'react-native';
13 | import React from 'react';
14 |
15 | exports.displayName = (undefined: ?string);
16 | exports.framework = 'React';
17 | exports.title = 'Crash';
18 | exports.category = 'Basic';
19 | exports.description = 'Crash examples.';
20 |
21 | exports.examples = [
22 | {
23 | title: 'JS crash',
24 | render(): Node {
25 | return (
26 |