Skip to content

Commit

Permalink
chore: fix contributing documentation (#166)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
nogayam authored Apr 10, 2024
1 parent cd7d8f9 commit acb9e58
Show file tree
Hide file tree
Showing 7 changed files with 9 additions and 9 deletions.
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.` 🙅
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/fundamentals/optimizing-long-running-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
2 changes: 1 addition & 1 deletion fixture/src/examples/DrawerNavigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

Expand Down
2 changes: 1 addition & 1 deletion fixture/src/examples/TabNavigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 ??
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit acb9e58

Please sign in to comment.