chore: Fix RNTester typos (#34757)

Summary:
While working on #34550 I noticed that a couple of words inside the RNTester package were misspelled, this gave me the idea to test other files as well using the VS Code extension [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) which unveiled quite a few other typos.

## Changelog

[Internal] [Fixed] - Fix RNTester typos

Pull Request resolved: #34757

Test Plan: Shouldn't require much testing as this is just fixing some typos inside the RNTester package.

Reviewed By: dmytrorykun

Differential Revision: D39722889

Pulled By: cortinico

fbshipit-source-id: a575ab8337586c5fe2d68ce73d2aae27d24a6384

packages/rn-tester/js/examples/Alert/AlertExample.js

@@ -309,7 +309,7 @@ export default ({
   category: 'UI',
   documentationURL: 'https://reactnative.dev/docs/alert',
   description:
-    'Alerts display a concise and informative messageand prompt the user to make a decision.',
+    'Alerts display a concise and informative message and prompt the user to make a decision.',
   showIndividualExamples: true,
   examples,
 }: RNTesterModule);

packages/rn-tester/js/examples/Experimental/PlatformTest/README.md

@@ -22,11 +22,11 @@ function ExampleTestCase ({ harness }) { /* ... */ }
 ```
 
 
-As of writting this README there are 2 different types of tests that the `harness` prop provides:
+As of writing this README there are 2 different types of tests that the `harness` prop provides:
 
 ### `test(testcase: (TestContext) => void, testName: string, options?: TestOptions)`
 
-This is a method to create "regular" test reminicent of other frameworks such as Jest. These are meant to be run imperatively, and while that means that they technically could work in a `useEffect` hook as a way to run the test "on mount" — it is instead recommended to try and keep these tests in callbacks instead. A good alternative to running the test on mount would be to instead put the test in a callback and render a "Start Test" button which executes the callback.
+This is a method to create "regular" test reminiscent of other frameworks such as Jest. These are meant to be run imperatively, and while that means that they technically could work in a `useEffect` hook as a way to run the test "on mount" — it is instead recommended to try and keep these tests in callbacks instead. A good alternative to running the test on mount would be to instead put the test in a callback and render a "Start Test" button which executes the callback.
 
 The first argument is the closure in which you will run your test and make assertions. The assertions are contained in the `TestContext` object which is provided in the test closure's first argument and contains the following assertions:
 
@@ -88,7 +88,7 @@ Here's what a basic example would look like for verifying that `pointermove` eve
 
 ```js
 function BasicPointerMoveTestCase({harness}) {
-  const testPointerMove = harness.useAsyncTest('pointermove event recieved');
+  const testPointerMove = harness.useAsyncTest('pointermove event received');
 
   return (
     <View

packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js

@@ -30,7 +30,7 @@ class RNTesterPlatformTestEventRecorder {
   allRecords: Array<EventRecord> = [];
   relevantEvents: Array<string> = [];
   rawOrder: number = 1;
-  eventsInScope: Array<EventRecord> = []; // Tracks syncronous event dispatches
+  eventsInScope: Array<EventRecord> = []; // Tracks synchronous event dispatches
   recording: boolean = true;
 
   mergeTypesTruthMap: {[string]: boolean} = {};

packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js

@@ -82,7 +82,7 @@ function FilterModalButton(props: FilterModalProps) {
         transparent={true}>
         <SafeAreaView style={styles.filterModalRoot}>
           <KeyboardAvoidingView
-            style={styles.filterModalKeboardAvoidingRoot}
+            style={styles.filterModalKeyboardAvoidingRoot}
             behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
             <View style={styles.filterModalContainer}>
               <View style={styles.filterModalContentContainer}>
@@ -373,7 +373,7 @@ const styles = StyleSheet.create({
     borderColor: 'rgb(171, 171, 171)',
     borderRadius: 8,
   },
-  filterModalKeboardAvoidingRoot: {
+  filterModalKeyboardAvoidingRoot: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',

packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestTypes.js

@@ -34,7 +34,7 @@ export type PlatformTestResult = $ReadOnly<{|
   name: string,
   status: PlatformTestResultStatus,
   assertions: $ReadOnlyArray<PlatformTestAssertionResult>,
-  error: mixed | null, // null is technically unecessary but is kept to ensure the error is described as nullable
+  error: mixed | null, // null is technically unnecessary but is kept to ensure the error is described as nullable
 |}>;
 
 export type PlatformTestContext = $ReadOnly<{

packages/rn-tester/js/examples/Experimental/PlatformTest/usePlatformTestHarness.js

@@ -144,7 +144,7 @@ export default function usePlatformTestHarness(): PlatformTestHarnessHookResult
     $ReadOnlyArray<PlatformTestResult>,
   >([]);
 
-  // Since updaing the test results array can get expensive at larger sizes
+  // Since updating the test results array can get expensive at larger sizes
   // we use a basic debouncing logic to minimize the number of re-renders
   // caused by adding test results
   const resultQueueRef = useRef<Array<PlatformTestResult>>([]);
@@ -174,7 +174,7 @@ export default function usePlatformTestHarness(): PlatformTestHarnessHookResult
     [scheduleResultsCommit],
   );
 
-  // When reseting the test results we should also re-mount the
+  // When resetting the test results we should also re-mount the
   // so we apply a key to that component which we can increment
   // to ensure it re-mounts
   const [testElementKey, setTestElementKey] = useState<number>(0);
@@ -220,7 +220,7 @@ export default function usePlatformTestHarness(): PlatformTestHarnessHookResult
           'assert_true',
           cond,
           desc,
-          "expected 'true' but recieved 'false'",
+          "expected 'true' but received 'false'",
         ),
       assert_equals: (a: any, b: any, desc: string) =>
         baseAssert(

packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMove.js

@@ -8,7 +8,7 @@
  * @flow
  */
 
-// adapated from https://github.com/web-platform-tests/wpt/blob/master/pointerevents/pointerevent_pointermove.html
+// adapted from https://github.com/web-platform-tests/wpt/blob/master/pointerevents/pointerevent_pointermove.html
 
 import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
 import type {PointerEvent} from 'react-native/Libraries/Types/CoreEventTypes';
@@ -25,7 +25,7 @@ function PointerEventPointerMoveTestCase(
   const {harness} = props;
 
   const detectedPointerTypesRef = useRef({});
-  const testPointerMove = harness.useAsyncTest('pointermove event recieved');
+  const testPointerMove = harness.useAsyncTest('pointermove event received');
 
   const handlers = useTestEventHandler(
     ['pointerMove'],

packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js

@@ -144,7 +144,7 @@ const styles = StyleSheet.create({
   separator: {
     height: 12,
   },
-  separtorText: {
+  separatorText: {
     fontSize: 10,
   },
   list: {

packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js

@@ -32,7 +32,7 @@ const Separator =
           styles.separator,
           {backgroundColor: highlighted ? highlightColor : defaultColor},
         ]}>
-        <Text style={styles.separtorText}>{text}</Text>
+        <Text style={styles.separatorText}>{text}</Text>
       </View>
     );
   };
@@ -50,7 +50,7 @@ const styles = StyleSheet.create({
   separator: {
     height: 12,
   },
-  separtorText: {
+  separatorText: {
     fontSize: 10,
   },
 });

packages/rn-tester/js/examples/Keyboard/KeyboardExample.js

@@ -20,12 +20,12 @@ import * as React from 'react';
 import {useEffect, useState} from 'react';
 import {Keyboard, StyleSheet, Text, View} from 'react-native';
 
-type KeybpardEventViewerProps = {
+type KeyboardEventViewerProps = {
   showEvent: 'keyboardWillShow' | 'keyboardDidShow',
   hideEvent: 'keyboardWillHide' | 'keyboardDidHide',
 };
 
-const KeyboardEventViewer = (props: KeybpardEventViewerProps): React.Node => {
+const KeyboardEventViewer = (props: KeyboardEventViewerProps): React.Node => {
   const {showEvent, hideEvent} = props;
   const [isShown, setIsShown] = useState(false);
   const [lastEvent, setLastEvent] = useState<?KeyboardEvent>();

packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js

@@ -658,7 +658,7 @@ const ScrollIndicatorExample = () => {
   const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
   const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
     useState(true);
-  const [showsVerticallScrollIndic, setShowsVerticalScrollIndic] =
+  const [showsVerticalScrollIndic, setShowsVerticalScrollIndic] =
     useState(true);
   return (
     <View>
@@ -667,7 +667,7 @@ const ScrollIndicatorExample = () => {
         contentInset={{top: 10, bottom: 10, left: 10, right: 10}}
         scrollIndicatorInsets={scrollIndicatorInsets}
         showsHorizontalScrollIndicator={showsHorizontalScrollIndic}
-        showsVerticalScrollIndicator={showsVerticallScrollIndic}
+        showsVerticalScrollIndicator={showsVerticalScrollIndic}
         nestedScrollEnabled>
         {ITEMS.map(createItemRow)}
       </ScrollView>
@@ -699,10 +699,9 @@ const ScrollIndicatorExample = () => {
       />
       <Button
         label={
-          'showsVerticalScrollIndicator: ' +
-          showsVerticallScrollIndic.toString()
+          'showsVerticalScrollIndicator: ' + showsVerticalScrollIndic.toString()
         }
-        onPress={() => setShowsVerticalScrollIndic(!showsVerticallScrollIndic)}
+        onPress={() => setShowsVerticalScrollIndic(!showsVerticalScrollIndic)}
       />
     </View>
   );

packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js

@@ -27,7 +27,7 @@ const Separator =
           styles.separator,
           {backgroundColor: highlighted ? highlightColor : defaultColor},
         ]}>
-        <Text style={styles.separtorText}>{text}</Text>
+        <Text style={styles.separatorText}>{text}</Text>
       </View>
     );
   };
@@ -46,7 +46,7 @@ const styles = StyleSheet.create({
   separator: {
     height: 12,
   },
-  separtorText: {
+  separatorText: {
     fontSize: 10,
   },
 });

packages/rn-tester/js/examples/Transform/TransformExample.js

@@ -13,7 +13,7 @@ import {Animated, StyleSheet, Text, View} from 'react-native';
 
 import type {Node, Element} from 'react';
 
-function AnimateTansformSingleProp() {
+function AnimateTransformSingleProp() {
   const [theta] = useState(new Animated.Value(45));
   const animate = () => {
     theta.setValue(0);
@@ -318,10 +318,10 @@ exports.examples = [
     },
   },
   {
-    title: 'Amimate Translate single prop',
+    title: 'Animate Translate single prop',
     description: "rotate: '360deg'",
     render(): Node {
-      return <AnimateTansformSingleProp />;
+      return <AnimateTransformSingleProp />;
     },
   },
 ];

packages/rn-tester/js/utils/testerStateUtils.js

@@ -86,10 +86,12 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({
   }));
 
   const recentlyUsedAPIs = recentlyUsed.apis
-    .map(recentAPIKey => apis.find(apiEample => apiEample.key === recentAPIKey))
+    .map(recentAPIKey =>
+      apis.find(apiExample => apiExample.key === recentAPIKey),
+    )
     .filter(Boolean);
 
-  const bookmarkedAPIs = apis.filter(apiEample => apiEample.isBookmarked);
+  const bookmarkedAPIs = apis.filter(apiExample => apiExample.isBookmarked);
 
   const examplesList: ExamplesList = {
     [Screens.COMPONENTS]: [