chore: fix contributing documentation (#166)

* chore: fix contributing documentation

* Update optimizing-long-running-components.md

* Update DrawerNavigator.tsx

* Update TabNavigator.tsx

* Update createProfiledDrawerNavigator.tsx

* Update RenderPassReportGenerator.ts

* Update state-controller-context.test.tsx

CONTRIBUTING.md

@@ -4,10 +4,10 @@ We want this community to be **friendly and respectful** to each other. Please f
 
 ## Development workflow
 
-To get started with the project, run `yarn bootsrap` in the root directory to install the required dependencies for each package:
+To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
 
 ```sh
-yarn bootsrap
+yarn
 ```
 
 >  This project uses [`yarn`](https://classic.yarnpkg.com/) as a package manager. While it's possible to run individual commands with [`npm`](https://github.com/npm/cli), please refrain from using it, especially `npm install.` 🙅

docs/docs/fundamentals/optimizing-long-running-components.md

@@ -8,7 +8,7 @@ The library can only provide you with tripwires that certain screens are not per
 
 However, there is one common category of performance slowdown that is often seen in simple RN apps. If a React component runs for a long time synchronously before returning the renderable JSX, it may cause the navigation to slow down a little.
 
-The `PerformanceMeasureView` can help you optimise such slow navigation animations by delaying the expensive renders until after the animation completes. It can show a lightweight placeholder view while that animation is occuring:
+The `PerformanceMeasureView` can help you optimise such slow navigation animations by delaying the expensive renders until after the animation completes. It can show a lightweight placeholder view while that animation is occurring:
 
 ```tsx
 <PerformanceMeasureView
@@ -19,6 +19,6 @@ The `PerformanceMeasureView` can help you optimise such slow navigation animatio
 </PerformanceMeasureView>
 ```
 
-It is highly encouraged to not use this flag blindly, since it can only optimize a very specific kind of perfomance slowdowns. Using it unnecessarily might actually slow things down even further, since you're adding 1 extra lightweight render pass before rendering the real expensive UI. Please visually verify thoroughly and monitor the render-time scores before opting in.
+It is highly encouraged to not use this flag blindly, since it can only optimize a very specific kind of performance slowdowns. Using it unnecessarily might actually slow things down even further, since you're adding 1 extra lightweight render pass before rendering the real expensive UI. Please visually verify thoroughly and monitor the render-time scores before opting in.
 
 This feature uses a ReactNative [`InteractionManager.runAfterInteractions`](https://reactnative.dev/docs/interactionmanager) call under-the-hood to schedule the real expensive render after all the animations are completed.

fixture/src/examples/DrawerNavigator.tsx

@@ -9,7 +9,7 @@ import {NavigationKeys} from '../constants';
 /**
  * This screen simulates an example where multiple screens can be
  * mounted in parallel at the same time. Changes in one screen can affect
- * some global state (through react context) that can cause a parallely
+ * some global state (through react context) that can cause a parallelly
  * active screen to re-render.
  */
 

fixture/src/examples/TabNavigator.tsx

@@ -9,7 +9,7 @@ import {NavigationKeys} from '../constants';
 /**
  * This screen simulates an example where multiple screens can be
  * mounted in parallel at the same time. Changes in one screen can affect
- * some global state (through react context) that can cause a parallely
+ * some global state (through react context) that can cause a parallelly
  * active screen to re-render.
  */
 

packages/react-native-performance-navigation-drawer/src/createProfiledDrawerNavigator.tsx

@@ -23,7 +23,7 @@ const createProfiledNavigation = ({
 
   const profiledDispatch: typeof navigation.dispatch = action => {
     // Note that the drawer navigator internally uses custom animated touchables
-    // that do not expose the native press timetamps. So we cannot
+    // that do not expose the native press timestamps. So we cannot
     // compute the `timeToConsumeTouchEvent`.
     if ('type' in action && action.type === 'NAVIGATE') {
       startProfiler({

packages/react-native-performance/src/RenderPassReportGenerator.ts

@@ -152,7 +152,7 @@ const prepareRenderPassStartInfo = async (flowStartState: Started): Promise<Rend
     };
   } else {
     return {
-      // For in-app navagation, if the user had provided the uiEvent object, mark the
+      // For in-app navigation, if the user had provided the uiEvent object, mark the
       // flowStartTimeSinceEpochMillis as when the native onPress event occurred. If that
       // information is not available, fallback to the less accurate JS onPress event.
       flowStartTimeSinceEpochMillis: await (flowStartState.timestamp.nativeTimestamp ??

packages/react-native-performance/src/__tests__/state-machine/controller/state-controller-context.test.tsx

@@ -7,7 +7,7 @@ import {ErrorHandler, ErrorHandlerContextProvider} from '../../../utils';
 
 describe('state-machine/controller/state-controller-context', () => {
   describe('useStateController', () => {
-    it('provides the state controller instance available throught the context', () => {
+    it('provides the state controller instance available through the context', () => {
       const mockStateController = {
         onSomeEvent: jest.fn(),
       } as any;