diff --git a/example/src/index.tsx b/example/src/index.tsx
index 6c152dcea5..80796599c7 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -162,8 +162,9 @@ export default function App() {
   const [theme, setTheme] = React.useState(DefaultTheme);
 
   const [isReady, setIsReady] = React.useState(Platform.OS === 'web');
-  const [initialState, setInitialState] =
-    React.useState<InitialState | undefined>();
+  const [initialState, setInitialState] = React.useState<
+    InitialState | undefined
+  >();
 
   React.useEffect(() => {
     const restoreState = async () => {
diff --git a/jest/setup.js b/jest/setup.js
index 5b0251b495..5e746e1f58 100644
--- a/jest/setup.js
+++ b/jest/setup.js
@@ -4,17 +4,223 @@
 import 'react-native-gesture-handler/jestSetup';
 
 jest.mock('react-native-reanimated', () => {
-  const Reanimated = require('react-native-reanimated/mock');
+  const React = require('react');
+  const {
+    View,
+    Text,
+    Image,
+    Animated,
+    Platform,
+    processColor,
+  } = require('react-native');
 
-  // The mock for `call` immediately calls the callback which is incorrect
-  // So we override it with a no-op
-  Reanimated.default.call = () => {};
+  function NOOP() {
+    // noop
+  }
 
-  return Reanimated;
+  function simulateCallbackFactory(...params) {
+    return (callback) => {
+      callback &&
+        setTimeout(() => {
+          // user defined callback
+          callback(...params);
+        }, 0);
+    };
+  }
+
+  class Code extends React.Component {
+    render() {
+      return null;
+    }
+  }
+
+  const getValue = (node) => {
+    if (typeof node === 'number') {
+      return node;
+    }
+    return (node && node[' __value']) || 0;
+  };
+
+  class AnimatedValue {
+    constructor(val) {
+      this[' __value'] = val;
+    }
+
+    setValue(val) {
+      this[' __value'] = val;
+    }
+
+    interpolate() {
+      return this;
+    }
+  }
+
+  const Reanimated = {
+    SpringUtils: {
+      makeDefaultConfig: NOOP,
+      makeConfigFromBouncinessAndSpeed: NOOP,
+      makeConfigFromOrigamiTensionAndFriction: NOOP,
+    },
+
+    View,
+    Text,
+    Image,
+    ScrollView: Animated.ScrollView,
+    Code,
+
+    Clock: NOOP,
+    Node: NOOP,
+    Value: AnimatedValue,
+
+    EasingNode: {
+      linear: NOOP,
+      ease: NOOP,
+      quad: NOOP,
+      cubic: NOOP,
+      poly: () => NOOP,
+      sin: NOOP,
+      circle: NOOP,
+      exp: NOOP,
+      elastic: () => NOOP,
+      back: () => NOOP,
+      bounce: () => NOOP,
+      bezier: () => NOOP,
+      in: () => NOOP,
+      out: () => NOOP,
+      inOut: () => NOOP,
+    },
+
+    Extrapolate: {
+      EXTEND: 'extend',
+      CLAMP: 'clamp',
+      IDENTITY: 'identity',
+    },
+
+    processColor,
+
+    add: (...vals) =>
+      new AnimatedValue(
+        vals.map((v) => getValue(v)).reduce((acc, v) => acc + v)
+      ),
+    sub: (...vals) =>
+      new AnimatedValue(
+        vals.map((v) => getValue(v)).reduce((acc, v) => acc - v)
+      ),
+    divide: (...vals) =>
+      new AnimatedValue(
+        vals.map((v) => getValue(v)).reduce((acc, v) => acc / v)
+      ),
+    multiply: (...vals) =>
+      new AnimatedValue(
+        vals.map((v) => getValue(v)).reduce((acc, v) => acc * v)
+      ),
+    pow: (...vals) =>
+      new AnimatedValue(
+        vals.map((v) => getValue(v)).reduce((acc, v) => acc ** v)
+      ),
+    modulo: (a, b) => new AnimatedValue(getValue(a) % getValue(b)),
+    sqrt: (a) => new AnimatedValue(Math.sqrt(getValue(a))),
+    log: (a) => new AnimatedValue(Math.log(getValue(a))),
+    sin: (a) => new AnimatedValue(Math.sin(getValue(a))),
+    cos: (a) => new AnimatedValue(Math.cos(getValue(a))),
+    tan: (a) => new AnimatedValue(Math.tan(getValue(a))),
+    acos: (a) => new AnimatedValue(Math.acos(getValue(a))),
+    asin: (a) => new AnimatedValue(Math.asin(getValue(a))),
+    atan: (a) => new AnimatedValue(Math.atan(getValue(a))),
+    exp: (a) => new AnimatedValue(Math.exp(getValue(a))),
+    round: (a) => new AnimatedValue(Math.round(getValue(a))),
+    floor: (a) => new AnimatedValue(Math.floor(getValue(a))),
+    ceil: (a) => new AnimatedValue(Math.ceil(getValue(a))),
+    lessThan: (a, b) => new AnimatedValue(getValue(a) < getValue(b)),
+    eq: (a, b) => new AnimatedValue(getValue(a) === getValue(b)),
+    greaterThan: (a, b) => new AnimatedValue(getValue(a) > getValue(b)),
+    lessOrEq: (a, b) => new AnimatedValue(getValue(a) <= getValue(b)),
+    greaterOrEq: (a, b) => new AnimatedValue(getValue(a) >= getValue(b)),
+    neq: (a, b) => new AnimatedValue(getValue(a) !== getValue(b)),
+    and: (a, b) => new AnimatedValue(getValue(a) && getValue(b)),
+    or: (a, b) => new AnimatedValue(getValue(a) || getValue(b)),
+    defined: (a) =>
+      new AnimatedValue(getValue(a) !== null && getValue(a) !== undefined),
+    not: (a) => new AnimatedValue(!getValue(a)),
+    set: (a, b) => {
+      a.setValue(getValue(b));
+      return a;
+    },
+    concat: (a, b) => `${a}${b}`,
+    cond: (a, b, c) => {
+      if (getValue(a)) {
+        return b;
+      } else {
+        return c;
+      }
+    },
+    block: (a) => a[a.length - 1],
+    call: (a, b) => () => b(a.map(getValue)),
+    debug: NOOP,
+    onChange: NOOP,
+    startClock: NOOP,
+    stopClock: NOOP,
+    clockRunning: NOOP,
+    event: NOOP,
+    abs: (a) => Math.abs(getValue(a)),
+    acc: NOOP,
+    color: (r, g, b, a = 1) => {
+      const color =
+        16777216 * Math.round(getValue(a) * 255) +
+        65536 * getValue(r) +
+        256 * getValue(g) +
+        getValue(b);
+      if (Platform.OS === 'android') {
+        // on Android color is represented as signed 32 bit int
+        if (color < (1 << 31) >>> 0) {
+          return new AnimatedValue(color);
+        }
+        return new AnimatedValue(color - 2 ** 32);
+      }
+      return new AnimatedValue(color);
+    },
+    diff: NOOP,
+    diffClamp: NOOP,
+    interpolateNode: NOOP,
+    interpolateColors: NOOP,
+    max: (a, b) => Math.max(getValue(a), getValue(b)),
+    min: (a, b) => Math.min(getValue(a), getValue(b)),
+
+    decay: () => ({
+      start: simulateCallbackFactory({ finished: true }),
+      stop: simulateCallbackFactory({ finished: true }),
+    }),
+    timing: () => ({
+      start: simulateCallbackFactory({ finished: true }),
+      stop: simulateCallbackFactory({ finished: true }),
+    }),
+    spring: () => ({
+      start: simulateCallbackFactory({ finished: true }),
+      stop: simulateCallbackFactory({ finished: true }),
+    }),
+
+    proc: (cb) => cb,
+
+    useCode: NOOP,
+    useValue: (a) => new AnimatedValue(a),
+    createAnimatedComponent: (Component) => Component,
+    addWhitelistedUIProps: NOOP,
+    addWhitelistedNativeProps: NOOP,
+  };
+
+  return {
+    __esModule: true,
+
+    ...Reanimated,
+
+    default: {
+      ...Reanimated,
+    },
+  };
 });
 
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 
 const error = console.error;
 
diff --git a/package.json b/package.json
index 5bfabd00d0..424a7956d1 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,9 @@
     "setupFiles": [
       "<rootDir>/jest/setup.js"
     ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@react-native|react-native|react-native-iphone-x-helper)/)"
+    ],
     "moduleNameMapper": {
       "@react-navigation/([^/]+)": "<rootDir>/packages/$1/src"
     },
@@ -102,7 +105,5 @@
         }
       }
     }
-  },
-  "name": "react-navigation",
-  "version": "1.0.0"
+  }
 }
diff --git a/packages/core/src/CurrentRenderContext.tsx b/packages/core/src/CurrentRenderContext.tsx
index b514b8400f..2c9f26549d 100644
--- a/packages/core/src/CurrentRenderContext.tsx
+++ b/packages/core/src/CurrentRenderContext.tsx
@@ -4,7 +4,8 @@ import * as React from 'react';
  * Context which holds the values for the current navigation tree.
  * Intended for use in SSR. This is not safe to use on the client.
  */
-const CurrentRenderContext =
-  React.createContext<{ options?: object } | undefined>(undefined);
+const CurrentRenderContext = React.createContext<
+  { options?: object } | undefined
+>(undefined);
 
 export default CurrentRenderContext;
diff --git a/packages/core/src/EnsureSingleNavigator.tsx b/packages/core/src/EnsureSingleNavigator.tsx
index ecb9f77d25..ce5ecdfe89 100644
--- a/packages/core/src/EnsureSingleNavigator.tsx
+++ b/packages/core/src/EnsureSingleNavigator.tsx
@@ -6,14 +6,13 @@ type Props = {
 
 const MULTIPLE_NAVIGATOR_ERROR = `Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.`;
 
-export const SingleNavigatorContext =
-  React.createContext<
-    | {
-        register(key: string): void;
-        unregister(key: string): void;
-      }
-    | undefined
-  >(undefined);
+export const SingleNavigatorContext = React.createContext<
+  | {
+      register(key: string): void;
+      unregister(key: string): void;
+    }
+  | undefined
+>(undefined);
 
 /**
  * Component which ensures that there's only one navigator nested under it.
diff --git a/packages/core/src/NavigationContainerRefContext.tsx b/packages/core/src/NavigationContainerRefContext.tsx
index 2e37c55112..b59c918c60 100644
--- a/packages/core/src/NavigationContainerRefContext.tsx
+++ b/packages/core/src/NavigationContainerRefContext.tsx
@@ -6,9 +6,8 @@ import type { NavigationContainerRef } from './types';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationContainerRefContext =
-  React.createContext<NavigationContainerRef<ParamListBase> | undefined>(
-    undefined
-  );
+const NavigationContainerRefContext = React.createContext<
+  NavigationContainerRef<ParamListBase> | undefined
+>(undefined);
 
 export default NavigationContainerRefContext;
diff --git a/packages/core/src/NavigationContext.tsx b/packages/core/src/NavigationContext.tsx
index 95f5d0a380..a6c92196d3 100644
--- a/packages/core/src/NavigationContext.tsx
+++ b/packages/core/src/NavigationContext.tsx
@@ -6,7 +6,8 @@ import type { NavigationProp } from './types';
 /**
  * Context which holds the navigation prop for a screen.
  */
-const NavigationContext =
-  React.createContext<NavigationProp<ParamListBase> | undefined>(undefined);
+const NavigationContext = React.createContext<
+  NavigationProp<ParamListBase> | undefined
+>(undefined);
 
 export default NavigationContext;
diff --git a/packages/core/src/NavigationHelpersContext.tsx b/packages/core/src/NavigationHelpersContext.tsx
index 61a1b0a475..0ea82afbb1 100644
--- a/packages/core/src/NavigationHelpersContext.tsx
+++ b/packages/core/src/NavigationHelpersContext.tsx
@@ -7,7 +7,8 @@ import type { NavigationHelpers } from './types';
  * Context which holds the navigation helpers of the parent navigator.
  * Navigators should use this context in their view component.
  */
-const NavigationHelpersContext =
-  React.createContext<NavigationHelpers<ParamListBase> | undefined>(undefined);
+const NavigationHelpersContext = React.createContext<
+  NavigationHelpers<ParamListBase> | undefined
+>(undefined);
 
 export default NavigationHelpersContext;
diff --git a/packages/core/src/NavigationRouteContext.tsx b/packages/core/src/NavigationRouteContext.tsx
index d733a1e00b..e7ecfe961d 100644
--- a/packages/core/src/NavigationRouteContext.tsx
+++ b/packages/core/src/NavigationRouteContext.tsx
@@ -4,7 +4,8 @@ import * as React from 'react';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationRouteContext =
-  React.createContext<Route<string> | undefined>(undefined);
+const NavigationRouteContext = React.createContext<Route<string> | undefined>(
+  undefined
+);
 
 export default NavigationRouteContext;
diff --git a/packages/core/src/UnhandledActionContext.tsx b/packages/core/src/UnhandledActionContext.tsx
index 15dda21eb8..b5682aea84 100644
--- a/packages/core/src/UnhandledActionContext.tsx
+++ b/packages/core/src/UnhandledActionContext.tsx
@@ -1,9 +1,8 @@
 import type { NavigationAction } from '@react-navigation/routers';
 import * as React from 'react';
 
-const UnhandledActionContext =
-  React.createContext<((action: NavigationAction) => void) | undefined>(
-    undefined
-  );
+const UnhandledActionContext = React.createContext<
+  ((action: NavigationAction) => void) | undefined
+>(undefined);
 
 export default UnhandledActionContext;
diff --git a/packages/core/src/__tests__/index.test.tsx b/packages/core/src/__tests__/index.test.tsx
index fdd6efbb23..36d2ac25d6 100644
--- a/packages/core/src/__tests__/index.test.tsx
+++ b/packages/core/src/__tests__/index.test.tsx
@@ -38,11 +38,11 @@ it('initializes state for a navigator on navigation', () => {
           component={FooScreen}
           initialParams={{ count: 10 }}
         />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
         <Screen name="baz">
           {() => (
             <TestNavigator>
-              <Screen name="qux" component={jest.fn()} />
+              <Screen name="qux" component={React.Fragment} />
             </TestNavigator>
           )}
         </Screen>
@@ -120,7 +120,7 @@ it('rehydrates state for a navigator on navigation', () => {
       onStateChange={onStateChange}
     >
       <TestNavigator initialRouteName="foo">
-        <Screen name="foo" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
         <Screen name="bar" component={BarScreen} />
       </TestNavigator>
     </BaseNavigationContainer>
@@ -179,7 +179,7 @@ it("doesn't rehydrate state if the type of state didn't match router", () => {
           component={FooScreen}
           initialParams={{ answer: 42 }}
         />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -226,8 +226,8 @@ it('initializes state for nested screens in React.Fragment', () => {
       <TestNavigator>
         <Screen name="foo" component={TestScreen} />
         <React.Fragment>
-          <Screen name="bar" component={jest.fn()} />
-          <Screen name="baz" component={jest.fn()} />
+          <Screen name="bar" component={React.Fragment} />
+          <Screen name="baz" component={React.Fragment} />
         </React.Fragment>
       </TestNavigator>
     </BaseNavigationContainer>
@@ -273,8 +273,8 @@ it('initializes state for nested screens in Group', () => {
       <TestNavigator>
         <Screen name="foo" component={TestScreen} />
         <Group>
-          <Screen name="bar" component={jest.fn()} />
-          <Screen name="baz" component={jest.fn()} />
+          <Screen name="bar" component={React.Fragment} />
+          <Screen name="baz" component={React.Fragment} />
         </Group>
       </TestNavigator>
     </BaseNavigationContainer>
@@ -318,8 +318,8 @@ it('initializes state for nested navigator on navigation', () => {
   const element = (
     <BaseNavigationContainer onStateChange={onStateChange}>
       <TestNavigator initialRouteName="baz">
-        <Screen name="foo" component={jest.fn()} />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
+        <Screen name="bar" component={React.Fragment} />
         <Screen name="baz">
           {() => (
             <TestNavigator>
@@ -381,7 +381,7 @@ it("doesn't update state if nothing changed", () => {
     <BaseNavigationContainer onStateChange={onStateChange}>
       <TestNavigator initialRouteName="foo">
         <Screen name="foo" component={FooScreen} />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -413,7 +413,7 @@ it("doesn't update state if action wasn't handled", () => {
     <BaseNavigationContainer onStateChange={onStateChange}>
       <TestNavigator initialRouteName="foo">
         <Screen name="foo" component={FooScreen} />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -451,7 +451,7 @@ it('cleans up state when the navigator unmounts', () => {
     <BaseNavigationContainer onStateChange={onStateChange}>
       <TestNavigator>
         <Screen name="foo" component={FooScreen} />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -553,7 +553,7 @@ it('updates route params with setParams', () => {
     <BaseNavigationContainer onStateChange={onStateChange}>
       <TestNavigator initialRouteName="foo">
         <Screen name="foo" component={FooScreen} />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -619,7 +619,7 @@ it('updates route params with setParams applied to parent', () => {
             </TestNavigator>
           )}
         </Screen>
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -690,8 +690,8 @@ it('handles change in route names', async () => {
   const root = render(
     <BaseNavigationContainer>
       <TestNavigator initialRouteName="bar">
-        <Screen name="foo" component={jest.fn()} />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -699,9 +699,9 @@ it('handles change in route names', async () => {
   root.update(
     <BaseNavigationContainer onStateChange={onStateChange}>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()} />
-        <Screen name="baz" component={jest.fn()} />
-        <Screen name="qux" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
+        <Screen name="baz" component={React.Fragment} />
+        <Screen name="qux" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1390,9 +1390,9 @@ it('preserves order of screens in state with non-numeric names', () => {
   const root = (
     <BaseNavigationContainer ref={navigation}>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()} />
-        <Screen name="bar" component={jest.fn()} />
-        <Screen name="baz" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
+        <Screen name="bar" component={React.Fragment} />
+        <Screen name="baz" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1413,9 +1413,9 @@ it('preserves order of screens in state with numeric names', () => {
   const root = (
     <BaseNavigationContainer ref={navigation}>
       <TestNavigator>
-        <Screen name="4" component={jest.fn()} />
-        <Screen name="7" component={jest.fn()} />
-        <Screen name="1" component={jest.fn()} />
+        <Screen name="4" component={React.Fragment} />
+        <Screen name="7" component={React.Fragment} />
+        <Screen name="1" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1450,7 +1450,7 @@ it('throws if navigator is not inside a container', () => {
 
   const element = (
     <TestNavigator>
-      <Screen name="foo" component={jest.fn()} />
+      <Screen name="foo" component={React.Fragment} />
     </TestNavigator>
   );
 
@@ -1468,10 +1468,10 @@ it('throws if multiple navigators rendered under one container', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
       </TestNavigator>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1492,7 +1492,7 @@ it('throws when Screen is not the direct children', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
         <Bar />
       </TestNavigator>
     </BaseNavigationContainer>
@@ -1516,7 +1516,7 @@ it('throws when undefined component is a direct children', () => {
     <BaseNavigationContainer>
       <TestNavigator>
         {/* @ts-ignore */}
-        <Undefined name="foo" component={jest.fn()} />
+        <Undefined name="foo" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1538,7 +1538,7 @@ it('throws when a tag is a direct children', () => {
     <BaseNavigationContainer>
       <TestNavigator>
         {/* @ts-ignore */}
-        <screen name="foo" component={jest.fn()} />
+        <screen name="foo" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1557,7 +1557,7 @@ it('throws when a React Element is not the direct children', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
         Hello world
       </TestNavigator>
     </BaseNavigationContainer>
@@ -1578,7 +1578,7 @@ it("doesn't throw when direct children is Screen or empty element", () => {
   render(
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
         {null}
         {undefined}
         {false}
@@ -1597,9 +1597,9 @@ it('throws when multiple screens with same name are defined', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()} />
-        <Screen name="bar" component={jest.fn()} />
-        <Screen name="foo" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
+        <Screen name="bar" component={React.Fragment} />
+        <Screen name="foo" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1618,7 +1618,7 @@ it('switches rendered navigators', () => {
   const root = render(
     <BaseNavigationContainer>
       <TestNavigator key="a">
-        <Screen name="foo" component={jest.fn()} />
+        <Screen name="foo" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1627,7 +1627,7 @@ it('switches rendered navigators', () => {
     root.update(
       <BaseNavigationContainer>
         <TestNavigator key="b">
-          <Screen name="foo" component={jest.fn()} />
+          <Screen name="foo" component={React.Fragment} />
         </TestNavigator>
       </BaseNavigationContainer>
     )
@@ -1645,7 +1645,7 @@ it('throws if no name is passed to Screen', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name={undefined as any} component={jest.fn()} />
+        <Screen name={undefined as any} component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1664,7 +1664,7 @@ it('throws if invalid name is passed to Screen', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name={[] as any} component={jest.fn()} />
+        <Screen name={[] as any} component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1684,7 +1684,7 @@ it('throws if both children and component are passed', () => {
     <BaseNavigationContainer>
       <TestNavigator>
         {/* @ts-ignore */}
-        <Screen name="foo" component={jest.fn()}>
+        <Screen name="foo" component={React.Fragment}>
           {jest.fn()}
         </Screen>
       </TestNavigator>
@@ -1702,12 +1702,14 @@ it('throws if both children and getComponent are passed', () => {
     return null;
   };
 
+  const Test = () => null;
+
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
         {/* @ts-ignore */}
-        <Screen name="foo" getComponent={jest.fn()}>
-          {jest.fn()}
+        <Screen name="foo" getComponent={() => Test}>
+          {() => <Test />}
         </Screen>
       </TestNavigator>
     </BaseNavigationContainer>
@@ -1724,11 +1726,13 @@ it('throws if both component and getComponent are passed', () => {
     return null;
   };
 
+  const Test = () => null;
+
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
         {/* @ts-ignore */}
-        <Screen name="foo" component={jest.fn()} getComponent={jest.fn()} />
+        <Screen name="foo" component={Test} getComponent={() => Test} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1747,7 +1751,8 @@ it('throws descriptive error for undefined screen component', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" component={undefined as any} />
+        {/* @ts-ignore */}
+        <Screen name="foo" component={undefined} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1766,7 +1771,8 @@ it('throws descriptive error for invalid screen component', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" component={{} as any} />
+        {/* @ts-ignore */}
+        <Screen name="foo" component={{}} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1785,7 +1791,8 @@ it('throws descriptive error for invalid getComponent prop', () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" getComponent={{} as any} />
+        {/* @ts-ignore */}
+        <Screen name="foo" getComponent={{}} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -1823,7 +1830,7 @@ it("doesn't throw if children is null", () => {
   const element = (
     <BaseNavigationContainer>
       <TestNavigator>
-        <Screen name="foo" component={jest.fn()}>
+        <Screen name="foo" component={React.Fragment}>
           {null as any}
         </Screen>
       </TestNavigator>
diff --git a/packages/core/src/__tests__/useDescriptors.test.tsx b/packages/core/src/__tests__/useDescriptors.test.tsx
index d0300741a8..d1b6798805 100644
--- a/packages/core/src/__tests__/useDescriptors.test.tsx
+++ b/packages/core/src/__tests__/useDescriptors.test.tsx
@@ -47,7 +47,7 @@ it('sets options with options prop as an object', () => {
           component={TestScreen}
           options={{ title: 'Hello world' }}
         />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -94,7 +94,7 @@ it('sets options with options prop as a fuction', () => {
           options={({ route }: any) => ({ title: route.params.author })}
           initialParams={{ author: 'Jane' }}
         />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -283,7 +283,7 @@ it('sets initial options with setOptions', () => {
         <Screen name="foo" options={{ color: 'blue' }}>
           {(props) => <TestScreen {...props} />}
         </Screen>
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -349,7 +349,7 @@ it('updates options with setOptions', () => {
         <Screen name="foo" options={{ color: 'blue' }}>
           {(props) => <TestScreen {...props} />}
         </Screen>
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
@@ -417,7 +417,7 @@ it("returns correct value for canGoBack when it's not overridden", () => {
           component={TestScreen}
           options={{ title: 'Hello world' }}
         />
-        <Screen name="bar" component={jest.fn()} />
+        <Screen name="bar" component={React.Fragment} />
       </TestNavigator>
     </BaseNavigationContainer>
   );
diff --git a/packages/core/src/__tests__/useEventEmitter.test.tsx b/packages/core/src/__tests__/useEventEmitter.test.tsx
index 1650c3ae49..e51eae18b0 100644
--- a/packages/core/src/__tests__/useEventEmitter.test.tsx
+++ b/packages/core/src/__tests__/useEventEmitter.test.tsx
@@ -591,17 +591,17 @@ it('fires custom events added with listeners prop', () => {
         <Screen
           name="first"
           listeners={{ someSuperCoolEvent: firstCallback }}
-          component={jest.fn()}
+          component={React.Fragment}
         />
         <Screen
           name="second"
           listeners={{ someSuperCoolEvent: secondCallback }}
-          component={jest.fn()}
+          component={React.Fragment}
         />
         <Screen
           name="third"
           listeners={{ someSuperCoolEvent: thirdCallback }}
-          component={jest.fn()}
+          component={React.Fragment}
         />
       </TestNavigator>
     </BaseNavigationContainer>
@@ -668,17 +668,17 @@ it("doesn't call same listener multiple times with listeners", () => {
         <Screen
           name="first"
           listeners={{ someSuperCoolEvent: callback }}
-          component={jest.fn()}
+          component={React.Fragment}
         />
         <Screen
           name="second"
           listeners={{ someSuperCoolEvent: callback }}
-          component={jest.fn()}
+          component={React.Fragment}
         />
         <Screen
           name="third"
           listeners={{ someSuperCoolEvent: callback }}
-          component={jest.fn()}
+          component={React.Fragment}
         />
       </TestNavigator>
     </BaseNavigationContainer>
@@ -723,21 +723,21 @@ it('fires listeners when callback is provided for listeners prop', () => {
           listeners={({ route, navigation }) => ({
             someSuperCoolEvent: (e) => firstCallback(e, route, navigation),
           })}
-          component={jest.fn()}
+          component={React.Fragment}
         />
         <Screen
           name="second"
           listeners={({ route, navigation }) => ({
             someSuperCoolEvent: (e) => secondCallback(e, route, navigation),
           })}
-          component={jest.fn()}
+          component={React.Fragment}
         />
         <Screen
           name="third"
           listeners={({ route, navigation }) => ({
             someSuperCoolEvent: (e) => thirdCallback(e, route, navigation),
           })}
-          component={jest.fn()}
+          component={React.Fragment}
         />
       </TestNavigator>
     </BaseNavigationContainer>
diff --git a/packages/core/src/types.tsx b/packages/core/src/types.tsx
index b18d1ba7c7..7872131cc7 100644
--- a/packages/core/src/types.tsx
+++ b/packages/core/src/types.tsx
@@ -393,12 +393,12 @@ export type Descriptor<
 export type ScreenListeners<
   State extends NavigationState,
   EventMap extends EventMapBase
-> = Partial<
-  {
-    [EventName in keyof (EventMap &
-      EventMapCore<State>)]: EventListenerCallback<EventMap, EventName>;
-  }
->;
+> = Partial<{
+  [EventName in keyof (EventMap & EventMapCore<State>)]: EventListenerCallback<
+    EventMap,
+    EventName
+  >;
+}>;
 
 export type RouteConfigComponent<
   ParamList extends ParamListBase,
diff --git a/packages/core/src/useChildListeners.tsx b/packages/core/src/useChildListeners.tsx
index 2169d0b5e1..982b2df26e 100644
--- a/packages/core/src/useChildListeners.tsx
+++ b/packages/core/src/useChildListeners.tsx
@@ -6,11 +6,9 @@ import type { ListenerMap } from './NavigationBuilderContext';
  * Hook which lets child navigators add action listeners.
  */
 export default function useChildListeners() {
-  const { current: listeners } = React.useRef<
-    {
-      [K in keyof ListenerMap]: ListenerMap[K][];
-    }
-  >({
+  const { current: listeners } = React.useRef<{
+    [K in keyof ListenerMap]: ListenerMap[K][];
+  }>({
     action: [],
     focus: [],
   });
diff --git a/packages/core/src/useKeyedChildListeners.tsx b/packages/core/src/useKeyedChildListeners.tsx
index 1befd38f10..2d04b4da84 100644
--- a/packages/core/src/useKeyedChildListeners.tsx
+++ b/packages/core/src/useKeyedChildListeners.tsx
@@ -6,14 +6,12 @@ import type { KeyedListenerMap } from './NavigationBuilderContext';
  * Hook which lets child navigators add getters to be called for obtaining rehydrated state.
  */
 export default function useKeyedChildListeners() {
-  const { current: keyedListeners } = React.useRef<
-    {
-      [K in keyof KeyedListenerMap]: Record<
-        string,
-        KeyedListenerMap[K] | undefined
-      >;
-    }
-  >({
+  const { current: keyedListeners } = React.useRef<{
+    [K in keyof KeyedListenerMap]: Record<
+      string,
+      KeyedListenerMap[K] | undefined
+    >;
+  }>({
     getState: {},
     beforeRemove: {},
   });
diff --git a/packages/devtools/src/useDevToolsBase.tsx b/packages/devtools/src/useDevToolsBase.tsx
index 833655c2b7..d851447e6e 100644
--- a/packages/devtools/src/useDevToolsBase.tsx
+++ b/packages/devtools/src/useDevToolsBase.tsx
@@ -40,10 +40,9 @@ export default function useDevToolsBase(
   callback: (result: InitData | ActionData) => void
 ) {
   const lastStateRef = React.useRef<NavigationState | undefined>();
-  const lastActionRef =
-    React.useRef<
-      { action: NavigationAction; stack: string | undefined } | undefined
-    >();
+  const lastActionRef = React.useRef<
+    { action: NavigationAction; stack: string | undefined } | undefined
+  >();
   const callbackRef = React.useRef(callback);
   const lastResetRef = React.useRef<NavigationState | undefined>(undefined);
 
diff --git a/packages/drawer/src/utils/DrawerStatusContext.tsx b/packages/drawer/src/utils/DrawerStatusContext.tsx
index ec62155520..06e61dcde1 100644
--- a/packages/drawer/src/utils/DrawerStatusContext.tsx
+++ b/packages/drawer/src/utils/DrawerStatusContext.tsx
@@ -1,7 +1,8 @@
 import type { DrawerStatus } from '@react-navigation/native';
 import * as React from 'react';
 
-const DrawerStatusContext =
-  React.createContext<DrawerStatus | undefined>(undefined);
+const DrawerStatusContext = React.createContext<DrawerStatus | undefined>(
+  undefined
+);
 
 export default DrawerStatusContext;
diff --git a/packages/elements/src/Header/HeaderBackButton.tsx b/packages/elements/src/Header/HeaderBackButton.tsx
index a0a70e1eb3..39a39b2aeb 100644
--- a/packages/elements/src/Header/HeaderBackButton.tsx
+++ b/packages/elements/src/Header/HeaderBackButton.tsx
@@ -35,8 +35,9 @@ export default function HeaderBackButton({
 }: HeaderBackButtonProps) {
   const { colors } = useTheme();
 
-  const [initialLabelWidth, setInitialLabelWidth] =
-    React.useState<undefined | number>(undefined);
+  const [initialLabelWidth, setInitialLabelWidth] = React.useState<
+    undefined | number
+  >(undefined);
 
   const tintColor =
     customTintColor !== undefined
diff --git a/packages/flipper-plugin-react-navigation/src/LinkingTester.tsx b/packages/flipper-plugin-react-navigation/src/LinkingTester.tsx
index b7733b0684..800bf68583 100644
--- a/packages/flipper-plugin-react-navigation/src/LinkingTester.tsx
+++ b/packages/flipper-plugin-react-navigation/src/LinkingTester.tsx
@@ -19,11 +19,13 @@ export function LinkingTester({ linking, active }: Props) {
   const [rawConfig, setRawConfig] = React.useState('');
   const [path, setPath] = React.useState('');
 
-  const [state, setState] =
-    React.useState<ReturnType<typeof getStateFromPath> | undefined>();
+  const [state, setState] = React.useState<
+    ReturnType<typeof getStateFromPath> | undefined
+  >();
 
-  const [action, setAction] =
-    React.useState<ReturnType<typeof getActionFromState> | undefined>();
+  const [action, setAction] = React.useState<
+    ReturnType<typeof getActionFromState> | undefined
+  >();
 
   const [error, setError] = React.useState<string | undefined>();
 
diff --git a/packages/native-stack/src/views/NativeStackView.native.tsx b/packages/native-stack/src/views/NativeStackView.native.tsx
index c4a295123d..2a9111a7c2 100644
--- a/packages/native-stack/src/views/NativeStackView.native.tsx
+++ b/packages/native-stack/src/views/NativeStackView.native.tsx
@@ -259,8 +259,9 @@ type Props = {
 };
 
 function NativeStackViewInner({ state, navigation, descriptors }: Props) {
-  const [nextDismissedKey, setNextDismissedKey] =
-    React.useState<string | null>(null);
+  const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
+    null
+  );
 
   const dismissedRouteName = nextDismissedKey
     ? state.routes.find((route) => route.key === nextDismissedKey)?.name
diff --git a/packages/native/src/ServerContext.tsx b/packages/native/src/ServerContext.tsx
index 5ed3d1e236..2c199bbcee 100644
--- a/packages/native/src/ServerContext.tsx
+++ b/packages/native/src/ServerContext.tsx
@@ -7,7 +7,8 @@ export type ServerContextType = {
   };
 };
 
-const ServerContext =
-  React.createContext<ServerContextType | undefined>(undefined);
+const ServerContext = React.createContext<ServerContextType | undefined>(
+  undefined
+);
 
 export default ServerContext;
diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
index ef4765ffd1..c941d9f552 100644
--- a/packages/stack/src/views/Header/HeaderSegment.tsx
+++ b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -33,11 +33,13 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
 };
 
 export default function HeaderSegment(props: Props) {
-  const [leftLabelLayout, setLeftLabelLayout] =
-    React.useState<Layout | undefined>(undefined);
+  const [leftLabelLayout, setLeftLabelLayout] = React.useState<
+    Layout | undefined
+  >(undefined);
 
-  const [titleLayout, setTitleLayout] =
-    React.useState<Layout | undefined>(undefined);
+  const [titleLayout, setTitleLayout] = React.useState<Layout | undefined>(
+    undefined
+  );
 
   const handleTitleLayout = (e: LayoutChangeEvent) => {
     const { height, width } = e.nativeEvent.layout;
diff --git a/packages/stack/src/views/Stack/CardContainer.tsx b/packages/stack/src/views/Stack/CardContainer.tsx
index 21473fe0b1..1e9ee0e6a5 100644
--- a/packages/stack/src/views/Stack/CardContainer.tsx
+++ b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -165,8 +165,9 @@ function CardContainer({
 
   const { colors } = useTheme();
 
-  const [pointerEvents, setPointerEvents] =
-    React.useState<'box-none' | 'none'>('box-none');
+  const [pointerEvents, setPointerEvents] = React.useState<'box-none' | 'none'>(
+    'box-none'
+  );
 
   React.useEffect(() => {
     const listener = scene.progress.next?.addListener?.(