From 45ac64ee131a76dce718d4cd8b91f4633d4b362b Mon Sep 17 00:00:00 2001 From: Biki-das Date: Thu, 13 Jun 2024 04:26:27 -0700 Subject: [PATCH] =?UTF-8?q?Fix:-fixed=20dark=20mode=20appearance=20for=20t?= =?UTF-8?q?he=20a11y=20and=20action=20sheet=20examples=20in=20=E2=80=A6=20?= =?UTF-8?q?(#44795)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: Fixes the `a11y` and actionSheet examples in the RN tester iOS app, where in dark mode, some text were not taking the appropriate color **Before** Screenshot 2024-06-05 at 5 28 28 PM Screenshot 2024-06-05 at 5 28 37 PM **After** Screenshot 2024-06-05 at 5 29 56 PM Screenshot 2024-06-05 at 5 30 08 PM ## Changelog: N/A Pick one each for the category and type tags: [INTERNAL] [FIXED] - Fix RN tester Example appearance in dark mode for A11y and ActionSheet. Pull Request resolved: https://github.com/facebook/react-native/pull/44795 Test Plan: Tested using the RN tester app. Reviewed By: NickGerleman Differential Revision: D58469005 Pulled By: huntie fbshipit-source-id: 05f991f1c3efae7ccfc90535aaa62d6075aad18e --- .../Accessibility/AccessibilityIOSExample.js | 93 ++++---- .../ActionSheetIOS/ActionSheetIOSExample.js | 207 ++++++++++++------ .../js/examples/Alert/AlertExample.js | 6 +- 3 files changed, 195 insertions(+), 111 deletions(-) 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)}