diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index 001464fd63d..6133080a4ad 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -1024,6 +1024,72 @@ class EnabledExample extends React.Component< } } +class DisplayOptionsStatusExample extends React.Component<{}> { + render(): React.Node { + const isAndroid = Platform.OS === 'android'; + return ( + + + + {isAndroid ? null : ( + <> + + + + + + )} + + ); + } +} + +function DisplayOptionStatusExample({optionName, optionChecker, notification}) { + const [statusEnabled, setStatusEnabled] = React.useState(false); + React.useEffect(() => { + AccessibilityInfo.addEventListener(notification, setStatusEnabled); + optionChecker().then(isEnabled => { + setStatusEnabled(isEnabled); + }); + return function cleanup() { + AccessibilityInfo.removeEventListener(notification, setStatusEnabled); + }; + }, [optionChecker, notification]); + return ( + + + {optionName} + {' is '} + {statusEnabled ? 'enabled' : 'disabled'}. + + + ); +} + exports.title = 'Accessibility'; exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo'; exports.description = 'Examples of using Accessibility APIs.'; @@ -1058,6 +1124,12 @@ exports.examples = [ return ; }, }, + { + title: 'Check if the display options are enabled', + render(): React.Element { + return ; + }, + }, { title: 'Check if the screen reader announces', render(): React.Element {