diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js index 287c1bf63c7..97f2c5fa851 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js @@ -12,51 +12,64 @@ const React = require('react'); const {Alert, Text, View} = require('react-native'); +const {RNTesterThemeContext} = require('../../components/RNTesterTheme'); type Props = $ReadOnly<{||}>; class AccessibilityIOSExample extends React.Component { render(): React.Node { return ( - <> - { - if (event.nativeEvent.actionName === 'activate') { - Alert.alert('Alert', 'onAccessibilityTap success'); - } - }} - accessible={true} - accessibilityActions={[{name: 'activate'}]}> - Accessibility normal tap example - - { - if (event.nativeEvent.actionName === 'magicTap') { - Alert.alert('Alert', 'onMagicTap success'); - } - }} - accessible={true} - accessibilityActions={[{name: 'magicTap'}]}> - Accessibility magic tap example - - { - if (event.nativeEvent.actionName === 'escape') { - Alert.alert('onAccessibilityEscape success'); - } - }} - accessible={true} - accessibilityActions={[{name: 'escape'}]}> - Accessibility escape example - - - - This view's children are hidden from the accessibility tree - - - - This view's language should be `it-IT` - - + + {theme => ( + <> + { + if (event.nativeEvent.actionName === 'activate') { + Alert.alert('Alert', 'onAccessibilityTap success'); + } + }} + accessible={true} + accessibilityActions={[{name: 'activate'}]}> + + Accessibility normal tap example + + + { + if (event.nativeEvent.actionName === 'magicTap') { + Alert.alert('Alert', 'onMagicTap success'); + } + }} + accessible={true} + accessibilityActions={[{name: 'magicTap'}]}> + + Accessibility magic tap example + + + { + if (event.nativeEvent.actionName === 'escape') { + Alert.alert('onAccessibilityEscape success'); + } + }} + accessible={true} + accessibilityActions={[{name: 'escape'}]}> + + Accessibility escape example + + + + + This view's children are hidden from the accessibility tree + + + + + This view's language should be `it-IT` + + + + )} + ); } } diff --git a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js b/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js index 303d3186739..34c3b163b12 100644 --- a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js +++ b/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js @@ -11,6 +11,7 @@ 'use strict'; import type {NativeMethods} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; +import {RNTesterThemeContext} from '../../components/RNTesterTheme'; const ScreenshotManager = require('../../../NativeModuleExample/NativeScreenshotManager'); const React = require('react'); @@ -37,12 +38,20 @@ class ActionSheetExample extends React.Component { render(): React.Node { return ( - - - Click to show the ActionSheet - - Clicked button: {this.state.clicked} - + + {theme => ( + + + Click to show the ActionSheet + + + Clicked button: {this.state.clicked} + + + )} + ); } @@ -70,12 +79,20 @@ class ActionSheetTintExample extends React.Component< render(): React.Node { return ( - - - Click to show the ActionSheet - - Clicked button: {this.state.clicked} - + + {theme => ( + + + Click to show the ActionSheet + + + Clicked button: {this.state.clicked} + + + )} + ); } @@ -104,12 +121,20 @@ class ActionSheetCancelButtonTintExample extends React.Component< render(): React.Node { return ( - - - Click to show the ActionSheet - - Clicked button: {this.state.clicked} - + + {theme => ( + + + Click to show the ActionSheet + + + Clicked button: {this.state.clicked} + + + )} + ); } @@ -141,20 +166,26 @@ class ActionSheetAnchorExample extends React.Component< render(): React.Node { return ( - - - - Click there to show the ActionSheet -> - - - HERE - - - Clicked button: {this.state.clicked} - + + {theme => ( + + + + Click there to show the ActionSheet -> + + + HERE + + + + Clicked button: {this.state.clicked} + + + )} + ); } @@ -182,12 +213,20 @@ class ActionSheetDisabledExample extends React.Component { render(): React.Node { return ( - - - Click to show the ActionSheet - - Clicked button: {this.state.clicked} - + + {theme => ( + + + Click to show the ActionSheet + + + Clicked button: {this.state.clicked} + + + )} + ); } @@ -209,12 +248,18 @@ class ActionSheetDisabledExample extends React.Component { class ActionSheetDismissExample extends React.Component<{...}> { render(): React.Node { return ( - - - Click to show and automatically dismiss the ActionSheet after 3 - seconds - - + + {theme => ( + + + Click to show and automatically dismiss the ActionSheet after 3 + seconds + + + )} + ); } @@ -244,12 +289,20 @@ class ShareActionSheetExample extends React.Component< render(): React.Node { return ( - - - Click to show the Share ActionSheet - - {this.state.text} - + + {theme => ( + + + Click to show the Share ActionSheet + + + {this.state.text} + + + )} + ); } @@ -285,12 +338,20 @@ class ShareScreenshotExample extends React.Component< render(): React.Node { return ( - - - Click to show the Share ActionSheet - - {this.state.text} - + + {theme => ( + + + Click to show the Share ActionSheet + + + {this.state.text} + + + )} + ); } @@ -332,20 +393,26 @@ class ShareScreenshotAnchorExample extends React.Component< render(): React.Node { return ( - - - - Click to show the Share ActionSheet -> - - - HERE - - - {this.state.text} - + + {theme => ( + + + + Click to show the Share ActionSheet -> + + + HERE + + + + {this.state.text} + + + )} + ); } diff --git a/packages/rn-tester/js/examples/Alert/AlertExample.js b/packages/rn-tester/js/examples/Alert/AlertExample.js index 895c9529fad..b4d09721ba4 100644 --- a/packages/rn-tester/js/examples/Alert/AlertExample.js +++ b/packages/rn-tester/js/examples/Alert/AlertExample.js @@ -11,6 +11,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes'; import * as React from 'react'; +import {RNTesterThemeContext} from '../../components/RNTesterTheme'; import {Alert, Pressable, StyleSheet, Text, View} from 'react-native'; // Shows log on the screen @@ -241,11 +242,14 @@ const PromptOptions = () => { style: 'cancel', }, ]; + const theme = React.useContext(RNTesterThemeContext); return ( - Prompt value: + + Prompt value: + {JSON.stringify(promptValue, null, 2)}