Add flow types to AccessibilityExample.js (#31384)

Summary:
[AccessibilityExample.js](https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js) does not have proper Flow types. Without Flow typing enforced, it is easy for bugs to be introduced when making changes to this file. This pull request enforces Flow typing in this file.

## Changelog
[General] [Fixed] - Fixed return type of `AccessibilityRoleAndStateExample`
[General] [Added] - Added Flow Types to AccessibilityExample.js

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

Test Plan:
Before:
![Screen Shot 2021-04-19 at 7 39 58 PM](https://user-images.githubusercontent.com/12180395/115248265-42c6b200-a147-11eb-8dad-058f646a1550.png)

After:
![Screen Shot 2021-04-19 at 7 40 10 PM](https://user-images.githubusercontent.com/12180395/115248284-465a3900-a147-11eb-8bff-4050ce6bd806.png)

Reviewed By: yungsters, nadiia

Differential Revision: D28004170

Pulled By: kacieb

fbshipit-source-id: 77bc44bbaf7a19c034a92a2daef302d5dc6078fa

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow
  */
 
 'use strict';
@@ -23,6 +24,7 @@ const {
   StyleSheet,
   Platform,
 } = require('react-native');
+import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
 const RNTesterBlock = require('../../components/RNTesterBlock');
 
@@ -60,8 +62,8 @@ const styles = StyleSheet.create({
   },
 });
 
-class AccessibilityExample extends React.Component {
-  render() {
+class AccessibilityExample extends React.Component<{}> {
+  render(): React.Node {
     return (
       <View>
         <RNTesterBlock title="TextView without label">
@@ -101,7 +103,7 @@ class AccessibilityExample extends React.Component {
         </RNTesterBlock>
 
         {/* Android screen readers will say the accessibility hint instead of the text
-        since the view doesn't have a label. */}
+           since the view doesn't have a label. */}
         <RNTesterBlock title="Accessible view with TextViews with hint">
           <View accessibilityHint="Accessibility hint." accessible={true}>
             <Text style={{color: 'green'}}>This is text one.</Text>
@@ -178,7 +180,12 @@ class AccessibilityExample extends React.Component {
   }
 }
 
-class CheckboxExample extends React.Component {
+class CheckboxExample extends React.Component<
+  {},
+  {
+    checkboxState: boolean | 'mixed',
+  },
+> {
   state = {
     checkboxState: true,
   };
@@ -212,7 +219,12 @@ class CheckboxExample extends React.Component {
   }
 }
 
-class SwitchExample extends React.Component {
+class SwitchExample extends React.Component<
+  {},
+  {
+    switchState: boolean,
+  },
+> {
   state = {
     switchState: true,
   };
@@ -239,18 +251,27 @@ class SwitchExample extends React.Component {
   }
 }
 
-class SelectionExample extends React.Component {
-  constructor(props) {
+class SelectionExample extends React.Component<
+  {},
+  {
+    isSelected: boolean,
+    isEnabled: boolean,
+  },
+> {
+  constructor(props: {}) {
     super(props);
-    this.selectableElement = React.createRef();
+    this.selectableElement = createRef();
   }
+  selectableElement: {
+    current: React.ElementRef<typeof TouchableOpacity> | null,
+  };
 
   state = {
     isSelected: true,
     isEnabled: false,
   };
 
-  render() {
+  render(): React.Node {
     const {isSelected, isEnabled} = this.state;
     let accessibilityHint = 'click me to select';
     if (isSelected) {
@@ -311,7 +332,12 @@ class SelectionExample extends React.Component {
   }
 }
 
-class ExpandableElementExample extends React.Component {
+class ExpandableElementExample extends React.Component<
+  {},
+  {
+    expandState: boolean,
+  },
+> {
   state = {
     expandState: false,
   };
@@ -337,7 +363,14 @@ class ExpandableElementExample extends React.Component {
   }
 }
 
-class NestedCheckBox extends React.Component {
+class NestedCheckBox extends React.Component<
+  {},
+  {
+    checkbox1: boolean | 'mixed',
+    checkbox2: boolean | 'mixed',
+    checkbox3: boolean | 'mixed',
+  },
+> {
   state = {
     checkbox1: false,
     checkbox2: false,
@@ -446,7 +479,7 @@ class NestedCheckBox extends React.Component {
 }
 
 class AccessibilityRoleAndStateExample extends React.Component<{}> {
-  render() {
+  render(): React.Node {
     return (
       <View>
         <View
@@ -551,8 +584,8 @@ class AccessibilityRoleAndStateExample extends React.Component<{}> {
   }
 }
 
-class AccessibilityActionsExample extends React.Component {
-  render() {
+class AccessibilityActionsExample extends React.Component<{}> {
+  render(): React.Node {
     return (
       <View>
         <RNTesterBlock title="Non-touchable with activate action">
@@ -647,13 +680,17 @@ class AccessibilityActionsExample extends React.Component {
   }
 }
 
-class FakeSliderExample extends React.Component {
-  state = {
+type FakeSliderExampleState = {
+  current: number,
+  textualValue: 'center' | 'left' | 'right',
+};
+class FakeSliderExample extends React.Component<{}, FakeSliderExampleState> {
+  state: FakeSliderExampleState = {
     current: 50,
     textualValue: 'center',
   };
 
-  increment = () => {
+  increment: () => void = () => {
     let newValue = this.state.current + 2;
     if (newValue > 100) {
       newValue = 100;
@@ -663,7 +700,7 @@ class FakeSliderExample extends React.Component {
     });
   };
 
-  decrement = () => {
+  decrement: () => void = () => {
     let newValue = this.state.current - 2;
     if (newValue < 0) {
       newValue = 0;
@@ -673,7 +710,7 @@ class FakeSliderExample extends React.Component {
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <View
@@ -735,7 +772,7 @@ class AnnounceForAccessibility extends React.Component<{}> {
   _handleOnPress = () =>
     AccessibilityInfo.announceForAccessibility('Announcement Test');
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Button
@@ -748,8 +785,8 @@ class AnnounceForAccessibility extends React.Component<{}> {
 }
 
 class SetAccessibilityFocusExample extends React.Component<{}> {
-  render() {
-    const myRef = createRef();
+  render(): React.Node {
+    const myRef: {current: React.ElementRef<any> | null} = createRef();
 
     const onClose = () => {
       if (myRef && myRef.current) {
@@ -781,7 +818,7 @@ class SetAccessibilityFocusExample extends React.Component<{}> {
 }
 
 class EnabledExamples extends React.Component<{}> {
-  render() {
+  render(): React.Node {
     return (
       <View>
         {Platform.OS === 'ios' ? (
@@ -831,11 +868,26 @@ class EnabledExamples extends React.Component<{}> {
   }
 }
 
-class EnabledExample extends React.Component<{}> {
+class EnabledExample extends React.Component<
+  {
+    eventListener:
+      | 'reduceMotionChanged'
+      | 'boldTextChanged'
+      | 'grayscaleChanged'
+      | 'invertColorsChanged'
+      | 'reduceTransparencyChanged'
+      | 'reduceMotionChanged'
+      | 'screenReaderChanged',
+    test: string,
+  },
+  {
+    isEnabled: boolean,
+  },
+> {
   state = {
     isEnabled: false,
   };
-
+  _subscription: EventSubscription;
   componentDidMount() {
     this._subscription = AccessibilityInfo.addEventListener(
       this.props.eventListener,
@@ -858,13 +910,13 @@ class EnabledExample extends React.Component<{}> {
 
   _handleToggled = isEnabled => {
     if (!this.state.isEnabled) {
-      this.setState({isEnabled});
+      this.setState({isEnabled: true});
     } else {
       this.setState({isEnabled: false});
     }
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text>
@@ -892,7 +944,7 @@ exports.examples = [
   },
   {
     title: 'New accessibility roles and states',
-    render(): React.Element<typeof AccessibilityRoleAndStateExamples> {
+    render(): React.Element<typeof AccessibilityRoleAndStateExample> {
       return <AccessibilityRoleAndStateExample />;
     },
   },