Adding Accessibility Display Options Enabled to RNTester (#29231)

Summary:
Currently there isn't any way to test if the Accessibility Display Options or the event listeners for them were working properly within RNTester. It turns out that because of changes to the accessibility API Apple made when they added Smart Invert AccessibilityInfo.isInvertColorsEnabled() and the associated event listener are working incorrectly. You can see this if you take a look at how RNTester (with this PR incorporated) responds to toggling Invert Colors. I've submitted a bug report to Apple, but this might have been caught earlier if this had been implemented.

## Changelog

[General] [Added] - Adding Accessibility Display Options Enabled to RNTester

Pull Request resolved: https://github.com/facebook/react-native/pull/29231

Test Plan:
1. Build iOS app
2. Navigate to the Accessibility page
3. Switch over to settings and change any of the settings at
  - Settings>Accessibility>Display and Text Size>Bold Text
  - Settings>Accessibility>Display and Text Size>Color Filters>Grayscale
  - Settings>Accessibility>Display and Text Size>Smart Invert (or Classic Invert)
  - Settings>Accessibility>Motion>Reduce Motion
  - Settings>Accessibility>VoiceOver>VoiceOver
4. Switch back to the app and see the results

![Simulator Screen Shot - iPhone 11 - 2020-06-26 at 21 13 16](https://user-images.githubusercontent.com/65255457/85914380-f09c5500-b7f1-11ea-98db-b83fb4ab5305.png)
![Simulator Screen Shot - iPhone 11 - 2020-06-26 at 21 13 39](https://user-images.githubusercontent.com/65255457/85914382-f2feaf00-b7f1-11ea-8ebf-cdb2b703c731.png)

Modified it a bit to only show relevant statuses for the Platform

| {F656951547} | {F656951643} |

Reviewed By: TheSavior

Differential Revision: D29531642

Pulled By: lunaleaps

fbshipit-source-id: f54fb3216ef663428c23b613f0a3b10b01d7f24d

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 (
+      <View>
+        <DisplayOptionStatusExample
+          optionName={'Reduce Motion'}
+          optionChecker={AccessibilityInfo.isReduceMotionEnabled}
+          notification={'reduceMotionChanged'}
+        />
+        <DisplayOptionStatusExample
+          optionName={'Screen Reader'}
+          optionChecker={AccessibilityInfo.isScreenReaderEnabled}
+          notification={'reduceMotionChanged'}
+        />
+        {isAndroid ? null : (
+          <>
+            <DisplayOptionStatusExample
+              optionName={'Bold Text'}
+              optionChecker={AccessibilityInfo.isBoldTextEnabled}
+              notification={'boldTextChanged'}
+            />
+            <DisplayOptionStatusExample
+              optionName={'Grayscale'}
+              optionChecker={AccessibilityInfo.isGrayscaleEnabled}
+              notification={'grayscaleChanged'}
+            />
+            <DisplayOptionStatusExample
+              optionName={'Invert Colors'}
+              optionChecker={AccessibilityInfo.isInvertColorsEnabled}
+              notification={'invertColorsChanged'}
+            />
+            <DisplayOptionStatusExample
+              optionName={'Reduce Transparency'}
+              optionChecker={AccessibilityInfo.isReduceTransparencyEnabled}
+              notification={'reduceTransparencyChanged'}
+            />
+          </>
+        )}
+      </View>
+    );
+  }
+}
+
+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 (
+    <View>
+      <Text>
+        {optionName}
+        {' is '}
+        {statusEnabled ? 'enabled' : 'disabled'}.
+      </Text>
+    </View>
+  );
+}
+
 exports.title = 'Accessibility';
 exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo';
 exports.description = 'Examples of using Accessibility APIs.';
@@ -1058,6 +1124,12 @@ exports.examples = [
       return <FakeSliderExample />;
     },
   },
+  {
+    title: 'Check if the display options are enabled',
+    render(): React.Element<typeof DisplayOptionsStatusExample> {
+      return <DisplayOptionsStatusExample />;
+    },
+  },
   {
     title: 'Check if the screen reader announces',
     render(): React.Element<typeof AnnounceForAccessibility> {