diff --git a/packages/rn-tester/js/components/ListExampleShared.js b/packages/rn-tester/js/components/ListExampleShared.js
index 7260f2fbd07e66..05fda82f9cdf9f 100644
--- a/packages/rn-tester/js/components/ListExampleShared.js
+++ b/packages/rn-tester/js/components/ListExampleShared.js
@@ -10,8 +10,9 @@
'use strict';
-const React = require('react');
-const {
+import RNTesterText from './RNTesterText';
+import React from 'react';
+import {
ActivityIndicator,
Animated,
Image,
@@ -22,7 +23,7 @@ const {
TextInput,
TouchableHighlight,
View,
-} = require('react-native');
+} from 'react-native';
export type Item = {
title: string,
@@ -260,7 +261,7 @@ function renderSmallSwitchOption(
}
return (
- {label}:
+ {label}:
{
return (
- {label}
+ {label}
);
diff --git a/packages/rn-tester/js/components/RNTesterText.js b/packages/rn-tester/js/components/RNTesterText.js
new file mode 100644
index 00000000000000..fc1767c4d0d343
--- /dev/null
+++ b/packages/rn-tester/js/components/RNTesterText.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import type {TextProps} from 'react-native/Libraries/Text/TextProps';
+
+import {RNTesterThemeContext} from './RNTesterTheme';
+import React, {useContext} from 'react';
+import {Text} from 'react-native';
+
+export default function RNTesterText(props: TextProps): React$Node {
+ const {style, ...rest} = props;
+ const theme = useContext(RNTesterThemeContext);
+ return ;
+}
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityAndroidExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityAndroidExample.js
index 08ea74daba6759..f3713f727593e9 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityAndroidExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityAndroidExample.js
@@ -12,15 +12,9 @@
import RNTesterBlock from '../../components/RNTesterBlock';
import RNTesterPage from '../../components/RNTesterPage';
-import {
- Alert,
- StyleSheet,
- Text,
- TouchableWithoutFeedback,
- View,
-} from 'react-native';
-
-const React = require('react');
+import RNTesterText from '../../components/RNTesterText';
+import {Alert, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
+import React from 'react';
const importantForAccessibilityValues = [
'auto',
@@ -67,27 +61,27 @@ class AccessibilityAndroidExample extends React.Component<
return (
-
-
+
+
Bacon {this.state.count} Ipsum{'\n'}
-
- Dolor sit amet{'\n'}
- Eggsecetur{'\n'}
- {'\n'}
-
+
+ Dolor sit amet{'\n'}
+ Eggsecetur{'\n'}
+ {'\n'}
+
http://github.com
-
-
+
+
- Click me
+ Click me
- Clicked {this.state.count} times
+ Clicked {this.state.count} times
@@ -102,7 +96,7 @@ class AccessibilityAndroidExample extends React.Component<
]
}>
- Hello
+ Hello
- world
+ world
-
+
Change importantForAccessibility for background layout.
-
+
- Background layout importantForAccessibility
-
+
+ Background layout importantForAccessibility
+
+
{
importantForAccessibilityValues[
this.state.backgroundImportantForAcc
]
}
-
+
-
+
Change importantForAccessibility for forground layout.
-
+
- Forground layout importantForAccessibility
-
+
+ Forground layout importantForAccessibility
+
+
{
importantForAccessibilityValues[
this.state.forgroundImportantForAcc
]
}
-
+
-
+
In the following example, the words "test", "inline links", "another
link", and "link that spans multiple lines because the text is so
long", should each be independently focusable elements, announced as
their content followed by ", Link".
-
-
+
+
They should be focused in order from top to bottom *after* the
contents of the entire paragraph.
-
-
+
+
Focusing on the paragraph itself should also announce that there are
"links available", and opening Talkback's links menu should show
these same links.
-
-
+
+
Clicking on each link, or selecting the link From Talkback's links
menu should trigger an alert.
-
-
+
+
The links that wraps to multiple lines will intentionally only draw
a focus outline around the first line, but using the "explore by
touch" tap-and-drag gesture should move focus to this link even if
the second line is touched.
-
-
+
+
Using the "Explore by touch" gesture and touching an area that is
*not* a link should move focus to the entire paragraph.
-
- Example
-
+
+ Example
+
This is a{' '}
- {
Alert.alert('pressed test');
}}>
test
- {' '}
+ {' '}
of{' '}
- {
Alert.alert('pressed Inline Links');
}}>
inline links
- {' '}
+ {' '}
in React Native. Here's{' '}
- {
Alert.alert('pressed another link');
}}>
another link
-
+
. Here is a{' '}
- {
Alert.alert('pressed long link');
}}>
link that spans multiple lines because the text is so long.
-
+
This sentence has no links in it.
-
+
);
@@ -241,6 +239,9 @@ class AccessibilityAndroidExample extends React.Component<
}
const styles = StyleSheet.create({
+ buttonText: {
+ color: 'black',
+ },
touchableContainer: {
position: 'absolute',
left: 10,
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index 2848d48c6a4b4e..308ec71e43ba98 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -13,15 +13,13 @@
import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
-import {RNTesterThemeContext} from '../../components/RNTesterTheme';
-
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const checkImageSource = require('./check.png');
-const mixedCheckboxImageSource = require('./mixed.png');
-const uncheckImageSource = require('./uncheck.png');
-const React = require('react');
-const {createRef} = require('react');
-const {
+import RNTesterBlock from '../../components/RNTesterBlock';
+import RNTesterText from '../../components/RNTesterText';
+import checkImageSource from './check.png';
+import mixedCheckboxImageSource from './mixed.png';
+import uncheckImageSource from './uncheck.png';
+import React, {createRef} from 'react';
+import {
AccessibilityInfo,
Alert,
Button,
@@ -31,13 +29,12 @@ const {
ScrollView,
StyleSheet,
Switch,
- Text,
TextInput,
TouchableNativeFeedback,
TouchableOpacity,
TouchableWithoutFeedback,
View,
-} = require('react-native');
+} from 'react-native';
const styles = StyleSheet.create({
sectionContainer: {
@@ -106,214 +103,208 @@ const styles = StyleSheet.create({
class AccessibilityExample extends React.Component<{}> {
render(): React.Node {
return (
-
- {theme => (
-
-
-
- Text's accessibilityLabel is the raw text itself unless it is
- set explicitly.
-
-
+
+
+
+ Text's accessibilityLabel is the raw text itself unless it is set
+ explicitly.
+
+
-
-
- This text component's accessibilityLabel is set explicitly.
-
-
+
+
+ This text component's accessibilityLabel is set explicitly.
+
+
-
-
- This is text one.
- This is text two.
-
-
+
+
+
+ This is text one.
+
+
+ This is text two.
+
+
+
-
-
- This is text one.
- This is text two.
-
-
+
+
+
+ This is text one.
+
+
+ This is text two.
+
+
+
-
-
- This is text one.
- This is text two.
-
-
+
+
+
+ This is text one.
+
+
+ This is text two.
+
+
+
-
-
-
- This view's children are hidden from the accessibility tree
-
-
-
+
+
+
+ This view's children are hidden from the accessibility tree
+
+
+
- {/* Android screen readers will say the accessibility hint instead of the text
+ {/* Android screen readers will say the accessibility hint instead of the text
since the view doesn't have a label. */}
-
-
- This is text one.
- This is text two.
-
-
+
+
+
+ This is text one.
+
+
+ This is text two.
+
+
+
-
-
- This is text one.
- This is text two.
-
-
+
+
+
+ This is text one.
+
+
+ This is text two.
+
+
+
-
-
- This is a title.
-
-
+
+
+ This is a title.
+
+
-
-
- This is a title.
-
-
+
+ This is a title.
+
-
- Alert.alert('Link has been clicked!')}
- accessibilityRole="link">
-
-
- Click me
-
-
-
-
+
+ Alert.alert('Link has been clicked!')}
+ accessibilityRole="link">
+
+ Click me
+
+
+
-
- Alert.alert('Button has been pressed!')}
- accessibilityRole="button">
- Click me
-
-
+
+ Alert.alert('Button has been pressed!')}
+ accessibilityRole="button">
+ Click me
+
+
-
- Alert.alert('Button has been pressed!')}
- accessibilityRole="button"
- accessibilityState={{disabled: true}}
- disabled={true}>
-
-
- I am disabled. Clicking me will not trigger any action.
-
-
-
-
+
+ Alert.alert('Button has been pressed!')}
+ accessibilityRole="button"
+ accessibilityState={{disabled: true}}
+ disabled={true}>
+
+
+ I am disabled. Clicking me will not trigger any action.
+
+
+
+
-
- Alert.alert('Disabled Button has been pressed!')}
- accessibilityLabel={
- 'You are pressing Disabled TouchableOpacity'
- }
- accessibilityState={{disabled: true}}>
-
-
- I am disabled. Clicking me will not trigger any action.
-
-
-
-
-
-
-
- This view is selected and disabled.
-
-
-
+
+ Alert.alert('Disabled Button has been pressed!')}
+ accessibilityLabel={'You are pressing Disabled TouchableOpacity'}
+ accessibilityState={{disabled: true}}>
+
+
+ I am disabled. Clicking me will not trigger any action.
+
+
+
+
+
+
+ This view is selected and disabled.
+
+
-
-
-
- Accessible view with label, hint, role, and state
-
-
-
+
+
+
+ Accessible view with label, hint, role, and state
+
+
+
-
-
-
- Accessible view with label, hint, role, and state
-
-
-
+
+
+
+ Accessible view with label, hint, role, and state
+
+
+
-
-
-
- Mail Address
-
-
-
- First Name
-
-
-
-
-
-
-
- Enable Notifications
-
-
-
-
+
+
+ Mail Address
+
+ First Name
+
- )}
-
+
+
+
+
+ Enable Notifications
+
+
+
+
+
);
}
}
@@ -321,170 +312,138 @@ class AccessibilityExample extends React.Component<{}> {
class AutomaticContentGrouping extends React.Component<{}> {
render(): React.Node {
return (
-
- {theme => (
-
-
-
-
-
- Text number 1 with a role
-
-
- Text number 2
-
-
-
-
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'cut':
- Alert.alert('Alert', 'cut action success');
- break;
- case 'copy':
- Alert.alert('Alert', 'copy action success');
- break;
- case 'paste':
- Alert.alert('Alert', 'paste action success');
- break;
- }
- }}
- accessibilityRole="button">
-
-
- Text number 1
-
-
- Text number 2Text number 3
-
-
-
-
+
+
+
+
+
+ Text number 1 with a role
+
+ Text number 2
+
+
+
-
-
-
- Text number 1
-
-
-
-
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'cut':
+ Alert.alert('Alert', 'cut action success');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ case 'paste':
+ Alert.alert('Alert', 'paste action success');
+ break;
+ }
+ }}
+ accessibilityRole="button">
+
+ Text number 1
+
+ Text number 2
+ Text number 3
+
+
+
+
-
-
-
-
- Text number 1
-
- console.warn('onPress child')}
- accessible={false}
- accessibilityLabel="this is my label"
- accessibilityRole="image"
- accessibilityState={{disabled: true}}
- accessibilityValue={{
- text: 'this is the accessibility value',
- }}>
-
- Text number 3
-
-
-
-
-
+
+
+
+ Text number 1
+
+
+
+
-
+
+
+
+ Text number 1
-
+ focusable={true}
+ onPress={() => console.warn('onPress child')}
+ accessible={false}
+ accessibilityLabel="this is my label"
+ accessibilityRole="image"
+ accessibilityState={{disabled: true}}
+ accessibilityValue={{
+ text: 'this is the accessibility value',
+ }}>
+ Text number 3
-
+
+
+
-
-
-
- Text number 2
-
- Text number 3Text number 4
-
-
-
-
+
+
+
+
+
-
- console.warn('onPress child')}
- accessible={true}
- accessibilityRole="button">
-
-
-
-
-
+
+
+
+ Text number 2
+
+ Text number 3
+ Text number 4
+
+
+
+
-
-
-
-
-
+
+ console.warn('onPress child')}
+ accessible={true}
+ accessibilityRole="button">
+
+
+
+
+
+
+
+
+
- )}
-
+
+
);
}
}
@@ -516,20 +475,14 @@ class CheckboxExample extends React.Component<
render(): React.Node {
return (
-
- {theme => (
-
-
- Checkbox example
-
-
- )}
-
+
+ Checkbox example
+
);
}
}
@@ -554,20 +507,14 @@ class SwitchExample extends React.Component<
render(): React.Node {
return (
-
- {theme => (
-
-
- Switch example
-
-
- )}
-
+
+ Switch example
+
);
}
}
@@ -626,9 +573,9 @@ class SelectionExample extends React.Component<
}}
style={styles.touchable}
accessibilityHint={accessibilityHint}>
-
+
{`Selectable TouchableOpacity Example ${touchableHint}`}
-
+
- {theme => (
-
-
- Expandable element example
-
-
- )}
-
+
+ Expandable element example
+
);
}
}
@@ -756,59 +697,55 @@ class NestedCheckBox extends React.Component<
render(): React.Node {
return (
-
- {theme => (
-
-
-
- Meat
-
-
-
- Beef
-
-
-
- Bacon
-
-
- )}
-
+
+
+
+ Meat
+
+
+
+ Beef
+
+
+
+ Bacon
+
+
);
}
}
@@ -816,220 +753,168 @@ class NestedCheckBox extends React.Component<
class AccessibilityRoleAndStateExample extends React.Component<{}> {
render(): React.Node {
const content = [
- This is some text,
- This is some text,
- This is some text,
- This is some text,
- This is some text,
- This is some text,
- This is some text,
+ This is some text,
+ This is some text,
+ This is some text,
+ This is some text,
+ This is some text,
+ This is some text,
+ This is some text,
];
return (
-
- {theme => (
-
-
-
-
- {content}
-
-
-
-
-
-
- {content}
-
-
-
-
-
-
- {content}
-
-
-
-
-
-
-
- Alert example
-
-
-
-
-
- Combobox example
-
-
-
-
- Menu example
-
-
-
-
- Menu bar example
-
-
-
-
- Menu item example
-
-
-
-
- Progress bar example
-
-
-
-
- Radio button example
-
-
-
-
- Radio group example
-
-
-
-
- Scrollbar example
-
-
-
-
- Spin button example
-
-
-
-
-
- Tab example
-
-
-
-
- Tab list example
-
-
-
-
- Timer example
-
-
-
-
- Toolbar example
-
-
-
-
- State busy example
-
-
-
-
- Drop Down List example
-
-
-
-
- Pager example
-
-
-
-
- Toggle Button example
-
-
-
-
- Viewgroup example
-
-
-
-
- Webview example
-
-
-
-
-
- Nested checkbox with delayed state change
-
-
-
-
+
+
+
+ {content}
+
+
+
+
+ {content}
+
+
+
+
+ {content}
+
+
+
+
+
+ Alert example
+
+
+
+ Combobox example
+
+
+ Menu example
+
+
+ Menu bar example
+
+
+ Menu item example
+
+
+ Progress bar example
+
+
+ Radio button example
+
+
+ Radio group example
+
+
+ Scrollbar example
+
+
+ Spin button example
+
+
+
+ Tab example
+
+
+ Tab list example
+
+
+ Timer example
+
+
+ Toolbar example
+
+
+ State busy example
+
+
+ Drop Down List example
+
+
+ Pager example
+
+
+ Toggle Button example
+
+
+ Viewgroup example
+
+
+ Webview example
+
+
+
+
+ Nested checkbox with delayed state change
+
+
- )}
-
+
+
);
}
}
@@ -1037,150 +922,138 @@ class AccessibilityRoleAndStateExample extends React.Component<{}> {
class AccessibilityActionsExample extends React.Component<{}> {
render(): React.Node {
return (
-
- {theme => (
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'activate':
- Alert.alert('Alert', 'View is clicked');
- break;
- }
- }}>
- Click me
-
-
+
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'activate':
+ Alert.alert('Alert', 'View is clicked');
+ break;
+ }
+ }}>
+ Click me
+
+
-
- {
- switch (event.nativeEvent.actionName) {
- case 'cut':
- Alert.alert('Alert', 'cut action success');
- break;
- case 'copy':
- Alert.alert('Alert', 'copy action success');
- break;
- case 'paste':
- Alert.alert('Alert', 'paste action success');
- break;
- }
- }}>
-
- This view supports many actions.
-
-
-
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'cut':
+ Alert.alert('Alert', 'cut action success');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ case 'paste':
+ Alert.alert('Alert', 'paste action success');
+ break;
+ }
+ }}>
+ This view supports many actions.
+
+
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- Alert.alert('Alert', 'increment action success');
- break;
- case 'decrement':
- Alert.alert('Alert', 'decrement action success');
- break;
- }
- }}>
- Slider
-
-
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ Alert.alert('Alert', 'increment action success');
+ break;
+ case 'decrement':
+ Alert.alert('Alert', 'decrement action success');
+ break;
+ }
+ }}>
+ Slider
+
+
-
- {
- switch (event.nativeEvent.actionName) {
- case 'cut':
- Alert.alert('Alert', 'cut action success');
- break;
- case 'copy':
- Alert.alert('Alert', 'copy action success');
- break;
- case 'paste':
- Alert.alert('Alert', 'paste action success');
- break;
- }
- }}
- onPress={() => Alert.alert('Button has been pressed!')}
- accessibilityRole="button">
-
-
- Click me
-
-
-
-
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'cut':
+ Alert.alert('Alert', 'cut action success');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ case 'paste':
+ Alert.alert('Alert', 'paste action success');
+ break;
+ }
+ }}
+ onPress={() => Alert.alert('Button has been pressed!')}
+ accessibilityRole="button">
+
+ Click me
+
+
+
-
-
+
+
-
- {
- switch (event.nativeEvent.actionName) {
- case 'activate':
- Alert.alert('Alert', 'Activate accessibility action');
- break;
- case 'copy':
- Alert.alert('Alert', 'copy action success');
- break;
- }
- }}>
- Text
-
-
-
- )}
-
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'activate':
+ Alert.alert('Alert', 'Activate accessibility action');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ }
+ }}>
+ Text
+
+
+
);
}
}
@@ -1217,66 +1090,58 @@ class FakeSliderExample extends React.Component<{}, FakeSliderExampleState> {
render(): React.Node {
return (
-
- {theme => (
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- this.increment();
- break;
- case 'decrement':
- this.decrement();
- break;
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ this.increment();
+ break;
+ case 'decrement':
+ this.decrement();
+ break;
+ }
+ }}
+ accessibilityValue={{
+ min: 0,
+ now: this.state.current,
+ max: 100,
+ }}>
+ Fake Slider {this.state.current}
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ if (this.state.textualValue === 'center') {
+ this.setState({textualValue: 'right'});
+ } else if (this.state.textualValue === 'left') {
+ this.setState({textualValue: 'center'});
}
- }}
- accessibilityValue={{
- min: 0,
- now: this.state.current,
- max: 100,
- }}>
-
- Fake Slider {this.state.current}
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- if (this.state.textualValue === 'center') {
- this.setState({textualValue: 'right'});
- } else if (this.state.textualValue === 'left') {
- this.setState({textualValue: 'center'});
- }
- break;
- case 'decrement':
- if (this.state.textualValue === 'center') {
- this.setState({textualValue: 'left'});
- } else if (this.state.textualValue === 'right') {
- this.setState({textualValue: 'center'});
- }
- break;
+ break;
+ case 'decrement':
+ if (this.state.textualValue === 'center') {
+ this.setState({textualValue: 'left'});
+ } else if (this.state.textualValue === 'right') {
+ this.setState({textualValue: 'center'});
}
- }}
- accessibilityValue={{text: this.state.textualValue}}>
-
-
- Equalizer {this.state.textualValue}
-
-
-
+ break;
+ }
+ }}
+ accessibilityValue={{text: this.state.textualValue}}>
+
+ Equalizer {this.state.textualValue}
- )}
-
+
+
);
}
}
@@ -1312,65 +1177,57 @@ class FakeSliderExampleForAccessibilityValue extends React.Component<
render(): React.Node {
return (
-
- {theme => (
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- this.increment();
- break;
- case 'decrement':
- this.decrement();
- break;
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ this.increment();
+ break;
+ case 'decrement':
+ this.decrement();
+ break;
+ }
+ }}
+ aria-valuemax={100}
+ aria-valuemin={0}
+ aria-valuetext={'slider aria value text'}
+ aria-valuenow={this.state.current}>
+ Fake Slider {this.state.current}
+
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'increment':
+ if (this.state.textualValue === 'center') {
+ this.setState({textualValue: 'right'});
+ } else if (this.state.textualValue === 'left') {
+ this.setState({textualValue: 'center'});
}
- }}
- aria-valuemax={100}
- aria-valuemin={0}
- aria-valuetext={'slider aria value text'}
- aria-valuenow={this.state.current}>
-
- Fake Slider {this.state.current}
-
-
- {
- switch (event.nativeEvent.actionName) {
- case 'increment':
- if (this.state.textualValue === 'center') {
- this.setState({textualValue: 'right'});
- } else if (this.state.textualValue === 'left') {
- this.setState({textualValue: 'center'});
- }
- break;
- case 'decrement':
- if (this.state.textualValue === 'center') {
- this.setState({textualValue: 'left'});
- } else if (this.state.textualValue === 'right') {
- this.setState({textualValue: 'center'});
- }
- break;
+ break;
+ case 'decrement':
+ if (this.state.textualValue === 'center') {
+ this.setState({textualValue: 'left'});
+ } else if (this.state.textualValue === 'right') {
+ this.setState({textualValue: 'center'});
}
- }}
- accessibilityValue={{text: this.state.textualValue}}>
-
-
- Equalizer {this.state.textualValue}
-
-
-
+ break;
+ }
+ }}
+ accessibilityValue={{text: this.state.textualValue}}>
+
+ Equalizer {this.state.textualValue}
- )}
-
+
+
);
}
}
@@ -1447,8 +1304,7 @@ class AnnounceForAccessibility extends React.Component<{}> {
}
function SetAccessibilityFocusExample(props: {}): React.Node {
- const myRef = React.useRef>(null);
- const theme = React.useContext(RNTesterThemeContext);
+ const myRef = React.useRef>(null);
const onPress = () => {
if (myRef && myRef.current) {
@@ -1458,10 +1314,10 @@ function SetAccessibilityFocusExample(props: {}): React.Node {
return (
-
+
SetAccessibilityFocus on native element. This should get focus after
clicking the button!
-
+
);
@@ -1542,7 +1398,7 @@ class ImportantForAccessibilityExamples extends React.Component<{}> {
source={require('../../assets/trees.jpg')}
resizeMode="cover"
style={styles.ImageBackground}>
- not accessible
+ not accessible
@@ -1553,7 +1409,7 @@ class ImportantForAccessibilityExamples extends React.Component<{}> {
source={require('../../assets/trees.jpg')}
resizeMode="cover"
style={styles.ImageBackground}>
- accessible
+ accessible
@@ -1624,20 +1480,16 @@ class EnabledExample extends React.Component<
render(): React.Node {
return (
-
- {theme => (
-
-
- The {this.props.test} is{' '}
- {this.state.isEnabled ? 'enabled' : 'disabled'}
-
-
-
- )}
-
+
+
+ The {this.props.test} is{' '}
+ {this.state.isEnabled ? 'enabled' : 'disabled'}
+
+
+
);
}
}
@@ -1701,7 +1553,6 @@ function DisplayOptionStatusExample({
optionName: string,
}) {
const [statusEnabled, setStatusEnabled] = React.useState(false);
- const theme = React.useContext(RNTesterThemeContext);
React.useEffect(() => {
const listener = AccessibilityInfo.addEventListener(
// $FlowFixMe[prop-missing]
@@ -1719,11 +1570,11 @@ function DisplayOptionStatusExample({
}, [optionChecker, notification]);
return (
-
+
{optionName}
{' is '}
{statusEnabled ? 'enabled' : 'disabled'}.
-
+
);
}
@@ -1732,13 +1583,12 @@ function AccessibilityExpandedExample(): React.Node {
const [expand, setExpanded] = React.useState(false);
const expandAction = {name: 'expand'};
const collapseAction = {name: 'collapse'};
- const theme = React.useContext(RNTesterThemeContext);
return (
-
+
The following component announces expanded/collapsed state correctly
-
+
-
+
Announcing expanded/collapse and the visible text.
-
+
setExpanded(!expand)}
accessibilityState={{expanded: expand}}>
-
- Click me to change state
-
+ Click me to change state
@@ -1776,9 +1624,7 @@ function AccessibilityExpandedExample(): React.Node {
accessibilityState={{expanded: true}}
accessible={true}>
-
- Clicking me does not change state
-
+ Clicking me does not change state
@@ -1787,14 +1633,9 @@ function AccessibilityExpandedExample(): React.Node {
}
function AccessibilityTextInputWithArialabelledByAttributeExample(): React.Node {
- const theme = React.useContext(RNTesterThemeContext);
return (
-
- Phone Number
-
+ Phone Number
message ? (
-
- Log: {message}
-
+
+ Log: {message}
+
) : null;
diff --git a/packages/rn-tester/js/examples/AppState/AppStateExample.js b/packages/rn-tester/js/examples/AppState/AppStateExample.js
index 069ceba96419f2..4b89ebe42b31f6 100644
--- a/packages/rn-tester/js/examples/AppState/AppStateExample.js
+++ b/packages/rn-tester/js/examples/AppState/AppStateExample.js
@@ -11,11 +11,11 @@
'use strict';
import type {AppStateValues} from 'react-native/Libraries/AppState/AppState';
+import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
-import {type EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
-
-const React = require('react');
-const {AppState, Platform, Text, View} = require('react-native');
+import React from 'react';
+import {AppState, Platform, View} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
class AppStateSubscription extends React.Component<
$FlowFixMeProps,
@@ -85,27 +85,31 @@ class AppStateSubscription extends React.Component<
if (this.props.showMemoryWarnings) {
return (
- {this.state.memoryWarnings}
+ {this.state.memoryWarnings}
);
}
if (this.props.showCurrentOnly) {
return (
- {this.state.appState}
+ {this.state.appState}
);
}
if (this.props.detectEvents) {
return (
- {JSON.stringify(this.state.eventsDetected)}
+
+ {JSON.stringify(this.state.eventsDetected)}
+
);
}
return (
- {JSON.stringify(this.state.previousAppStates)}
+
+ {JSON.stringify(this.state.previousAppStates)}
+
);
}
@@ -120,7 +124,7 @@ exports.examples = [
title: 'AppState.currentState',
description: 'Can be null on app initialization',
render(): React.Node {
- return {AppState.currentState};
+ return {AppState.currentState};
},
},
{
diff --git a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
index 45b5e2b051fed4..dc0e99f1022ebf 100644
--- a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
+++ b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
@@ -11,6 +11,7 @@
import type {ColorSchemeName} from 'react-native/Libraries/Utilities/NativeAppearance';
import {RNTesterThemeContext, themes} from '../../components/RNTesterTheme';
+import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
import {useEffect, useState} from 'react';
import {Appearance, Button, Text, View, useColorScheme} from 'react-native';
@@ -143,8 +144,8 @@ const ToggleNativeAppearance = () => {
return (
- Native colorScheme: {nativeColorScheme}
- Current colorScheme: {colorScheme}
+ Native colorScheme: {nativeColorScheme}
+ Current colorScheme: {colorScheme}
);
}
@@ -243,7 +244,7 @@ class NetworkImageExample extends React.Component<
render(): React.Node {
return this.state.error != null ? (
- {this.state.error}
+ {this.state.error}
) : (
<>
this.setState({loading: false, error: null})}
/>
-
+
{this.state.progress.map(progress => `${progress}%`).join('\n')}
-
+
);
}
@@ -300,10 +301,10 @@ class ImageSizeExample extends React.Component<
return (
-
+
Actual dimensions:{'\n'}
Width: {this.state.width}, Height: {this.state.height}
-
+
);
}
@@ -349,16 +350,20 @@ class MultipleSourcesExample extends React.Component<
return (
-
+
Decrease image size
-
-
+
+
Increase image size
-
+
-
+
Container image size: {this.state.width}x{this.state.height}{' '}
-
+
-
+
Refresh Image
-
+
- Image Hash: {this.state.imageHash}
- Image URI: {loadingImage.uri}
+ Image Hash: {this.state.imageHash}
+ Image URI: {loadingImage.uri}
);
}
@@ -518,7 +523,9 @@ class OnLayoutExample extends React.Component<
render(): React.Node {
return (
- Adjust the image size to trigger the OnLayout handler.
+
+ Adjust the image size to trigger the OnLayout handler.
+
Decrease image size
@@ -527,9 +534,9 @@ class OnLayoutExample extends React.Component<
Increase image size
-
+
Container image size: {this.state.width}x{this.state.height}{' '}
-
+
- Layout Handler Message: {this.state.layoutHandlerMessage}
+
+ Layout Handler Message: {this.state.layoutHandlerMessage}
+
);
}
@@ -582,9 +591,9 @@ class OnPartialLoadExample extends React.Component<
render(): React.Node {
return (
-
+
Partial Load Function Executed: {JSON.stringify(this.state.hasLoaded)}
-
+
- Enabled: {isEnabled ? 'true' : 'false'}
+ Enabled: {isEnabled ? 'true' : 'false'}
@@ -1203,9 +1212,9 @@ exports.examples = [
tintColor={'#8e8e93'}
/>
-
+
It also works using the `tintColor` style prop
-
+
-
+
The `tintColor` prop has precedence over the `tintColor` style prop
-
+
-
+
It also works with downloaded images:
-
+
- Contain
+
+ Contain
+
- Cover
+
+ Cover
+
- Fill
+
+ Fill
+
- Scale Down
+
+ Scale Down
+
- Contain
+
+ Contain
+
- Cover
+
+ Cover
+
- Stretch
+
+ Stretch
+
- Repeat
+
+ Repeat
+
- Center
+
+ Center
+
{methods.map((method, index) => (
- {method}
+ `{method}`
- ⬇️
- ⬇️
+ ⬇️
+ ⬇️
)}
@@ -67,13 +68,11 @@ export const examples = [
actual={['no-such-variant', 'small-caps-12345']}
expected={undefined}>
{fontVariant => (
-
+
The quick brown fox jumps over the lazy dog.
-
+
)}
);
@@ -151,9 +150,9 @@ function Comparison({
}): React.Node {
return (
<>
- Actual
+ Actual
{children(actual)}
- Expected
+ Expected
{children(expected)}
);
diff --git a/packages/rn-tester/js/examples/JSResponderHandlerExample/JSResponderHandlerExample.js b/packages/rn-tester/js/examples/JSResponderHandlerExample/JSResponderHandlerExample.js
index 4c96b14697877c..6a187dd831b398 100644
--- a/packages/rn-tester/js/examples/JSResponderHandlerExample/JSResponderHandlerExample.js
+++ b/packages/rn-tester/js/examples/JSResponderHandlerExample/JSResponderHandlerExample.js
@@ -8,10 +8,9 @@
* @flow strict-local
*/
-import {PanResponder, ScrollView} from 'react-native';
-
-const React = require('react');
-const {StyleSheet, Text, View} = require('react-native');
+import RNTesterText from '../../components/RNTesterText';
+import {PanResponder, ScrollView, StyleSheet, View} from 'react-native';
+import React from 'react';
exports.displayName = 'JSResponderHandlerExample';
exports.framework = 'React';
@@ -40,7 +39,11 @@ exports.examples = [
views[i] = (
- I am row {i}
+
+ I am row {i}
+
);
@@ -69,6 +72,9 @@ const styles = StyleSheet.create({
row: {
height: 25,
},
+ rowText: {
+ color: 'black',
+ },
touchable_area: {
width: 150,
backgroundColor: 'lightgray',
diff --git a/packages/rn-tester/js/examples/Keyboard/KeyboardExample.js b/packages/rn-tester/js/examples/Keyboard/KeyboardExample.js
index becaea73e95fbc..90ffe164ed63e7 100644
--- a/packages/rn-tester/js/examples/Keyboard/KeyboardExample.js
+++ b/packages/rn-tester/js/examples/Keyboard/KeyboardExample.js
@@ -16,9 +16,10 @@ import type {
} from '../../types/RNTesterTypes';
import type {KeyboardEvent} from 'react-native/Libraries/Components/Keyboard/Keyboard';
+import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
import {useEffect, useState} from 'react';
-import {Keyboard, StyleSheet, Text, View} from 'react-native';
+import {Keyboard, StyleSheet, View} from 'react-native';
type KeyboardEventViewerProps = {
showEvent: 'keyboardWillShow' | 'keyboardDidShow',
@@ -48,20 +49,20 @@ const KeyboardEventViewer = (props: KeyboardEventViewerProps): React.Node => {
return (
-
- Keyboard is
+
+ Keyboard is
{isShown ? (
- open
+ open
) : (
- closed
+ closed
)}
-
+
-
+
{lastEvent
? JSON.stringify(lastEvent, null, 2)
: 'No events observed'}
-
+
);
diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
index 6c20b165587758..8711816bef1a0c 100644
--- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
+++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
@@ -10,9 +10,8 @@
'use strict';
-const React = require('react');
-const {useState} = require('react');
-const {
+import React, {useState} from 'react';
+import {
Alert,
Button,
KeyboardAvoidingView,
@@ -23,7 +22,7 @@ const {
TextInput,
TouchableOpacity,
View,
-} = require('react-native');
+} from 'react-native';
const onButtonPress = () => {
Alert.alert('Successfully Registered!');
@@ -59,7 +58,7 @@ const CloseButton = (
props.setModalOpen(false)}
style={styles.closeButton}>
- Close
+ Close
);
@@ -117,7 +116,9 @@ const KeyboardAvoidingViewBehaviour = () => {
setModalOpen(true)}>
-
+
Open Example
@@ -141,7 +142,7 @@ const KeyboardAvoidingDisabled = () => {
setModalOpen(true)}>
- Open Example
+ Open Example
@@ -163,7 +164,7 @@ const KeyboardAvoidingVerticalOffset = () => {
setModalOpen(true)}>
- Open Example
+ Open Example
@@ -186,7 +187,7 @@ const KeyboardAvoidingContentContainerStyle = () => {
setModalOpen(true)}>
- Open Example
+ Open Example
@@ -233,6 +234,10 @@ const styles = StyleSheet.create({
marginVertical: 10,
padding: 10,
},
+ touchableText: {
+ fontWeight: '500',
+ color: 'blue',
+ },
});
exports.title = 'KeyboardAvoidingView';
diff --git a/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js b/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js
index 4431bbe1bc213a..d6bf0c9451e395 100644
--- a/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js
+++ b/packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js
@@ -10,14 +10,14 @@
'use strict';
-const React = require('react');
-const {
+import RNTesterText from '../../components/RNTesterText';
+import React from 'react';
+import {
LayoutAnimation,
StyleSheet,
- Text,
TouchableOpacity,
View,
-} = require('react-native');
+} from 'react-native';
type ExampleViewSpec = {|
key: number,
@@ -102,39 +102,45 @@ class AddRemoveExample extends React.Component<{...}, AddRemoveExampleState> {
key={key}
style={styles.view}
onLayout={evt => console.log('Box onLayout')}>
- {key}
+ {key}
));
return (
- Add view
+ Add view
- Remove view
+ Remove view
- Reorder Views
+ Reorder Views
- Add view (no animation)
+
+ Add view (no animation)
+
- Remove view (no animation)
+
+ Remove view (no animation)
+
- Reorder Views (no animation)
+
+ Reorder Views (no animation)
+
{views}
@@ -181,12 +187,14 @@ class ReparentingExample extends React.Component<
- Toggle
+ Toggle
- Toggle (no animation)
+
+ Toggle (no animation)
+
@@ -199,13 +207,13 @@ class ReparentingExample extends React.Component<
const GreenSquare = () => (
- Green square
+ Green square
);
const BlueSquare = () => (
- Blue square
+ Blue square
);
@@ -230,7 +238,7 @@ class CrossFadeExample extends React.Component<{...}, CrossFadeExampleState> {
- Toggle
+ Toggle
@@ -292,13 +300,15 @@ class LayoutUpdateExample extends React.Component<
- Make box square
+
+ Make box square
+
-
+
{width}x{height}
-
+
);
@@ -315,6 +325,9 @@ const styles = StyleSheet.create({
padding: 10,
marginBottom: 10,
},
+ buttonText: {
+ color: 'black',
+ },
viewContainer: {
flex: 1,
flexDirection: 'row',
@@ -342,6 +355,9 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
+ squareText: {
+ color: '#fff',
+ },
});
exports.title = 'Layout Animation';
diff --git a/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js b/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js
index d125432e7c126e..2ec94c7ac6e9a7 100644
--- a/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js
+++ b/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js
@@ -15,14 +15,9 @@ import type {
ViewLayoutEvent,
} from 'react-native/Libraries/Components/View/ViewPropTypes';
-const React = require('react');
-const {
- Image,
- LayoutAnimation,
- StyleSheet,
- Text,
- View,
-} = require('react-native');
+import RNTesterText from '../../components/RNTesterText';
+import React from 'react';
+import {Image, LayoutAnimation, StyleSheet, View} from 'react-native';
type Props = $ReadOnly<{||}>;
type State = {
@@ -86,15 +81,18 @@ class LayoutEventExample extends React.Component {
const imageLayout = this.state.imageLayout || {x: '?', y: '?'};
return (
-
+
layout events are called on mount and whenever layout is recalculated.
Note that the layout event will typically be received{' '}
- before the layout has updated
- on screen, especially when using layout animations.{' '}
-
+ before the
+ layout has updated on screen, especially when using layout animations.
+ {' '}
+
Press here to change layout.
-
-
+
+
{
uri: 'https://www.facebook.com/favicon.ico',
}}
/>
-
+
ViewLayout:{' '}
{
/* $FlowFixMe[incompatible-type] (>=0.95.0 site=react_native_fb)
@@ -113,15 +111,15 @@ class LayoutEventExample extends React.Component {
// $FlowFixMe[unsafe-addition]
JSON.stringify(this.state.viewLayout, null, ' ') + '\n\n'
}
-
-
+
+
A simple piece of text.{this.state.extraText}
-
-
+
+
{'\n'}
Text w/h: {textLayout.width}/{textLayout.height + '\n'}
Image x/y: {imageLayout.x}/{imageLayout.y}
-
+
);
diff --git a/packages/rn-tester/js/examples/Layout/LayoutExample.js b/packages/rn-tester/js/examples/Layout/LayoutExample.js
index fe1f6a0978a78f..67ae250b9a8d0d 100644
--- a/packages/rn-tester/js/examples/Layout/LayoutExample.js
+++ b/packages/rn-tester/js/examples/Layout/LayoutExample.js
@@ -10,10 +10,11 @@
'use strict';
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const RNTesterPage = require('../../components/RNTesterPage');
-const React = require('react');
-const {StyleSheet, Text, View} = require('react-native');
+import RNTesterBlock from '../../components/RNTesterBlock';
+import RNTesterPage from '../../components/RNTesterPage';
+import RNTesterText from '../../components/RNTesterText';
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
class Circle extends React.Component<$FlowFixMeProps> {
render(): React.Node {
@@ -61,19 +62,19 @@ class LayoutExample extends React.Component<$FlowFixMeProps> {
return (
- row
+ row
{fiveColoredCircles}
- row-reverse
+ row-reverse
{fiveColoredCircles}
- column
+ column
{fiveColoredCircles}
- column-reverse
+ column-reverse
{fiveColoredCircles}
@@ -82,34 +83,36 @@ class LayoutExample extends React.Component<$FlowFixMeProps> {
styles.overlay,
{position: 'absolute', top: 15, left: 160},
]}>
- {'top: 15, left: 160'}
+
+ {'top: 15, left: 160'}
+
- flex-start
+ flex-start
{fiveColoredCircles}
- center
+ center
{fiveColoredCircles}
- flex-end
+ flex-end
{fiveColoredCircles}
- space-between
+ space-between
{fiveColoredCircles}
- space-around
+ space-around
{fiveColoredCircles}
- flex-start
+ flex-start
@@ -129,7 +132,7 @@ class LayoutExample extends React.Component<$FlowFixMeProps> {
- center
+ center
@@ -149,7 +152,7 @@ class LayoutExample extends React.Component<$FlowFixMeProps> {
- flex-end
+ flex-end
diff --git a/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js b/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js
index 6d9bfd857e9d1d..e08ccee41875a9 100644
--- a/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js
+++ b/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js
@@ -12,8 +12,10 @@
import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import RNTesterText from '../../components/RNTesterText';
+
import React from 'react';
-import {Platform, PlatformColor, StyleSheet, Text, View} from 'react-native';
+import {Platform, PlatformColor, StyleSheet, View} from 'react-native';
type Props = $ReadOnly<{
style: ViewStyleProp,
@@ -23,7 +25,7 @@ type Props = $ReadOnly<{
function GradientBox(props: Props): React.Node {
return (
- Linear Gradient
+ Linear Gradient
);
}
diff --git a/packages/rn-tester/js/examples/Linking/LinkingExample.js b/packages/rn-tester/js/examples/Linking/LinkingExample.js
index 7a04d7d4a4142c..5fdb4d3d2cc69c 100644
--- a/packages/rn-tester/js/examples/Linking/LinkingExample.js
+++ b/packages/rn-tester/js/examples/Linking/LinkingExample.js
@@ -9,18 +9,18 @@
'use strict';
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const React = require('react');
-const {
+import RNTesterBlock from '../../components/RNTesterBlock';
+import RNTesterText from '../../components/RNTesterText';
+import React from 'react';
+import {
Button,
Linking,
Platform,
StyleSheet,
- Text,
ToastAndroid,
TouchableOpacity,
View,
-} = require('react-native');
+} from 'react-native';
type Props = $ReadOnly<{|
url?: ?string,
@@ -47,7 +47,7 @@ class OpenURLButton extends React.Component {
return (
- Open {this.props.url}
+ Open {this.props.url}
);
@@ -77,7 +77,7 @@ class SendIntentButton extends React.Component {
return (
- {this.props.action}
+ {this.props.action}
);
@@ -99,9 +99,9 @@ class IntentAndroidExample extends React.Component {
{Platform.OS === 'android' && (
-
+
Next one will crash if Facebook app is not installed.
-
+
)}
- onShow is called {onShowCount} times
-
+
+ onShow is called {onShowCount} times
+
+
onDismiss is called {onDismissCount} times
-
+
{
@@ -98,7 +102,6 @@ const styles = StyleSheet.create({
},
modalView: {
margin: 20,
- backgroundColor: 'white',
borderRadius: 20,
padding: 35,
alignItems: 'center',
diff --git a/packages/rn-tester/js/examples/Modal/ModalPresentation.js b/packages/rn-tester/js/examples/Modal/ModalPresentation.js
index 872fbb59a7f959..8800f459661e7c 100644
--- a/packages/rn-tester/js/examples/Modal/ModalPresentation.js
+++ b/packages/rn-tester/js/examples/Modal/ModalPresentation.js
@@ -14,12 +14,13 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import type {Props as ModalProps} from 'react-native/Libraries/Modal/Modal';
import RNTOption from '../../components/RNTOption';
+import RNTesterButton from '../../components/RNTesterButton';
+import RNTesterText from '../../components/RNTesterText';
+import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import * as React from 'react';
-import {useCallback, useState} from 'react';
+import {useCallback, useContext, useState} from 'react';
import {Modal, Platform, StyleSheet, Switch, Text, View} from 'react-native';
-const RNTesterButton = require('../../components/RNTesterButton');
-
const animationTypes = ['slide', 'none', 'fade'];
const presentationStyles = [
'fullScreen',
@@ -72,6 +73,7 @@ function ModalPresentation() {
const hardwareAccelerated = props.hardwareAccelerated;
const statusBarTranslucent = props.statusBarTranslucent;
const backdropColor = props.backdropColor;
+ const backgroundColor = useContext(RNTesterThemeContext).BackgroundColor;
const [currentOrientation, setCurrentOrientation] = useState('unknown');
@@ -84,7 +86,9 @@ function ModalPresentation() {
const controls = (
<>
- Status Bar Translucent 🟢
+
+ Status Bar Translucent 🟢
+
@@ -93,7 +97,9 @@ function ModalPresentation() {
/>
- Hardware Acceleration 🟢
+
+ Hardware Acceleration 🟢
+
@@ -105,7 +111,7 @@ function ModalPresentation() {
/>
- Presentation Style ⚫️
+ Presentation Style ⚫️
{presentationStyles.map(type => (
- Transparent
+ Transparent
@@ -146,14 +152,16 @@ function ModalPresentation() {
/>
{Platform.OS === 'ios' && presentationStyle !== 'overFullScreen' ? (
-
+
iOS Modal can only be transparent with 'overFullScreen' Presentation
Style
-
+
) : null}
- Supported Orientation ⚫️
+
+ Supported Orientation ⚫️
+
{supportedOrientations.map(orientation => (
- Actions
+ Actions
- Backdrop Color ⚫️
+ Backdrop Color ⚫️
{backdropColors.map(type => (
-
+
This modal was presented with animationType: '
{props.animationType}'
@@ -270,7 +278,7 @@ function ModalPresentation() {
- Animation Type
+ Animation Type
{animationTypes.map(type => (
{
state: any | {js: AnimatedValue, native: AnimatedValue} = {
@@ -58,13 +58,13 @@ class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
- Native:
+ Native:
{this.props.children(this.state.native)}
- JavaScript{':'}
+ JavaScript{':'}
{this.props.children(this.state.js)}
@@ -115,7 +115,7 @@ class ValueListenerExample extends React.Component<{...}, $FlowFixMeState> {
]}
/>
- Value: {this.state.progress}
+ Value: {this.state.progress}
);
@@ -184,10 +184,10 @@ const InternalSettings = () => {
/>
{tracking && (
-
+
{`JS Stall filtered: ${Math.round(filteredStall)}, `}
{`last: ${busyTime !== null ? busyTime.toFixed(8) : ''}`}
-
+
)}
);
@@ -230,7 +230,9 @@ class EventExample extends React.Component<{...}, $FlowFixMeState> {
justifyContent: 'center',
paddingLeft: 100,
}}>
- Scroll me sideways!
+
+ Scroll me sideways!
+
@@ -301,13 +303,13 @@ class TrackingExample extends React.Component<
- Native:
+ Native:
{this.renderBlock(this.state.native, this.state.toNative)}
- JavaScript{':'}
+ JavaScript{':'}
{this.renderBlock(this.state.js, this.state.toJS)}
diff --git a/packages/rn-tester/js/examples/OSSLibraryExample/OSSLibraryExample.js b/packages/rn-tester/js/examples/OSSLibraryExample/OSSLibraryExample.js
index 4b878d2b94a725..b3289a8e58ff47 100644
--- a/packages/rn-tester/js/examples/OSSLibraryExample/OSSLibraryExample.js
+++ b/packages/rn-tester/js/examples/OSSLibraryExample/OSSLibraryExample.js
@@ -19,8 +19,9 @@ import {
import {NativeSampleModule} from '@react-native/oss-library-example';
import * as React from 'react';
import {useRef, useState} from 'react';
-import {Button, Text, View} from 'react-native';
+import {Button, View} from 'react-native';
import {StyleSheet} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
const colors = [
'#0000FF',
@@ -105,7 +106,7 @@ function NativeSampleModuleWrapper(props: {}): React.Node {
}
}}
/>
- {randomNumber}
+ {randomNumber}
);
}
diff --git a/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js b/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
index 27ff257ea489e5..a93697e982dd2f 100644
--- a/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
+++ b/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
@@ -10,8 +10,9 @@
import {type EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
-const React = require('react');
-const {DeviceEventEmitter, Text, View} = require('react-native');
+import React from 'react';
+import {DeviceEventEmitter, View} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
class OrientationChangeExample extends React.Component<{...}, $FlowFixMeState> {
_orientationSubscription: EventSubscription;
@@ -50,7 +51,7 @@ class OrientationChangeExample extends React.Component<{...}, $FlowFixMeState> {
render(): React.Node {
return (
- {JSON.stringify(this.state)}
+ {JSON.stringify(this.state)}
);
}
diff --git a/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js b/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
index 13ffde3fc4c543..827c2819e8f66a 100644
--- a/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
+++ b/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
@@ -13,10 +13,10 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import type MemoryInfo from 'react-native/src/private/webapis/performance/MemoryInfo';
import type ReactNativeStartupTiming from 'react-native/src/private/webapis/performance/ReactNativeStartupTiming';
-import {RNTesterThemeContext} from '../../components/RNTesterTheme';
+import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
-import {useContext, useEffect} from 'react';
-import {Button, StyleSheet, Text, View} from 'react-native';
+import {useEffect} from 'react';
+import {Button, StyleSheet, View} from 'react-native';
import Performance from 'react-native/src/private/webapis/performance/Performance';
import {
type PerformanceEntry,
@@ -28,8 +28,6 @@ const {useState, useCallback} = React;
const performance = new Performance();
function MemoryExample(): React.Node {
- const theme = useContext(RNTesterThemeContext);
-
// Memory API testing
const [memoryInfo, setMemoryInfo] = useState(null);
const onGetMemoryInfo = useCallback(() => {
@@ -41,23 +39,21 @@ function MemoryExample(): React.Node {
-
+
{`jsHeapSizeLimit: ${String(memoryInfo?.jsHeapSizeLimit)} bytes`}
-
-
+
+
{`totalJSHeapSize: ${String(memoryInfo?.totalJSHeapSize)} bytes`}
-
-
+
+
{`usedJSHeapSize: ${String(memoryInfo?.usedJSHeapSize)} bytes`}
-
+
);
}
function StartupTimingExample(): React.Node {
- const theme = useContext(RNTesterThemeContext);
-
// React Startup Timing API testing
const [startUpTiming, setStartUpTiming] =
useState(null);
@@ -73,43 +69,28 @@ function StartupTimingExample(): React.Node {
title="Click to update React startup timing"
/>
- {`startTime: ${String(startUpTiming?.startTime)} ms`}
- {`initializeRuntimeStart: ${String(
+ {`startTime: ${String(startUpTiming?.startTime)} ms`}
+ {`initializeRuntimeStart: ${String(
startUpTiming?.initializeRuntimeStart,
- )} ms`}
-
+ )} ms`}
+
{`executeJavaScriptBundleEntryPointStart: ${String(
startUpTiming?.executeJavaScriptBundleEntryPointStart,
)} ms`}
-
- {`executeJavaScriptBundleEntryPointEnd: ${String(
+
+ {`executeJavaScriptBundleEntryPointEnd: ${String(
startUpTiming?.executeJavaScriptBundleEntryPointEnd,
- )} ms`}
- {`initializeRuntimeEnd: ${String(
+ )} ms`}
+ {`initializeRuntimeEnd: ${String(
startUpTiming?.initializeRuntimeEnd,
- )} ms`}
- {`endTime: ${String(startUpTiming?.endTime)} ms`}
+ )} ms`}
+ {`endTime: ${String(startUpTiming?.endTime)} ms`}
);
}
function PerformanceObserverUserTimingExample(): React.Node {
- const theme = useContext(RNTesterThemeContext);
-
const [entries, setEntries] = useState<$ReadOnlyArray>([]);
useEffect(() => {
@@ -140,15 +121,15 @@ function PerformanceObserverUserTimingExample(): React.Node {
{entries.map((entry, index) =>
entry.entryType === 'mark' ? (
-
+
Mark {entry.name}: {entry.startTime.toFixed(2)}
-
+
) : (
-
+
Measure {entry.name}: {entry.startTime.toFixed(2)} -{' '}
{(entry.startTime + entry.duration).toFixed(2)} (
{entry.duration.toFixed(2)}ms)
-
+
),
)}
@@ -157,8 +138,6 @@ function PerformanceObserverUserTimingExample(): React.Node {
}
function PerformanceObserverEventTimingExample(): React.Node {
- const theme = useContext(RNTesterThemeContext);
-
const [count, setCount] = useState(0);
const [entries, setEntries] = useState<
@@ -192,7 +171,7 @@ function PerformanceObserverEventTimingExample(): React.Node {
/>
{entries.map((entry, index) => (
-
+
Event: {entry.name}
{'\n'}
Start: {entry.startTime.toFixed(2)}
@@ -204,7 +183,7 @@ function PerformanceObserverEventTimingExample(): React.Node {
{(entry.processingStart - entry.startTime).toFixed(2)}ms){'\n'}
Processing end: {entry.processingEnd.toFixed(2)} (duration:{' '}
{(entry.processingEnd - entry.processingStart).toFixed(2)}ms){'\n'}
-
+
))}
@@ -212,8 +191,6 @@ function PerformanceObserverEventTimingExample(): React.Node {
}
function PerformanceObserverLongtaskExample(): React.Node {
- const theme = useContext(RNTesterThemeContext);
-
const [entries, setEntries] = useState<$ReadOnlyArray>([]);
useEffect(() => {
@@ -236,10 +213,10 @@ function PerformanceObserverLongtaskExample(): React.Node {
{entries.map((entry, index) => (
-
+
Long task {entry.name}: {entry.startTime} -{' '}
{entry.startTime + entry.duration} ({entry.duration}ms)
-
+
))}
diff --git a/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js b/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
index 5bd6dd8abf2474..f80eb1d78372c6 100644
--- a/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
+++ b/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
@@ -11,9 +11,10 @@
'use strict';
import RNTesterButton from '../../components/RNTesterButton';
+import RNTesterText from '../../components/RNTesterText';
import RNTOption from '../../components/RNTOption';
import * as React from 'react';
-import {PermissionsAndroid, StyleSheet, Text, View} from 'react-native';
+import {PermissionsAndroid, StyleSheet, View} from 'react-native';
function PermissionsExample() {
const [permission, setPermission] = React.useState(
@@ -50,7 +51,7 @@ function PermissionsExample() {
return (
- Select Permission
+ Select Permission
- Check Permission
+
+ Check Permission
+
-
+
Request Permission
-
+
- Permission Status: {hasPermission}
+
+ Permission Status: {hasPermission}
+
);
}
@@ -114,7 +119,6 @@ function PermissionsExample() {
const styles = StyleSheet.create({
container: {
flex: 1,
- backgroundColor: 'white',
},
block: {
borderColor: 'rgba(0,0,0, 0.1)',
diff --git a/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js b/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js
index 5dd49eb424042e..fcfed25734eb1e 100644
--- a/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js
+++ b/packages/rn-tester/js/examples/PixelRatio/PixelRatioExample.js
@@ -10,15 +10,10 @@
'use strict';
+import RNTesterText from '../../components/RNTesterText';
+
import React, {useState} from 'react';
-import {
- Button,
- PixelRatio,
- StyleSheet,
- Text,
- TextInput,
- View,
-} from 'react-native';
+import {Button, PixelRatio, StyleSheet, TextInput, View} from 'react-native';
function LayoutSizeToPixel() {
const [layoutDPSize, setLayoutDPSize] = useState(0);
@@ -35,7 +30,9 @@ function LayoutSizeToPixel() {
- Layout Size(dp):
+
+ Layout Size(dp):{' '}
+
- Pixel Size:
- {pixelSize}px
+ Pixel Size:
+ {pixelSize}px
@@ -68,7 +65,9 @@ function RoundToNearestPixel() {
- Layout Size(dp):
+
+ Layout Size(dp):{' '}
+
- Nearest Layout Size:
- {pixelSize}dp
+
+ Nearest Layout Size:{' '}
+
+ {pixelSize}dp
@@ -98,8 +99,10 @@ function GetPixelRatio() {
{pixelDensity ? (
- Pixel Density:
- {pixelDensity}
+
+ Pixel Density:{' '}
+
+ {pixelDensity}
) : null}
@@ -120,8 +123,8 @@ function GetFontScale() {
{fontScale ? (
- Font scale:
- {fontScale}
+ Font scale:
+ {fontScale}
) : null}
@@ -157,7 +160,6 @@ const styles = StyleSheet.create({
},
card: {
width: 200,
- height: 200,
alignItems: 'center',
justifyContent: 'center',
backfaceVisibility: 'hidden',
diff --git a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
index 5c01aa2dd379f8..812a81ee339bb6 100644
--- a/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
+++ b/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
@@ -10,9 +10,9 @@
import Platform from 'react-native/Libraries/Utilities/Platform';
-const React = require('react');
-const ReactNative = require('react-native');
-const {DynamicColorIOS, PlatformColor, StyleSheet, Text, View} = ReactNative;
+import React from 'react';
+import {DynamicColorIOS, PlatformColor, StyleSheet, View} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
function PlatformColorsExample() {
function createTable() {
@@ -175,7 +175,7 @@ function PlatformColorsExample() {
for (let color of colors) {
table.push(
- {color.label}
+ {color.label}
- {color.label}
+ {color.label}
-
+
DynamicColorIOS({'{\n'}
{' '}light: 'red', dark: 'blue'{'\n'}
{'}'})
-
+
-
+
DynamicColorIOS({'{\n'}
{' '}light: 'red', dark: 'blue'{'\n'}
{'}'})
-
+
-
+
DynamicColorIOS({'{\n'}
{' '}light: PlatformColor('systemBlueColor'),{'\n'}
{' '}dark: PlatformColor('systemRedColor'),{'\n'}
{'}'})
-
+
) : (
- Not applicable on this platform
+
+ Not applicable on this platform
+
);
}
@@ -283,13 +285,13 @@ function VariantColorsExample() {
return (
-
+
{Platform.select({
ios: "DynamicColorIOS({light: 'red', dark: 'blue'})",
android: "PlatformColor('?attr/colorAccent')",
default: 'Unexpected Platform.OS: ' + Platform.OS,
})}
-
+
current + 1);
}}>
{({pressed}) => (
-
+
{pressed ? 'Pressed!' : 'Press Me'}
)}
@@ -242,7 +242,7 @@ function PressableNativeMethods() {
-
+
{status == null
? 'Missing Ref!'
: status === true
diff --git a/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js b/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js
index bc95ccbb01af02..c08a06f0091e26 100644
--- a/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js
+++ b/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js
@@ -9,15 +9,15 @@
'use strict';
-const React = require('react');
-const {
+import React from 'react';
+import {
RefreshControl,
ScrollView,
StyleSheet,
- Text,
TouchableWithoutFeedback,
View,
-} = require('react-native');
+} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
const styles = StyleSheet.create({
row: {
@@ -45,9 +45,9 @@ class Row extends React.Component {
return (
-
+
{this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
-
+
);
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index a67ba9766d6c0e..faf56a7bdd1480 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -11,6 +11,7 @@
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import RNTesterText from '../../components/RNTesterText';
import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
import nullthrows from 'nullthrows';
import * as React from 'react';
@@ -40,9 +41,9 @@ class EnableDisableList extends React.Component<{}, {scrollEnabled: boolean}> {
scrollEnabled={this.state.scrollEnabled}>
{ITEMS.map(createItemRow)}
-
- {'Scrolling enabled = ' + this.state.scrollEnabled.toString()}
-
+
+ Scrolling enabled = {this.state.scrollEnabled.toString()}
+
);
};
@@ -28,7 +30,7 @@ const ToastWithLongDuration = () => {
return (
ToastAndroid.show('Sending message..', ToastAndroid.LONG)}>
- Tap to view toast
+ Tap to view toast
);
};
@@ -43,7 +45,7 @@ const ToastWithTopGravity = () => {
ToastAndroid.TOP,
)
}>
- Tap to view toast
+ Tap to view toast
);
};
@@ -58,7 +60,7 @@ const ToastWithCenterGravity = () => {
ToastAndroid.CENTER,
)
}>
- Tap to view toast
+ Tap to view toast
);
};
@@ -73,7 +75,7 @@ const ToastWithBottomGravity = () => {
ToastAndroid.BOTTOM,
)
}>
- Tap to view toast
+ Tap to view toast
);
};
@@ -90,7 +92,7 @@ const ToastWithXOffset = () => {
0,
)
}>
- Tap to view toast
+ Tap to view toast
);
};
@@ -107,14 +109,14 @@ const ToastWithYOffset = () => {
100,
)
}>
- Tap to view toast
+ Tap to view toast
);
};
const styles = StyleSheet.create({
text: {
- color: 'black',
+ color: 'blue',
},
});
diff --git a/packages/rn-tester/js/examples/Touchable/TouchableExample.js b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
index 1a4b83b0b6de7f..8cc0c7ee5b64ba 100644
--- a/packages/rn-tester/js/examples/Touchable/TouchableExample.js
+++ b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
@@ -10,19 +10,19 @@
import {useEffect, useRef, useState} from 'react';
-const React = require('react');
-const {
+import React from 'react';
+import {
Animated,
Image,
Platform,
StyleSheet,
- Text,
TouchableHighlight,
TouchableNativeFeedback,
TouchableOpacity,
TouchableWithoutFeedback,
View,
-} = require('react-native');
+} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
const forceTouchAvailable =
(Platform.OS === 'ios' && Platform.constants.forceTouchAvailable) || false;
@@ -62,12 +62,16 @@ class TouchableHighlightBox extends React.Component<{...}, $FlowFixMeState> {
underlayColor="rgb(210, 230, 255)"
onPress={this.touchableOnPress}>
- Tap Here For Custom Highlight!
+
+ Tap Here For Custom Highlight!
+
- {textLog}
+
+ {textLog}
+
);
@@ -102,11 +106,15 @@ class TouchableWithoutFeedbackBox extends React.Component<
onPress={this.textOnPress}
testID="touchable_without_feedback_button">
- Tap Here For No Feedback!
+
+ Tap Here For No Feedback!
+
- {textLog}
+
+ {textLog}
+
);
@@ -134,14 +142,14 @@ class TextOnPressBox extends React.Component<{...}, $FlowFixMeState> {
return (
-
Text has built-in onPress handling
-
+
- {textLog}
+ {textLog}
);
@@ -166,14 +174,14 @@ class TouchableFeedbackEvents extends React.Component<{...}, $FlowFixMeState> {
onPressIn={() => this._appendEvent('pressIn')}
onPressOut={() => this._appendEvent('pressOut')}
onLongPress={() => this._appendEvent('longPress')}>
- Press Me
+ Press Me
{this.state.eventLog.map((e, ii) => (
- {e}
+ {e}
))}
@@ -207,14 +215,14 @@ class TouchableDelayEvents extends React.Component<{...}, $FlowFixMeState> {
onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
delayLongPress={800}
onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
- Press Me
+ Press Me
{this.state.eventLog.map((e, ii) => (
- {e}
+ {e}
))}
@@ -244,7 +252,7 @@ class ForceTouchExample extends React.Component<{...}, $FlowFixMeState> {
return (
- {this._renderConsoleText()}
+ {this._renderConsoleText()}
{
this.setState({force: event.nativeEvent.force})
}
onResponderRelease={event => this.setState({force: 0})}>
- Press Me
+ Press Me
@@ -290,11 +298,13 @@ class TouchableHitSlop extends React.Component<{...}, $FlowFixMeState> {
style={styles.hitSlopWrapper}
hitSlop={{top: 30, bottom: 30, left: 60, right: 60}}
testID="touchable_hit_slop_button">
- Press Outside This View
+
+ Press Outside This View
+
- {log}
+ {log}
);
@@ -316,14 +326,14 @@ function TouchableNativeMethodChecker<
-
+
{props.name + ': '}
{status == null
? 'Missing Ref!'
: status === true
? 'Native Methods Exist'
: 'Native Methods Missing!'}
-
+
);
}
@@ -348,11 +358,15 @@ class TouchableDisabled extends React.Component<{...}> {
return (
- Disabled TouchableOpacity
+
+ Disabled TouchableOpacity
+
- Enabled TouchableOpacity
+
+ Enabled TouchableOpacity
+
{
underlayColor="rgb(210, 230, 255)"
style={[styles.row, styles.block]}
onPress={() => console.log('custom THW text - highlight')}>
- Disabled TouchableHighlight
+
+ Disabled TouchableHighlight
+
{
underlayColor="rgb(210, 230, 255)"
style={[styles.row, styles.block]}
onPress={() => console.log('custom THW text - highlight')}>
- Enabled TouchableHighlight
+
+ Enabled TouchableHighlight
+
console.log('TWOF has been clicked')}
disabled={true}>
-
Disabled TouchableWithoutFeedback
-
+
@@ -391,9 +409,9 @@ class TouchableDisabled extends React.Component<{...}> {
onPress={() => console.log('TWOF has been clicked')}
disabled={false}>
-
+
Enabled TouchableWithoutFeedback
-
+
@@ -403,9 +421,10 @@ class TouchableDisabled extends React.Component<{...}> {
onPress={() => console.log('custom TNF has been clicked')}
background={TouchableNativeFeedback.SelectableBackground()}>
-
+
Enabled TouchableNativeFeedback
-
+
@@ -414,10 +433,10 @@ class TouchableDisabled extends React.Component<{...}> {
onPress={() => console.log('custom TNF has been clicked')}
background={TouchableNativeFeedback.SelectableBackground()}>
-
Disabled TouchableNativeFeedback
-
+
@@ -441,9 +460,9 @@ function CustomRippleRadius() {
onPress={() => console.log('custom TNF has been clicked')}
background={TouchableNativeFeedback.Ripple('orange', true, 30)}>
-
+
radius 30
-
+
@@ -453,9 +472,9 @@ function CustomRippleRadius() {
150,
)}>
-
+
radius 150
-
+
@@ -463,9 +482,9 @@ function CustomRippleRadius() {
onPress={() => console.log('custom TNF has been clicked')}
background={TouchableNativeFeedback.SelectableBackground(70)}>
-
+
radius 70, with border
-
+
@@ -497,7 +516,7 @@ const TouchableHighlightUnderlayMethods = () => {
onPress={() => {
console.log('TouchableHighlight underlay shown!');
}}>
- {underlayVisible}
+ {underlayVisible}
);
};
@@ -514,12 +533,12 @@ const TouchableTouchSoundDisabled = () => {
console.log('touchSoundDisabled pressed!')}>
-
Touchables make a sound on Android, which can be turned off.
-
+
{
}}
onPress={toggleTouchableSound}
touchSoundDisabled={soundEnabled}>
-
+
{soundEnabled
? 'Disable Touchable Sound'
: 'Enable Touchable Sound'}
-
+
) : null}
@@ -567,11 +586,11 @@ function TouchableOnFocus>() {
ref={ref}
onFocus={toggleFocus}
onPress={focusTouchable}>
-
+
{focusStatus}
{'\n'}
{isBlurred}
-
+
);
}
@@ -624,7 +643,6 @@ const styles = StyleSheet.create({
margin: 10,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
- backgroundColor: '#f9f9f9',
},
eventLogBox: {
padding: 10,
@@ -632,7 +650,6 @@ const styles = StyleSheet.create({
height: 120,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
- backgroundColor: '#f9f9f9',
},
forceTouchBox: {
padding: 10,
diff --git a/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js b/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js
index 58d1e5fcef1a69..dd9d40cc5776b1 100644
--- a/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js
+++ b/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js
@@ -16,12 +16,12 @@ import NativeCxxModuleExample, {
EnumNone,
} from '../../../NativeCxxModuleExample/NativeCxxModuleExample';
import styles from './TurboModuleExampleCommon';
+import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
import {
DeviceEventEmitter,
FlatList,
RootTagContext,
- Text,
TouchableOpacity,
View,
} from 'react-native';
@@ -252,8 +252,10 @@ class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
const result = this.state.testResults[name] || {};
return (
- {JSON.stringify(result.value)}
- {result.type}
+
+ {JSON.stringify(result.value)}
+
+ {result.type}
);
}
@@ -309,12 +311,16 @@ class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
this._setResult(item, this._tests[item]()),
)
}>
- Run function call tests
+
+ Run function call tests
+
this.setState({testResults: {}})}
style={[styles.column, styles.button]}>
- Clear results
+
+ Clear results
+
{
this._setResult(item, this._tests[item]())}>
- {item}
+ {item}
{this._renderResult(item)}
)}
/>
- Report errors tests
+
+ Report errors tests
+
{
this._setResult(item, this._errorTests[item]())}>
- {item}
+ {item}
{this._renderResult(item)}
diff --git a/packages/rn-tester/js/examples/TurboModule/SampleLegacyModuleExample.js b/packages/rn-tester/js/examples/TurboModule/SampleLegacyModuleExample.js
index 36f3af9de803c5..a558f7550ba570 100644
--- a/packages/rn-tester/js/examples/TurboModule/SampleLegacyModuleExample.js
+++ b/packages/rn-tester/js/examples/TurboModule/SampleLegacyModuleExample.js
@@ -11,13 +11,13 @@
import type {RootTag} from 'react-native/Libraries/ReactNative/RootTag';
import styles from './TurboModuleExampleCommon';
+import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
import {
FlatList,
NativeModules,
Platform,
RootTagContext,
- Text,
TouchableOpacity,
View,
} from 'react-native';
@@ -197,10 +197,10 @@ class SampleLegacyModuleExample extends React.Component<{||}, State> {
const result = this.state.testResults[name] || {};
return (
-
+
{stringify(result.value)}
-
- {result.type}
+
+ {result.type}
);
}
@@ -225,12 +225,16 @@ class SampleLegacyModuleExample extends React.Component<{||}, State> {
}
})
}>
- Run all tests
+
+ Run all tests
+
this.setState({testResults: {}})}
style={[styles.column, styles.button]}>
- Clear results
+
+ Clear results
+
{
this._setResult(item, this._tests[item]())}>
- {item}
+ {item}
{this._renderResult(item)}
diff --git a/packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js b/packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js
index 2d590df3907a3d..fc6d991c4e2e2c 100644
--- a/packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js
+++ b/packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js
@@ -12,14 +12,9 @@ import type {RootTag} from 'react-native/Libraries/ReactNative/RootTag';
import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
import styles from './TurboModuleExampleCommon';
+import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
-import {
- FlatList,
- RootTagContext,
- Text,
- TouchableOpacity,
- View,
-} from 'react-native';
+import {FlatList, RootTagContext, TouchableOpacity, View} from 'react-native';
import NativeSampleTurboModule from 'react-native/Libraries/TurboModule/samples/NativeSampleTurboModule';
import {EnumInt} from 'react-native/Libraries/TurboModule/samples/NativeSampleTurboModule';
@@ -200,8 +195,10 @@ class SampleTurboModuleExample extends React.Component<{||}, State> {
const result = this.state.testResults[name] || {};
return (
- {JSON.stringify(result.value)}
- {result.type}
+
+ {JSON.stringify(result.value)}
+
+ {result.type}
);
}
@@ -258,12 +255,16 @@ class SampleTurboModuleExample extends React.Component<{||}, State> {
this._setResult(item, this._tests[item]()),
)
}>
- Run all tests
+
+ Run all tests
+
this.setState({testResults: {}})}
style={[styles.column, styles.button]}>
- Clear results
+
+ Clear results
+
{
this._setResult(item, this._tests[item]())}>
- {item}
+ {item}
{this._renderResult(item)}
)}
/>
- Report errors tests
+
+ Report errors tests
+
{
this._setResult(item, this._errorTests[item]())}>
- {item}
+ {item}
{this._renderResult(item)}
diff --git a/packages/rn-tester/js/examples/Vibration/VibrationExample.js b/packages/rn-tester/js/examples/Vibration/VibrationExample.js
index cb0371fe653fb5..48cf0cd4fe4496 100644
--- a/packages/rn-tester/js/examples/Vibration/VibrationExample.js
+++ b/packages/rn-tester/js/examples/Vibration/VibrationExample.js
@@ -10,15 +10,15 @@
'use strict';
-const React = require('react');
-const {
+import RNTesterText from '../../components/RNTesterText';
+import React from 'react';
+import {
Platform,
StyleSheet,
- Text,
TouchableHighlight,
Vibration,
View,
-} = require('react-native');
+} from 'react-native';
exports.framework = 'React';
exports.title = 'Vibration';
@@ -53,7 +53,7 @@ exports.examples = [
render(): React.Node {
return (
- {patternDescription}
+ {patternDescription}
);
},
@@ -66,7 +66,7 @@ exports.examples = [
style={styles.wrapper}
onPress={() => Vibration.vibrate()}>
- Vibrate
+ Vibrate
);
@@ -80,7 +80,7 @@ exports.examples = [
style={styles.wrapper}
onPress={() => Vibration.vibrate(pattern)}>
- Vibrate once
+ Vibrate once
);
@@ -94,7 +94,9 @@ exports.examples = [
style={styles.wrapper}
onPress={() => Vibration.vibrate(pattern, true)}>
- Vibrate until cancel
+
+ Vibrate until cancel
+
);
@@ -108,7 +110,7 @@ exports.examples = [
style={styles.wrapper}
onPress={() => Vibration.cancel()}>
- Cancel
+ Cancel
);
@@ -125,4 +127,7 @@ const styles = StyleSheet.create({
backgroundColor: '#eeeeee',
padding: 10,
},
+ buttonText: {
+ color: 'black',
+ },
});
diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
index 2bb0ecff29d709..153591473289d8 100644
--- a/packages/rn-tester/js/examples/View/ViewExample.js
+++ b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -12,8 +12,10 @@
import type {RNTesterModule} from '../../types/RNTesterTypes';
+import RNTesterText from '../../components/RNTesterText';
+
import * as React from 'react';
-import {Platform, Pressable, StyleSheet, Text, View} from 'react-native';
+import {Platform, Pressable, StyleSheet, View} from 'react-native';
class ViewBorderStyleExample extends React.Component<
$ReadOnly<{||}>,
@@ -39,7 +41,9 @@ class ViewBorderStyleExample extends React.Component<
}
: null,
]}>
- Dashed border style
+
+ Dashed border style
+
- Dotted border style
+
+ Dotted border style
+
@@ -92,7 +98,7 @@ class OffscreenAlphaCompositing extends React.Component<
testID="offscreen-alpha-compositing-button"
onPress={this._handlePress}>
- Blobs
+ Blobs
@@ -113,13 +119,13 @@ class OffscreenAlphaCompositing extends React.Component<
]}
/>
-
+
Same blobs, but their shared container have 0.5 opacity
-
-
+
+
Tap to {this.state.active ? 'activate' : 'deactivate'}{' '}
needsOffscreenAlphaCompositing
-
+
@@ -175,7 +181,9 @@ class ZIndexExample extends React.Component<
return (
- Tap to flip sorting order
+
+ Tap to flip sorting order
+
- ZIndex {indices[0]}
+ ZIndex {indices[0]}
- ZIndex {indices[1]}
+ ZIndex {indices[1]}
- ZIndex {indices[2]}
+ ZIndex {indices[2]}
- ZIndex {indices[3]}
+ ZIndex {indices[3]}
@@ -316,9 +324,9 @@ class DisplayNoneStyle extends React.Component<
return (
-
+
Press to toggle `display: none`
-
+
- Unset
+ Unset
- Classic
+ Classic
- Strict
+ Strict
@@ -687,11 +695,11 @@ function BoxSizingExample(): React.Node {
return (
- Content box 50x25
+ Content box 50x25
- Border box 50x25
+ Border box 50x25
@@ -715,7 +723,7 @@ export default ({
- Blue background
+ Blue background
);
},
@@ -728,7 +736,7 @@ export default ({
- 5px blue border
+ 5px blue border
);
},
@@ -749,18 +757,22 @@ export default ({
testID="view-test-padding-margin"
style={{borderColor: '#bb0000', borderWidth: 0.5}}>
- 5px padding
+ 5px padding
- 5px margin
+ 5px margin
- 5px margin and padding,
- widthAutonomous=true
+
+ 5px margin and padding,
+
+
+ widthAutonomous=true
+
);
@@ -773,11 +785,11 @@ export default ({
return (
-
+
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames. Use
sparingly.
-
+
{Platform.OS === 'ios' && (
-
+
View with continuous border curve
-
+
)}
@@ -1035,17 +1047,17 @@ export default ({
- undefined
+ undefined
- hidden
+ hidden
- visible
+ visible
@@ -1059,25 +1071,25 @@ export default ({
return (
- Opacity 0
+ Opacity 0
- Opacity 0.1
+ Opacity 0.1
- Opacity 0.3
+ Opacity 0.3
- Opacity 0.5
+ Opacity 0.5
- Opacity 0.7
+ Opacity 0.7
- Opacity 0.9
+ Opacity 0.9
- Opacity 1
+ Opacity 1
);
@@ -1117,9 +1129,9 @@ export default ({
render(): React.Node {
return (
-
+
View #1, front is visible, back is hidden.
-
+
- Front
+ Front
- Back (You should not see this)
+ Back (You should not see this)
-
+
View #2, front is hidden, back is visible.
-
+
- Front (You should not see this)
+ Front (You should not see this)
- Back
+ Back
@@ -1189,7 +1201,7 @@ export default ({
testID="view-test-aria-label"
aria-label="Blue background View with Text"
style={{backgroundColor: '#527FE4', padding: 5}}>
- Blue background
+ Blue background
);
},
@@ -1215,7 +1227,7 @@ export default ({
position: 'absolute',
inset: 5,
}}>
- inset 5
+ inset 5
@@ -1226,7 +1238,7 @@ export default ({
position: 'absolute',
insetBlock: 5,
}}>
- insetBlock 5
+ insetBlock 5
@@ -1237,7 +1249,9 @@ export default ({
position: 'absolute',
insetBlockEnd: 5,
}}>
- insetBlockEnd 5
+
+ insetBlockEnd 5
+
@@ -1248,7 +1262,9 @@ export default ({
position: 'absolute',
insetBlockStart: 5,
}}>
- insetBlockStart 5
+
+ insetBlockStart 5
+
@@ -1259,7 +1275,9 @@ export default ({
position: 'absolute',
insetInline: 5,
}}>
- insetInline 5
+
+ insetInline 5
+
@@ -1270,7 +1288,9 @@ export default ({
position: 'absolute',
insetInlineEnd: 5,
}}>
- insetInlineEnd 5
+
+ insetInlineEnd 5
+
@@ -1281,7 +1301,9 @@ export default ({
position: 'absolute',
insetInlineStart: 5,
}}>
- insetInlineStart 5
+
+ insetInlineStart 5
+
@@ -1305,7 +1327,9 @@ export default ({
left: 10,
right: 10,
}}>
- borderBlockColor orange
+
+ borderBlockColor orange
+
@@ -1320,8 +1344,12 @@ export default ({
left: 10,
right: 10,
}}>
- borderBlockStartColor purple
- borderBlockEndColor green
+
+ borderBlockStartColor purple
+
+
+ borderBlockEndColor green
+
diff --git a/packages/rn-tester/js/examples/WebSocket/WebSocketExample.js b/packages/rn-tester/js/examples/WebSocket/WebSocketExample.js
index 6ae2b5743365ca..96e92dff3c44c4 100644
--- a/packages/rn-tester/js/examples/WebSocket/WebSocketExample.js
+++ b/packages/rn-tester/js/examples/WebSocket/WebSocketExample.js
@@ -11,17 +11,17 @@
/* eslint-env browser */
-const React = require('react');
-const {
+import React from 'react';
+import {
Image,
PixelRatio,
ScrollView,
StyleSheet,
- Text,
TextInput,
TouchableOpacity,
View,
-} = require('react-native');
+} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
const DEFAULT_WS_URL = 'ws://localhost:5555/';
const DEFAULT_HTTP_URL = 'http://localhost:5556/';
@@ -35,7 +35,9 @@ const WS_STATES = [
class Button extends React.Component {
render(): React.MixedElement {
- const label = {this.props.label};
+ const label = (
+ {this.props.label}
+ );
if (this.props.disabled) {
return (
{label}
@@ -53,8 +55,10 @@ class Row extends React.Component {
render(): React.MixedElement {
return (
- {this.props.label}
- {this.props.value ? {this.props.value} : null}
+ {this.props.label}
+ {this.props.value ? (
+ {this.props.value}
+ ) : null}
{this.props.children}
);
@@ -209,10 +213,10 @@ class WebSocketExample extends React.Component {
return (
- To start the WS test server:
-
+ To start the WS test server:
+
./RNTester/js/examples/WebSocket/websocket_test_server.js
-
+
|
{
/>
- To start the HTTP test server:
-
+ To start the HTTP test server:
+
./RNTester/js/examples/WebSocket/http_test_server.js
-
+
{
/>
-
+
{this.state.fetchStatus === 'OK'
? 'Done. Check your WS server console to see if the next WS requests include the cookie (should be "wstest=OK")'
: '-'}
-
+
);
@@ -303,7 +307,6 @@ const styles = StyleSheet.create({
note: {
padding: 8,
margin: 4,
- backgroundColor: 'white',
},
monospace: {
fontFamily: 'courier',
@@ -312,7 +315,6 @@ const styles = StyleSheet.create({
row: {
height: 40,
padding: 4,
- backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',