chore: update eslint config and prettier

.eslintrc.json

@@ -25,7 +25,10 @@
     "node": true
   },
   "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-types": "off",
     "import/no-default-export": "error",
+    "react/display-name": "off",
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error"
   },

example/__typechecks__/common.check.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
 import type {
   BottomTabNavigationOptions,
   BottomTabScreenProps,

example/__typechecks__/static.check.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import type {
   NavigationProp,

example/server/resolve-hooks.tsx

@@ -6,19 +6,19 @@ import Module from 'module';
 // We need to make sure that .web.xx extensions are resolved before .xx
 // @ts-expect-error: _extensions doesn't exist in the type definitions
 Module._extensions = Object.fromEntries(
-  // @ts-expect-error
+  // @ts-expect-error _extensions doesn't exist in the type definitions
   Object.entries(Module._extensions).sort((a, b) => {
     return b[0].split('.').length - a[0].split('.').length;
   })
 );
 
 // Set __DEV__ that expo needs
-// @ts-expect-error
+// @ts-expect-error __DEV__ doesn't exist in the type definitions
 global.__DEV__ = process.env.NODE_ENV !== 'production';
 
 // Reanimated doesn't support SSR :(
 mock(
   'react-native-reanimated',
-  // eslint-disable-next-line import/no-commonjs
+  // eslint-disable-next-line import/no-commonjs, @typescript-eslint/no-var-requires
   { ...require('react-native-reanimated/mock').default, call() {} }
 );

example/src/Screens/BottomTabs.tsx

@@ -30,8 +30,9 @@ import { SimpleStack, SimpleStackParams } from './SimpleStack';
 
 const getTabBarIcon =
   (name: React.ComponentProps<typeof MaterialCommunityIcons>['name']) =>
-  ({ color, size }: { color: string; size: number }) =>
-    <MaterialCommunityIcons name={name} color={color} size={size} />;
+  ({ color, size }: { color: string; size: number }) => (
+    <MaterialCommunityIcons name={name} color={color} size={size} />
+  );
 
 type BottomTabParams = {
   TabStack: NavigatorScreenParams<SimpleStackParams>;

example/src/Screens/Static.tsx

@@ -15,8 +15,9 @@ import { Contacts } from '../Shared/Contacts';
 
 const getTabBarIcon =
   (name: React.ComponentProps<typeof MaterialCommunityIcons>['name']) =>
-  ({ color, size }: { color: string; size: number }) =>
-    <MaterialCommunityIcons name={name} color={color} size={size} />;
+  ({ color, size }: { color: string; size: number }) => (
+    <MaterialCommunityIcons name={name} color={color} size={size} />
+  );
 
 const ChatShownContext = React.createContext({
   isChatShown: false,

package.json

@@ -43,12 +43,12 @@
     "check-dependency-version-consistency": "^3.0.3",
     "commitlint": "^17.3.0",
     "eslint": "^8.29.0",
-    "eslint-config-satya164": "^3.1.12",
+    "eslint-config-satya164": "^3.2.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "jest": "^29.3.1",
     "metro-react-native-babel-preset": "^0.73.5",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.1",
+    "prettier": "^3.0.3",
     "typescript": "^4.9.4"
   },
   "jest": {

packages/bottom-tabs/src/types.tsx

@@ -43,7 +43,7 @@ export type BottomTabNavigationHelpers = NavigationHelpers<
 export type BottomTabNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -57,7 +57,7 @@ export type BottomTabNavigationProp<
 export type BottomTabScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = {
   navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
   route: RouteProp<ParamList, RouteName>;

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -104,8 +104,11 @@ export const getTabBarHeight = ({
   insets: EdgeInsets;
   style: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
 }) => {
-  // @ts-ignore
-  const customHeight = StyleSheet.flatten(style)?.height;
+  const flattenedStyle = StyleSheet.flatten(style);
+  const customHeight =
+    flattenedStyle && 'height' in flattenedStyle
+      ? flattenedStyle.height
+      : undefined;
 
   if (typeof customHeight === 'number') {
     return customHeight;

packages/core/src/Group.tsx

@@ -7,7 +7,7 @@ import type { RouteGroupConfig } from './types';
  */
 export function Group<
   ParamList extends ParamListBase,
-  ScreenOptions extends {}
+  ScreenOptions extends {},
 >(_: RouteGroupConfig<ParamList, ScreenOptions>) {
   /* istanbul ignore next */
   return null;

packages/core/src/SceneView.tsx

@@ -35,7 +35,7 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
  */
 export function SceneView<
   State extends NavigationState,
-  ScreenOptions extends {}
+  ScreenOptions extends {},
 >({
   screen,
   route,

packages/core/src/Screen.tsx

@@ -10,7 +10,7 @@ export function Screen<
   RouteName extends keyof ParamList,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 >(_: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>) {
   /* istanbul ignore next */
   return null;

packages/core/src/StaticNavigation.tsx

@@ -49,7 +49,7 @@ type ParamsForScreen<T> = T extends { screen: StaticNavigation<any, any, any> }
   ? NavigatorScreenParams<StaticParamList<T>> | undefined
   : UnknownToUndefined<ParamsForScreenComponent<T>>;
 
-type ParamListForScreens<Screens extends unknown> = {
+type ParamListForScreens<Screens> = {
   [Key in KeysOf<Screens>]: ParamsForScreen<Screens[Key]>;
 };
 
@@ -65,7 +65,7 @@ type ParamListForGroups<
           >;
         };
       }>
-    | undefined
+    | undefined,
 > = Groups extends {
   [key: string]: {
     screens: StaticConfigScreens<
@@ -83,7 +83,7 @@ type StaticConfigScreens<
   ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = {
   [key in keyof ParamList]:
     | React.ComponentType<any>
@@ -129,7 +129,7 @@ type GroupConfig<
   ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = Omit<RouteGroupConfig<ParamList, ScreenOptions>, 'screens' | 'children'> & {
   /**
    * Callback to determine whether the screens in the group should be rendered or not.
@@ -147,7 +147,7 @@ export type StaticConfig<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
-  Navigator extends React.ComponentType<{}>
+  Navigator extends React.ComponentType<{}>,
 > = Omit<
   Omit<
     React.ComponentProps<Navigator>,
@@ -196,7 +196,7 @@ export type StaticParamList<
         };
       };
     };
-  }
+  },
 > = FlatType<
   ParamListForScreens<T['config']['screens']> &
     ParamListForGroups<T['config']['groups']>
@@ -263,7 +263,7 @@ const getItemsFromScreens = (
       );
     }
 
-    let element = isNavigator ? (
+    const element = isNavigator ? (
       React.createElement(component, {})
     ) : (
       <MemoizedScreen component={component} />

packages/core/src/__tests__/BaseNavigationContainer.test.tsx

@@ -31,15 +31,14 @@ it('throws when getState is accessed without a container', () => {
   const Test = () => {
     const { getState } = React.useContext(NavigationStateContext);
 
-    // eslint-disable-next-line babel/no-unused-expressions
     getState;
 
     return null;
   };
 
   const element = <Test />;
 
-  expect(() => render(element).update(element)).toThrowError(
+  expect(() => render(element).update(element)).toThrow(
     "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?"
   );
 });
@@ -50,15 +49,14 @@ it('throws when setState is accessed without a container', () => {
   const Test = () => {
     const { setState } = React.useContext(NavigationStateContext);
 
-    // eslint-disable-next-line babel/no-unused-expressions
     setState;
 
     return null;
   };
 
   const element = <Test />;
 
-  expect(() => render(element).update(element)).toThrowError(
+  expect(() => render(element).update(element)).toThrow(
     "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?"
   );
 });
@@ -72,7 +70,7 @@ it('throws when nesting containers', () => {
         </BaseNavigationContainer>
       </BaseNavigationContainer>
     )
-  ).toThrowError(
+  ).toThrow(
     "Looks like you have nested a 'NavigationContainer' inside another."
   );
 
@@ -86,7 +84,7 @@ it('throws when nesting containers', () => {
         </NavigationIndependentTree>
       </BaseNavigationContainer>
     )
-  ).not.toThrowError(
+  ).not.toThrow(
     "Looks like you have nested a 'NavigationContainer' inside another."
   );
 });
@@ -163,8 +161,8 @@ it('handle dispatching with ref', () => {
     ref.current?.dispatch({ type: 'REVERSE' });
   });
 
-  expect(onStateChange).toBeCalledTimes(1);
-  expect(onStateChange).lastCalledWith({
+  expect(onStateChange).toHaveBeenCalledTimes(1);
+  expect(onStateChange).toHaveBeenLastCalledWith({
     stale: false,
     type: 'test',
     index: 1,
@@ -243,8 +241,8 @@ it('handle resetting state with ref', () => {
     ref.current?.resetRoot(state);
   });
 
-  expect(onStateChange).toBeCalledTimes(1);
-  expect(onStateChange).lastCalledWith({
+  expect(onStateChange).toHaveBeenCalledTimes(1);
+  expect(onStateChange).toHaveBeenLastCalledWith({
     index: 1,
     key: '3',
     routeNames: ['foo', 'foo2', 'bar', 'baz'],
@@ -364,7 +362,7 @@ it('emits state events when the state changes', () => {
     ref.current?.navigate('bar');
   });
 
-  expect(listener).toBeCalledTimes(1);
+  expect(listener).toHaveBeenCalledTimes(1);
   expect(listener.mock.calls[0][0].data.state).toEqual({
     type: 'test',
     stale: false,
@@ -382,7 +380,7 @@ it('emits state events when the state changes', () => {
     ref.current?.navigate('baz', { answer: 42 });
   });
 
-  expect(listener).toBeCalledTimes(2);
+  expect(listener).toHaveBeenCalledTimes(2);
   expect(listener.mock.calls[1][0].data.state).toEqual({
     type: 'test',
     stale: false,
@@ -481,11 +479,11 @@ it('emits state events when new navigator mounts', () => {
     ],
   };
 
-  expect(listener).toBeCalledTimes(1);
+  expect(listener).toHaveBeenCalledTimes(1);
   expect(listener.mock.calls[0][0].data.state).toEqual(resultState);
 
-  expect(onStateChange).toBeCalledTimes(1);
-  expect(onStateChange).lastCalledWith(resultState);
+  expect(onStateChange).toHaveBeenCalledTimes(1);
+  expect(onStateChange).toHaveBeenLastCalledWith(resultState);
 });
 
 it('emits option events when options change with tab router', () => {
@@ -535,7 +533,7 @@ it('emits option events when options change with tab router', () => {
     ref.current?.navigate('bar');
   });
 
-  expect(listener).toBeCalledTimes(1);
+  expect(listener).toHaveBeenCalledTimes(1);
   expect(listener.mock.calls[0][0].data.options).toEqual({ y: 2 });
   expect(ref.current?.getCurrentOptions()).toEqual({ y: 2 });
 
@@ -549,15 +547,15 @@ it('emits option events when options change with tab router', () => {
     ref.current?.navigate('baz');
   });
 
-  expect(listener2).toBeCalledTimes(1);
+  expect(listener2).toHaveBeenCalledTimes(1);
   expect(listener2.mock.calls[0][0].data.options).toEqual({ g: 5 });
   expect(ref.current?.getCurrentOptions()).toEqual({ g: 5 });
 
   act(() => {
     ref.current?.navigate('quxx');
   });
 
-  expect(listener2).toBeCalledTimes(2);
+  expect(listener2).toHaveBeenCalledTimes(2);
   expect(listener2.mock.calls[1][0].data.options).toEqual({ h: 9 });
   expect(ref.current?.getCurrentOptions()).toEqual({ h: 9 });
 });
@@ -609,7 +607,7 @@ it('emits option events when options change with stack router', () => {
     ref.current?.navigate('bar');
   });
 
-  expect(listener).toBeCalledTimes(1);
+  expect(listener).toHaveBeenCalledTimes(1);
   expect(listener.mock.calls[0][0].data.options).toEqual({ y: 2 });
   expect(ref.current?.getCurrentOptions()).toEqual({ y: 2 });
 
@@ -623,15 +621,15 @@ it('emits option events when options change with stack router', () => {
     ref.current?.navigate('baz');
   });
 
-  expect(listener2).toBeCalledTimes(1);
+  expect(listener2).toHaveBeenCalledTimes(1);
   expect(listener2.mock.calls[0][0].data.options).toEqual({ g: 5 });
   expect(ref.current?.getCurrentOptions()).toEqual({ g: 5 });
 
   act(() => {
     ref.current?.navigate('quxx');
   });
 
-  expect(listener2).toBeCalledTimes(2);
+  expect(listener2).toHaveBeenCalledTimes(2);
   expect(listener2.mock.calls[1][0].data.options).toEqual({ h: 9 });
   expect(ref.current?.getCurrentOptions()).toEqual({ h: 9 });
 });
@@ -641,7 +639,9 @@ it('throws if there is no navigator rendered', () => {
 
   const ref = createNavigationContainerRef<ParamListBase>();
 
-  const element = <BaseNavigationContainer ref={ref} children={null} />;
+  const element = (
+    <BaseNavigationContainer ref={ref}>{null}</BaseNavigationContainer>
+  );
 
   render(element);
 
@@ -713,7 +713,7 @@ it('fires onReady after navigator is rendered', () => {
 
   const root = render(element);
 
-  expect(onReady).not.toBeCalled();
+  expect(onReady).not.toHaveBeenCalled();
   expect(ref.current?.isReady()).toBe(false);
 
   root.rerender(
@@ -801,7 +801,7 @@ it('works with state change events in independent nested container', () => {
 
   act(() => ref.current?.navigate('lex'));
 
-  expect(onStateChange).toBeCalledWith({
+  expect(onStateChange).toHaveBeenCalledWith({
     index: 1,
     key: '1',
     routeNames: ['qux', 'lex'],