Merge branch 'main' into feat/support-native-driver-switch-in-tab-view

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "extends": "satya164",
   "plugins": ["simple-import-sort"],
   "settings": {

.github/workflows/ci.yml

@@ -78,10 +78,10 @@ jobs:
       - name: Build example for web
         run: |
           npm install -g sharp-cli@^2.1.0
-          yarn example web:export
+          yarn example expo export:web
 
       - name: Run integration tests
-        run: yarn example test:e2e
+        run: yarn example test
 
   build:
     runs-on: ubuntu-latest

CONTRIBUTING.md

@@ -45,22 +45,28 @@ Remember to add tests for your change if possible. Run the unit tests by:
 yarn test
 ```
 
-Running the e2e tests with Playwright requires building the [example app](/example/) for web:
+Before running tests configure Playwright with:
 
 ```sh
-yarn example expo export:web
+npx playwright install
 ```
 
-Before running tests configure Playwright with:
+Run the e2e tests by:
 
 ```sh
-npx playwright install
+yarn example test --ui
 ```
 
-Run the e2e tests by:
+By default, this will use the local dev server for the app. If you want to test a production build, first build the [example app](/example/) for web:
+
+```sh
+yarn example expo export:web
+```
+
+Then run the tests with the `CI` environment variable:
 
 ```sh
-yarn example test:e2e
+CI=1 yarn example test
 ```
 
 ### Commit message convention

example/.gitignore

@@ -5,6 +5,10 @@ ios/Pods
 ios
 android
 
+# Playwright
+playwright-report/
+test-results/
+
 # @generated expo-cli sync-e7dcf75f4e856f7b6f3239b3f3a7dd614ee755a8
 # The following patterns were generated by expo-cli
 
@@ -64,4 +68,4 @@ buck-out/
 web-build/
 dist/
 
-# @end expo-cli
+# @end expo-cli

example/App.tsx

@@ -3,9 +3,14 @@ import 'react-native-gesture-handler';
 import { Assets } from '@react-navigation/elements';
 import { registerRootComponent } from 'expo';
 import { Asset } from 'expo-asset';
+import * as React from 'react';
 
 import { App } from './src/index';
 
 Asset.loadAsync(Assets);
 
-registerRootComponent(App);
+registerRootComponent(() => (
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+));

example/__typechecks__/common.check.tsx

@@ -10,12 +10,14 @@ import type {
 } from '@react-navigation/drawer';
 import type {
   CompositeScreenProps,
+  NavigationAction,
   NavigationHelpers,
   NavigatorScreenParams,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
   type StackNavigationOptions,
+  type StackOptionsArgs,
   type StackScreenProps,
 } from '@react-navigation/stack';
 import { expectTypeOf } from 'expect-type';
@@ -310,6 +312,135 @@ const SecondStack = createStackNavigator<SecondParamList>();
   component={(_: { foo: number }) => <></>}
 />;
 
+/**
+ * Check for options type in Screen config
+ */
+<SecondStack.Screen
+  name="HasParams1"
+  component={() => <></>}
+  options={{
+    headerShown: false,
+  }}
+/>;
+
+<SecondStack.Screen
+  name="HasParams1"
+  component={() => <></>}
+  options={{
+    // @ts-expect-error
+    headerShown: 13,
+  }}
+/>;
+
+<SecondStack.Screen
+  name="HasParams1"
+  component={() => <></>}
+  options={() => ({
+    headerShown: false,
+  })}
+/>;
+
+<SecondStack.Screen
+  name="HasParams1"
+  component={() => <></>}
+  // @ts-expect-error
+  options={() => ({
+    headerShown: 13,
+  })}
+/>;
+
+<SecondStack.Screen
+  name="HasParams1"
+  component={() => <></>}
+  options={({ route, navigation, theme }) => {
+    expectTypeOf(route.name).toEqualTypeOf<'HasParams1'>();
+    expectTypeOf(route.params).toEqualTypeOf<Readonly<{ id: string }>>();
+    expectTypeOf(navigation.getState().type).toMatchTypeOf<'stack'>();
+    expectTypeOf(navigation.push)
+      .parameter(0)
+      .toEqualTypeOf<keyof SecondParamList>();
+    expectTypeOf(theme).toMatchTypeOf<ReactNavigation.Theme>();
+
+    return {};
+  }}
+/>;
+
+<SecondStack.Screen
+  name="HasParams1"
+  component={() => <></>}
+  options={({
+    route,
+    navigation,
+    theme,
+  }: StackOptionsArgs<SecondParamList, 'HasParams1'>) => {
+    expectTypeOf(route.name).toEqualTypeOf<'HasParams1'>();
+    expectTypeOf(route.params).toEqualTypeOf<Readonly<{ id: string }>>();
+    expectTypeOf(navigation.getState().type).toMatchTypeOf<'stack'>();
+    expectTypeOf(navigation.push)
+      .parameter(0)
+      .toEqualTypeOf<keyof SecondParamList>();
+    expectTypeOf(theme).toMatchTypeOf<ReactNavigation.Theme>();
+
+    return {};
+  }}
+/>;
+
+/**
+ * Check for listeners type in Screen config
+ */
+<SecondStack.Screen
+  name="HasParams1"
+  component={(_: StackScreenProps<SecondParamList, 'HasParams1'>) => <></>}
+  listeners={{
+    focus: (e) => {
+      expectTypeOf(e.type).toEqualTypeOf<'focus'>();
+      expectTypeOf(e.data).toEqualTypeOf<undefined>();
+    },
+    beforeRemove: (e) => {
+      expectTypeOf(e.type).toEqualTypeOf<'beforeRemove'>();
+      expectTypeOf(e.data.action).toEqualTypeOf<NavigationAction>();
+      expectTypeOf(e.preventDefault).toEqualTypeOf<() => void>();
+    },
+    transitionStart: (e) => {
+      expectTypeOf(e.type).toEqualTypeOf<'transitionStart'>();
+      expectTypeOf(e.data.closing).toEqualTypeOf<boolean>();
+    },
+  }}
+/>;
+
+<SecondStack.Screen
+  name="HasParams1"
+  component={() => <></>}
+  listeners={({ route, navigation }) => {
+    expectTypeOf(route.name).toEqualTypeOf<'HasParams1'>();
+    expectTypeOf(route.params).toEqualTypeOf<Readonly<{ id: string }>>();
+    expectTypeOf(navigation.getState().type).toMatchTypeOf<'stack'>();
+    expectTypeOf(navigation.push)
+      .parameter(0)
+      .toEqualTypeOf<keyof SecondParamList>();
+
+    return {};
+  }}
+/>;
+
+<SecondStack.Screen
+  name="HasParams1"
+  component={() => <></>}
+  listeners={({
+    route,
+    navigation,
+  }: StackScreenProps<SecondParamList, 'HasParams1'>) => {
+    expectTypeOf(route.name).toEqualTypeOf<'HasParams1'>();
+    expectTypeOf(route.params).toEqualTypeOf<Readonly<{ id: string }>>();
+    expectTypeOf(navigation.getState().type).toMatchTypeOf<'stack'>();
+    expectTypeOf(navigation.push)
+      .parameter(0)
+      .toEqualTypeOf<keyof SecondParamList>();
+
+    return {};
+  }}
+/>;
+
 /**
  * Check for errors with `navigation.navigate`
  */
@@ -352,3 +483,18 @@ export const ThirdScreen = ({
   // @ts-expect-error
   if (ScreenName === 'NoParams') navigation.navigate(ScreenName, { id: '123' });
 };
+
+/**
+ * Check for navigator ID
+ */
+type FourthParamList = {
+  HasParams1: { id: string };
+  HasParams2: { user: string };
+  NoParams: undefined;
+};
+
+const FourthStack = createStackNavigator<FourthParamList, 'MyID'>();
+
+expectTypeOf(FourthStack.Navigator).parameter(0).toMatchTypeOf<{
+  id: 'MyID';
+}>();