6 |
7 | #define TIMEOUT_SECONDS 600
8 | #define TEXT_TO_LOOK_FOR @"Welcome to React"
9 |
10 | @interface ImprovedExampleTests : XCTestCase
11 |
12 | @end
13 |
14 | @implementation ImprovedExampleTests
15 |
16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
17 | {
18 | if (test(view)) {
19 | return YES;
20 | }
21 | for (UIView *subview in [view subviews]) {
22 | if ([self findSubviewInView:subview matching:test]) {
23 | return YES;
24 | }
25 | }
26 | return NO;
27 | }
28 |
29 | - (void)testRendersWelcomeScreen
30 | {
31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
33 | BOOL foundElement = NO;
34 |
35 | __block NSString *redboxError = nil;
36 | #ifdef DEBUG
37 | RCTSetLogFunction(
38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
39 | if (level >= RCTLogLevelError) {
40 | redboxError = message;
41 | }
42 | });
43 | #endif
44 |
45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
48 |
49 | foundElement = [self findSubviewInView:vc.view
50 | matching:^BOOL(UIView *view) {
51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
52 | return YES;
53 | }
54 | return NO;
55 | }];
56 | }
57 |
58 | #ifdef DEBUG
59 | RCTSetLogFunction(RCTDefaultLogFunction);
60 | #endif
61 |
62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
64 | }
65 |
66 | @end
67 |
--------------------------------------------------------------------------------
/example/ios/ImprovedExampleTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/example/ios/Podfile:
--------------------------------------------------------------------------------
1 | # Resolve react_native_pods.rb with node to allow for hoisting
2 | require Pod::Executable.execute_command('node', ['-p',
3 | 'require.resolve(
4 | "react-native/scripts/react_native_pods.rb",
5 | {paths: [process.argv[1]]},
6 | )', __dir__]).strip
7 |
8 | platform :ios, min_ios_version_supported
9 | prepare_react_native_project!
10 |
11 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
12 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
13 | #
14 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
15 | # ```js
16 | # module.exports = {
17 | # dependencies: {
18 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
19 | # ```
20 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
21 |
22 | linkage = ENV['USE_FRAMEWORKS']
23 | if linkage != nil
24 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
25 | use_frameworks! :linkage => linkage.to_sym
26 | end
27 |
28 | target 'ImprovedExample' do
29 | config = use_native_modules!
30 |
31 | use_react_native!(
32 | :path => config[:reactNativePath],
33 | # Enables Flipper.
34 | #
35 | # Note that if you have use_frameworks! enabled, Flipper will not work and
36 | # you should disable the next line.
37 | :flipper_configuration => flipper_config,
38 | # An absolute path to your application root.
39 | :app_path => "#{Pod::Config.instance.installation_root}/.."
40 | )
41 |
42 | target 'ImprovedExampleTests' do
43 | inherit! :complete
44 | # Pods for testing
45 | end
46 |
47 | post_install do |installer|
48 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
49 | react_native_post_install(
50 | installer,
51 | config[:reactNativePath],
52 | :mac_catalyst_enabled => false
53 | )
54 | end
55 | end
56 |
--------------------------------------------------------------------------------
/example/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'react-native',
3 | };
4 |
--------------------------------------------------------------------------------
/example/metro.config.js:
--------------------------------------------------------------------------------
1 | const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
2 | const path = require('path');
3 | const escape = require('escape-string-regexp');
4 | const exclusionList = require('metro-config/src/defaults/exclusionList');
5 | const pak = require('../package.json');
6 |
7 | const root = path.resolve(__dirname, '..');
8 | const modules = Object.keys({ ...pak.peerDependencies });
9 |
10 | /**
11 | * Metro configuration
12 | * https://facebook.github.io/metro/docs/configuration
13 | *
14 | * @type {import('metro-config').MetroConfig}
15 | */
16 | const config = {
17 | watchFolders: [root],
18 |
19 | // We need to make sure that only one version is loaded for peerDependencies
20 | // So we block them at the root, and alias them to the versions in example's node_modules
21 | resolver: {
22 | blacklistRE: exclusionList(
23 | modules.map(
24 | (m) =>
25 | new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
26 | )
27 | ),
28 |
29 | extraNodeModules: modules.reduce((acc, name) => {
30 | acc[name] = path.join(__dirname, 'node_modules', name);
31 | return acc;
32 | }, {}),
33 | },
34 |
35 | transformer: {
36 | getTransformOptions: async () => ({
37 | transform: {
38 | experimentalImportSupport: false,
39 | inlineRequires: true,
40 | },
41 | }),
42 | },
43 | };
44 |
45 | module.exports = mergeConfig(getDefaultConfig(__dirname), config);
46 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "improvedexample",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "android": "react-native run-android",
7 | "ios": "react-native run-ios",
8 | "start": "react-native start",
9 | "build:android": "cd android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
10 | "build:ios": "cd ios && xcodebuild -workspace ImprovedExample.xcworkspace -scheme ImprovedExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO"
11 | },
12 | "dependencies": {
13 | "patch-package": "^8.0.0",
14 | "postinstall-postinstall": "^2.1.0",
15 | "react": "18.2.0",
16 | "react-native": "0.73.0"
17 | },
18 | "devDependencies": {
19 | "@babel/core": "^7.20.0",
20 | "@babel/preset-env": "^7.20.0",
21 | "@babel/runtime": "^7.20.0",
22 | "@react-native/babel-preset": "^0.73.18",
23 | "@react-native/metro-config": "^0.73.2",
24 | "@react-native/typescript-config": "^0.73.1",
25 | "babel-plugin-module-resolver": "^5.0.0",
26 | "pod-install": "^0.1.0"
27 | },
28 | "engines": {
29 | "node": ">=18"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/example/react-native.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const pak = require('../package.json');
3 |
4 | module.exports = {
5 | dependencies: {
6 | [pak.name]: {
7 | root: path.join(__dirname, '..'),
8 | },
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/example/src/AndroidPatch.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { View, StyleSheet, Text, TextInput } from 'react-native';
3 | export function AndroidPatch() {
4 | const email =
5 | 'From vincenzoddragon+five@gmail.com From vincenzoddrlxagon+five@gmail.com';
6 | return (
7 | <>
8 |
9 |
10 |
15 | {email}
16 |
17 |
18 |
19 | Normal Text
20 |
21 |
22 | );
23 | }
24 |
25 | const styles = StyleSheet.create({
26 | container: {
27 | flex: 1,
28 | justifyContent: 'center',
29 | padding: 8,
30 | backgroundColor: 'yellow',
31 | },
32 | flexBrokenStyle: {
33 | flexDirection: 'row',
34 | },
35 | parentText: {
36 | backgroundColor: 'red',
37 | },
38 | input: { borderWidth: 1 },
39 | });
40 |
--------------------------------------------------------------------------------
/example/src/RNTesterApp.android.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 {AppRegistry} from 'react-native';
12 |
13 | import RNTesterApp from './RNTesterAppShared';
14 |
15 | AppRegistry.registerComponent('RNTesterApp', () => RNTesterApp);
16 |
17 | module.exports = RNTesterApp;
18 |
--------------------------------------------------------------------------------
/example/src/RNTesterApp.ios.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 type {Node} from 'react';
12 |
13 | import {AppRegistry} from 'react-native';
14 | import React from 'react';
15 |
16 | import SnapshotViewIOS from './examples/Snapshot/SnapshotViewIOS.ios';
17 | import RNTesterModuleContainer from './components/RNTesterModuleContainer';
18 | import RNTesterList from './utils/RNTesterList';
19 | import RNTesterApp from './RNTesterAppShared';
20 | import type {RNTesterModuleInfo} from './types/RNTesterTypes';
21 |
22 | AppRegistry.registerComponent('SetPropertiesExampleApp', () =>
23 | require('./examples/SetPropertiesExample/SetPropertiesExampleApp'),
24 | );
25 | AppRegistry.registerComponent('RootViewSizeFlexibilityExampleApp', () =>
26 | require('./examples/RootViewSizeFlexibilityExample/RootViewSizeFlexibilityExampleApp'),
27 | );
28 | AppRegistry.registerComponent('RNTesterApp', () => RNTesterApp);
29 |
30 | // Register suitable examples for snapshot tests
31 | RNTesterList.Components.concat(RNTesterList.APIs).forEach(
32 | (Example: RNTesterModuleInfo) => {
33 | const ExampleModule = Example.module;
34 | if (ExampleModule.displayName) {
35 | class Snapshotter extends React.Component<{...}> {
36 | render(): Node {
37 | return (
38 |
39 | {}}
42 | />
43 |
44 | );
45 | }
46 | }
47 |
48 | AppRegistry.registerComponent(
49 | ExampleModule.displayName,
50 | () => Snapshotter,
51 | );
52 | }
53 | },
54 | );
55 |
56 | module.exports = RNTesterApp;
57 |
--------------------------------------------------------------------------------
/example/src/RNTesterApp.js.flow:
--------------------------------------------------------------------------------
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 typeof RNTesterApp from './RNTesterAppShared';
12 |
13 | declare module.exports: RNTesterApp;
14 |
--------------------------------------------------------------------------------
/example/src/assets/bandaged.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bandaged.png
--------------------------------------------------------------------------------
/example/src/assets/bookmark-filled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bookmark-filled.png
--------------------------------------------------------------------------------
/example/src/assets/bookmark-outline-blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bookmark-outline-blue.png
--------------------------------------------------------------------------------
/example/src/assets/bookmark-outline-gray.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bookmark-outline-gray.png
--------------------------------------------------------------------------------
/example/src/assets/bookmark-outline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bookmark-outline.png
--------------------------------------------------------------------------------
/example/src/assets/bottom-nav-apis-icon-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bottom-nav-apis-icon-active.png
--------------------------------------------------------------------------------
/example/src/assets/bottom-nav-apis-icon-inactive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bottom-nav-apis-icon-inactive.png
--------------------------------------------------------------------------------
/example/src/assets/bottom-nav-bookmark-fill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bottom-nav-bookmark-fill.png
--------------------------------------------------------------------------------
/example/src/assets/bottom-nav-bookmark-outline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bottom-nav-bookmark-outline.png
--------------------------------------------------------------------------------
/example/src/assets/bottom-nav-components-icon-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bottom-nav-components-icon-active.png
--------------------------------------------------------------------------------
/example/src/assets/bottom-nav-components-icon-inactive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bottom-nav-components-icon-inactive.png
--------------------------------------------------------------------------------
/example/src/assets/bunny.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/bunny.png
--------------------------------------------------------------------------------
/example/src/assets/call.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/call.png
--------------------------------------------------------------------------------
/example/src/assets/dislike.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/dislike.png
--------------------------------------------------------------------------------
/example/src/assets/documentation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/documentation.png
--------------------------------------------------------------------------------
/example/src/assets/empty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/empty.png
--------------------------------------------------------------------------------
/example/src/assets/fist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/fist.png
--------------------------------------------------------------------------------
/example/src/assets/flowers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/flowers.png
--------------------------------------------------------------------------------
/example/src/assets/flux@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/flux@3x.png
--------------------------------------------------------------------------------
/example/src/assets/hawk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/hawk.png
--------------------------------------------------------------------------------
/example/src/assets/header-back-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/header-back-button.png
--------------------------------------------------------------------------------
/example/src/assets/heart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/heart.png
--------------------------------------------------------------------------------
/example/src/assets/helloworld.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hello Bundled World
5 |
6 |
7 |
21 |
22 |
23 | Hello Bundled World
24 |
25 |
26 |
--------------------------------------------------------------------------------
/example/src/assets/imageMask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/imageMask.png
--------------------------------------------------------------------------------
/example/src/assets/like.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/like.png
--------------------------------------------------------------------------------
/example/src/assets/liking.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/liking.png
--------------------------------------------------------------------------------
/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/assets/party.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/party.png
--------------------------------------------------------------------------------
/example/src/assets/poke.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/poke.png
--------------------------------------------------------------------------------
/example/src/assets/relay@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/relay@3x.png
--------------------------------------------------------------------------------
/example/src/assets/search-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/search-icon.png
--------------------------------------------------------------------------------
/example/src/assets/slider-left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/slider-left.png
--------------------------------------------------------------------------------
/example/src/assets/slider-left@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/slider-left@2x.png
--------------------------------------------------------------------------------
/example/src/assets/slider-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/slider-right.png
--------------------------------------------------------------------------------
/example/src/assets/slider-right@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/slider-right@2x.png
--------------------------------------------------------------------------------
/example/src/assets/slider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/slider.png
--------------------------------------------------------------------------------
/example/src/assets/slider@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/slider@2x.png
--------------------------------------------------------------------------------
/example/src/assets/superlike.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/superlike.png
--------------------------------------------------------------------------------
/example/src/assets/trees.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/trees.jpg
--------------------------------------------------------------------------------
/example/src/assets/tumblr_mfqekpMktw1rn90umo1_500.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/tumblr_mfqekpMktw1rn90umo1_500.gif
--------------------------------------------------------------------------------
/example/src/assets/uie_comment_highlighted@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/uie_comment_highlighted@2x.png
--------------------------------------------------------------------------------
/example/src/assets/uie_comment_normal@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/uie_comment_normal@2x.png
--------------------------------------------------------------------------------
/example/src/assets/uie_thumb_big.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/uie_thumb_big.png
--------------------------------------------------------------------------------
/example/src/assets/uie_thumb_normal@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/uie_thumb_normal@2x.png
--------------------------------------------------------------------------------
/example/src/assets/uie_thumb_selected@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/uie_thumb_selected@2x.png
--------------------------------------------------------------------------------
/example/src/assets/victory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/assets/victory.png
--------------------------------------------------------------------------------
/example/src/components/RNTConfigurationBlock.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 | 'use strict';
12 |
13 | import * as React from 'react';
14 | import {StyleSheet, View} from 'react-native';
15 | import {RNTesterThemeContext} from './RNTesterTheme';
16 |
17 | type Props = $ReadOnly<{|
18 | children?: ?React.Node,
19 | testID?: string,
20 | |}>;
21 |
22 | /**
23 | * Container view for a block of configuration options for an example.
24 | */
25 | export default function RNTConfigurationBlock(props: Props): React.Node {
26 | const theme = React.useContext(RNTesterThemeContext);
27 | return (
28 |
33 | {props.children}
34 |
35 | );
36 | }
37 |
38 | const styles = StyleSheet.create({
39 | container: {
40 | paddingVertical: 6,
41 | paddingHorizontal: 10,
42 | borderBottomWidth: 1,
43 | },
44 | });
45 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterBlock.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 {RNTesterThemeContext} from './RNTesterTheme';
13 | import {StyleSheet, Text, View} from 'react-native';
14 |
15 | type Props = $ReadOnly<{|
16 | children?: React.Node,
17 | title?: ?string,
18 | description?: ?string,
19 | |}>;
20 |
21 | const RNTesterBlock = ({description, title, children}: Props): React.Node => {
22 | const theme = React.useContext(RNTesterThemeContext);
23 | return (
24 |
32 |
33 | {title && (
34 |
35 | {title}
36 |
37 | )}
38 | {description && (
39 |
44 | {description}
45 |
46 | )}
47 |
48 | {children}
49 |
50 | );
51 | };
52 |
53 | const styles = StyleSheet.create({
54 | container: {
55 | borderRadius: 0,
56 | borderWidth: 1,
57 | marginHorizontal: 20,
58 | },
59 | titleText: {
60 | fontSize: 18,
61 | fontWeight: '300',
62 | },
63 | titleContainer: {
64 | paddingHorizontal: 10,
65 | paddingVertical: 5,
66 | },
67 | descriptionText: {
68 | fontSize: 12,
69 | opacity: 0.5,
70 | },
71 | children: {
72 | marginHorizontal: 20,
73 | marginVertical: 10,
74 | },
75 | });
76 |
77 | module.exports = RNTesterBlock;
78 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterBookmarkButton.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 | const React = require('react');
12 |
13 | import {TouchableOpacity, Image, StyleSheet} from 'react-native';
14 |
15 | type Props = {|
16 | isActive: boolean,
17 | onPress: Function,
18 | size: number,
19 | |};
20 |
21 | class RNTesterBookmarkButton extends React.Component {
22 | constructor(props: Props) {
23 | super(props);
24 | }
25 |
26 | render(): React.Node {
27 | const {size, onPress, isActive} = this.props;
28 | return (
29 |
39 |
47 |
48 | );
49 | }
50 | }
51 |
52 | const styles = StyleSheet.create({
53 | imageViewStyle: {
54 | backgroundColor: 'blue',
55 | justifyContent: 'center',
56 | alignItems: 'center',
57 | },
58 | });
59 |
60 | module.exports = RNTesterBookmarkButton;
61 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterButton.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 | 'use strict';
12 |
13 | const React = require('react');
14 |
15 | const {Pressable, StyleSheet, Text} = require('react-native');
16 |
17 | import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
18 |
19 | type Props = $ReadOnly<{|
20 | testID?: string,
21 | textTestID?: string,
22 | children?: React.Node,
23 | onPress?: ?(event: PressEvent) => mixed,
24 | |}>;
25 |
26 | class RNTesterButton extends React.Component {
27 | render(): React.Node {
28 | return (
29 | [styles.button, pressed && styles.pressed]}>
33 | {this.props.children}
34 |
35 | );
36 | }
37 | }
38 |
39 | const styles = StyleSheet.create({
40 | button: {
41 | borderColor: '#696969',
42 | borderRadius: 8,
43 | borderWidth: 1,
44 | padding: 10,
45 | margin: 5,
46 | alignItems: 'center',
47 | justifyContent: 'center',
48 | backgroundColor: '#d3d3d3',
49 | },
50 | pressed: {
51 | backgroundColor: '#a9a9a9',
52 | },
53 | });
54 |
55 | module.exports = RNTesterButton;
56 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterComponentTitle.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 | const React = require('react');
12 | import {RNTesterThemeContext} from './RNTesterTheme';
13 | const {StyleSheet, Text} = require('react-native');
14 |
15 | type Props = $ReadOnly<{|
16 | children: string,
17 | |}>;
18 |
19 | class RNTesterComponentTitle extends React.Component {
20 | constructor(props: Props) {
21 | super(props);
22 | }
23 |
24 | render(): React.Node {
25 | return (
26 |
27 | {theme => (
28 |
29 | {this.props.children}
30 |
31 | )}
32 |
33 | );
34 | }
35 | }
36 |
37 | const styles = StyleSheet.create({
38 | titleText: {
39 | fontSize: 20,
40 | fontWeight: '400',
41 | marginBottom: 5,
42 | },
43 | });
44 |
45 | module.exports = RNTesterComponentTitle;
46 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterDocumentationURL.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 {Image, StyleSheet, TouchableOpacity} from 'react-native';
13 | import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';
14 |
15 | type Props = $ReadOnly<{|
16 | documentationURL: string,
17 | |}>;
18 |
19 | const RNTesterDocumentationURL = ({documentationURL}: Props): React.Node => (
20 | openURLInBrowser(documentationURL)}>
23 |
27 |
28 | );
29 |
30 | export default RNTesterDocumentationURL;
31 |
32 | const styles = StyleSheet.create({
33 | container: {
34 | position: 'absolute',
35 | bottom: 0,
36 | right: -15,
37 | },
38 | icon: {
39 | height: 24,
40 | },
41 | });
42 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterEmptyBookmarksState.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 {View, Image, Text, StyleSheet} from 'react-native';
13 | import {RNTesterThemeContext} from './RNTesterTheme';
14 |
15 | export const RNTesterEmptyBookmarksState = (): React.Node => {
16 | const theme = React.useContext(RNTesterThemeContext);
17 | return (
18 |
22 |
23 |
24 |
25 | Bookmarks are empty
26 |
27 |
28 | Please tap the{' '}
29 | {' '}
34 | icon to bookmark examples.
35 |
36 |
37 |
38 |
39 | );
40 | };
41 |
42 | const styles = StyleSheet.create({
43 | emptyContainer: {
44 | flex: 1,
45 | paddingHorizontal: 40,
46 | justifyContent: 'center',
47 | alignItems: 'center',
48 | },
49 | emptyContainerInner: {
50 | marginTop: -150,
51 | },
52 | emptyImage: {
53 | maxWidth: '100%',
54 | height: 300,
55 | },
56 | heading: {
57 | fontSize: 24,
58 | textAlign: 'center',
59 | },
60 | subheading: {
61 | fontSize: 16,
62 | textAlign: 'center',
63 | },
64 | bookmarkIcon: {
65 | width: 24,
66 | height: 24,
67 | transform: [{translateY: 4}],
68 | },
69 | });
70 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterListFilters.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 | 'use strict';
12 |
13 | const React = require('react');
14 |
15 | const {StyleSheet, Text, TouchableOpacity, View} = require('react-native');
16 |
17 | const filters = ['Basic', 'UI', 'ListView', 'iOS', 'Android'];
18 |
19 | type Props = {
20 | onFilterButtonPress: (filter: string) => mixed, //optional only for testing
21 | ...
22 | };
23 |
24 | class RNTesterListFilters extends React.Component<
25 | Props,
26 | {|currentFilter: string|},
27 | > {
28 | constructor(props: Props) {
29 | super(props);
30 | this.state = {
31 | currentFilter: '',
32 | };
33 | }
34 |
35 | filterPressed: any = filterLabel => {
36 | const newFilter =
37 | this.state.currentFilter === filterLabel ? '' : filterLabel;
38 | this.setState({
39 | currentFilter: newFilter,
40 | });
41 | this.props.onFilterButtonPress(newFilter);
42 | };
43 |
44 | render(): React.Node {
45 | return (
46 |
47 | {filters.map(filterLabel => {
48 | return (
49 | this.filterPressed(filterLabel)}>
61 |
68 | {filterLabel}
69 |
70 |
71 | );
72 | })}
73 |
74 | );
75 | }
76 | }
77 |
78 | const styles = StyleSheet.create({
79 | container: {
80 | flexDirection: 'row',
81 | alignItems: 'center',
82 | justifyContent: 'center',
83 | },
84 | pillStyle: {
85 | padding: 10,
86 | marginHorizontal: 5,
87 | marginVertical: 10,
88 | borderRadius: 20,
89 | borderWidth: 1,
90 | borderColor: '#045cfc',
91 | },
92 | });
93 |
94 | module.exports = RNTesterListFilters;
95 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterPage.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 | const RNTesterTitle = require('./RNTesterTitle');
12 | const React = require('react');
13 | const {SafeAreaView, ScrollView, StyleSheet, View} = require('react-native');
14 | import {RNTesterThemeContext} from './RNTesterTheme';
15 | import {useContext} from 'react';
16 |
17 | type Props = $ReadOnly<{|
18 | children?: React.Node,
19 | title?: ?string,
20 | noScroll?: ?boolean,
21 | |}>;
22 |
23 | function RNTesterPage({children, title, noScroll}: Props): React.Node {
24 | const theme = useContext(RNTesterThemeContext);
25 |
26 | return (
27 |
32 | {title && }
33 | {noScroll ? (
34 | {children}
35 | ) : (
36 |
42 | {children}
43 |
44 | )}
45 |
46 | );
47 | }
48 |
49 | const styles = StyleSheet.create({
50 | background: {
51 | flex: 1,
52 | },
53 | noscrollWrapper: {
54 | flex: 1,
55 | rowGap: 30,
56 | },
57 | scrollWrapper: {
58 | flex: 1,
59 | },
60 | scrollWrapperContentContainer: {
61 | paddingVertical: 10,
62 | rowGap: 30,
63 | },
64 | });
65 |
66 | module.exports = RNTesterPage;
67 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterSettingSwitchRow.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 * as React from 'react';
12 | import {StyleSheet, Switch, Text, View} from 'react-native';
13 |
14 | type Props = {
15 | label: string,
16 | onEnable: () => void,
17 | onDisable: () => void,
18 | active: boolean,
19 | };
20 |
21 | const styles = StyleSheet.create({
22 | row: {
23 | padding: 10,
24 | flexDirection: 'row',
25 | justifyContent: 'space-between',
26 | },
27 | });
28 |
29 | const RNTesterSettingSwitchRow = ({
30 | label,
31 | onEnable,
32 | onDisable,
33 | active,
34 | }: Props): React.Node => {
35 | return (
36 |
37 | {label}
38 |
39 |
40 | );
41 | };
42 |
43 | export default RNTesterSettingSwitchRow;
44 |
--------------------------------------------------------------------------------
/example/src/components/RNTesterTitle.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 | const React = require('react');
12 |
13 | const {StyleSheet, Text, View} = require('react-native');
14 | import {RNTesterThemeContext} from './RNTesterTheme';
15 |
16 | class RNTesterTitle extends React.Component<$FlowFixMeProps> {
17 | render(): React.Node {
18 | return (
19 |
20 | {theme => {
21 | return (
22 |
30 |
31 | {this.props.title}
32 |
33 |
34 | );
35 | }}
36 |
37 | );
38 | }
39 | }
40 |
41 | const styles = StyleSheet.create({
42 | container: {
43 | borderRadius: 4,
44 | borderWidth: 0.5,
45 | margin: 10,
46 | marginBottom: 0,
47 | height: 45,
48 | padding: 10,
49 | },
50 | text: {
51 | fontSize: 19,
52 | fontWeight: '500',
53 | },
54 | });
55 |
56 | module.exports = RNTesterTitle;
57 |
--------------------------------------------------------------------------------
/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/components/createExamplePage.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 | 'use strict';
12 |
13 | const React = require('react');
14 |
15 | import RNTesterModuleContainer from './RNTesterModuleContainer';
16 | import type {RNTesterModule} from '../types/RNTesterTypes';
17 |
18 | const createExamplePage = function (
19 | title: ?string,
20 | exampleModule: RNTesterModule,
21 | ): React.ComponentType {
22 | class ExamplePage extends React.Component<{...}> {
23 | render(): React.Node {
24 | return ;
25 | }
26 | }
27 |
28 | return ExamplePage;
29 | };
30 |
31 | module.exports = createExamplePage;
32 |
--------------------------------------------------------------------------------
/example/src/examples/Accessibility/AccessibilityIOSExample.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 | 'use strict';
12 |
13 | const React = require('react');
14 | const {Text, View, Alert} = require('react-native');
15 |
16 | type Props = $ReadOnly<{||}>;
17 | class AccessibilityIOSExample extends React.Component {
18 | render(): React.Node {
19 | return (
20 | <>
21 | {
23 | if (event.nativeEvent.actionName === 'activate') {
24 | Alert.alert('Alert', 'onAccessibilityTap success');
25 | }
26 | }}
27 | accessible={true}
28 | accessibilityActions={[{name: 'activate'}]}>
29 | Accessibility normal tap example
30 |
31 | {
33 | if (event.nativeEvent.actionName === 'magicTap') {
34 | Alert.alert('Alert', 'onMagicTap success');
35 | }
36 | }}
37 | accessible={true}
38 | accessibilityActions={[{name: 'magicTap'}]}>
39 | Accessibility magic tap example
40 |
41 | {
43 | if (event.nativeEvent.actionName === 'escape') {
44 | Alert.alert('onAccessibilityEscape success');
45 | }
46 | }}
47 | accessible={true}
48 | accessibilityActions={[{name: 'escape'}]}>
49 | Accessibility escape example
50 |
51 |
52 |
53 | This view's children are hidden from the accessibility tree
54 |
55 |
56 |
57 | This view's language should be `it-IT`
58 |
59 |
60 | );
61 | }
62 | }
63 |
64 | exports.title = 'AccessibilityIOS';
65 | exports.description = 'iOS specific Accessibility APIs';
66 | exports.examples = [
67 | {
68 | title: 'iOS Accessibility elements',
69 | render(): React.Element {
70 | return ;
71 | },
72 | },
73 | ];
74 |
--------------------------------------------------------------------------------
/example/src/examples/Accessibility/check.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/examples/Accessibility/check.png
--------------------------------------------------------------------------------
/example/src/examples/Accessibility/mixed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/examples/Accessibility/mixed.png
--------------------------------------------------------------------------------
/example/src/examples/Accessibility/uncheck.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fabOnReact/react-native-improved/8545f4dd1a01a948436c20734a9cda60ef460ad6/example/src/examples/Accessibility/uncheck.png
--------------------------------------------------------------------------------
/example/src/examples/ActionSheetIOS/ActionSheetIOSExample.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 | 'use strict';
12 |
13 | import type {NativeMethods} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
14 |
15 | const React = require('react');
16 | const {
17 | StyleSheet,
18 | Text,
19 | View,
20 | Alert,
21 | findNodeHandle,
22 | } = require('react-native');
23 |
24 | const style = StyleSheet.create({
25 | button: {
26 | marginBottom: 10,
27 | fontWeight: '500',
28 | },
29 | anchorRow: {
30 | flex: 1,
31 | flexDirection: 'row',
32 | justifyContent: 'space-between',
33 | },
34 | });
35 |
36 | exports.title = 'ActionSheetIOS';
37 | exports.category = 'iOS';
38 | exports.description = "Interface to show iOS' action sheets";
39 | exports.examples = [
40 | {
41 | title: 'Show Action Sheet',
42 | render(): React.Element {
43 | return Do nothing;
44 | },
45 | },
46 | ];
47 |
--------------------------------------------------------------------------------
/example/src/examples/Animated/AnimatedIndex.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 type {RNTesterModule} from '../../types/RNTesterTypes';
12 | import RotatingImagesExample from './RotatingImagesExample';
13 | import ContinuousInteractionsExample from './ContinuousInteractionsExample';
14 | import LoopingExample from './LoopingExample';
15 | import MovingBoxExample from './MovingBoxExample';
16 | import EasingExample from './EasingExample';
17 | import FadeInViewExample from './FadeInViewExample';
18 | import ComposeAnimationsWithEasingExample from './ComposeAnimationsWithEasingExample';
19 | import TransformBounceExample from './TransformBounceExample';
20 | import ComposingExample from './ComposingExample';
21 | import TransformStylesExample from './TransformStylesExample';
22 | import ColorStylesExample from './ColorStylesExample';
23 |
24 | export default ({
25 | framework: 'React',
26 | title: 'Animated',
27 | category: 'UI',
28 | documentationURL: 'https://reactnative.dev/docs/animated',
29 | description:
30 | 'Library designed to make animations fluid, powerful, and painless to ' +
31 | 'build and maintain.',
32 | showIndividualExamples: true,
33 | examples: [
34 | TransformStylesExample,
35 | ColorStylesExample,
36 | FadeInViewExample,
37 | ComposingExample,
38 | EasingExample,
39 | ComposeAnimationsWithEasingExample,
40 | RotatingImagesExample,
41 | MovingBoxExample,
42 | TransformBounceExample,
43 | LoopingExample,
44 | ContinuousInteractionsExample,
45 | ],
46 | }: RNTesterModule);
47 |
--------------------------------------------------------------------------------
/example/src/examples/Animated/ContinuousInteractionsExample.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 type {RNTesterModuleExample} from '../../types/RNTesterTypes';
12 | import * as React from 'react';
13 | import {Text} from 'react-native';
14 |
15 | export default ({
16 | title: 'Continuous Interactions',
17 | name: 'continuousInteractions',
18 | description: ('Gesture events, chaining, 2D ' +
19 | 'values, interrupting and transitioning ' +
20 | 'animations, etc.': string),
21 | render: (): React.Node => Checkout the Gratuitous Animation App!,
22 | }: RNTesterModuleExample);
23 |
--------------------------------------------------------------------------------
/example/src/examples/Animated/utils/ToggleNativeDriver.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 {View, Text, StyleSheet, Switch} from 'react-native';
12 | import * as React from 'react';
13 |
14 | type ViewStyleProp = $ElementType, 'style'>;
15 |
16 | type Props = {
17 | value: boolean,
18 | onValueChange: $ElementType<
19 | React.ElementConfig,
20 | 'onValueChange',
21 | >,
22 | style?: ?ViewStyleProp,
23 | };
24 |
25 | export default function ToggleNativeDriver({
26 | value,
27 | onValueChange,
28 | style,
29 | }: Props): React.Node {
30 | return (
31 |
32 | Use Native Driver
33 |
38 |
39 | );
40 | }
41 |
42 | const styles = StyleSheet.create({
43 | row: {
44 | flexDirection: 'row',
45 | justifyContent: 'space-between',
46 | alignItems: 'center',
47 | },
48 | });
49 |
--------------------------------------------------------------------------------
/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 |