From f047f9504d2bcb8358f928edd1152361a545d484 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacper.kafara@swmansion.com>
Date: Wed, 19 Jul 2023 14:55:13 +0200
Subject: [PATCH] chore: format code in test examples (#1812)

## Description

Working with test examples is stressful for eyes as ESlint is making my
screen red.

## Changes

"Fixed all autofixable problems" in test examples.

Essentially I've adjusted eslint & prettier configs and run `prettier .
--write` in examples.

## Checklist

- [ ] Ensured that CI passes
---
 FabricTestExample/.eslintrc.js                |   8 +
 FabricTestExample/.prettierrc.js              |   2 +-
 FabricTestExample/App.js                      |   2 +-
 FabricTestExample/index.js                    |   4 +-
 FabricTestExample/metro.config.js             |   3 +-
 FabricTestExample/src/Test1017.tsx            |  25 +--
 FabricTestExample/src/Test1031.tsx            |  42 +++--
 FabricTestExample/src/Test1032.tsx            |  18 +-
 FabricTestExample/src/Test1036.tsx            |  10 +-
 FabricTestExample/src/Test1072.tsx            |  16 +-
 FabricTestExample/src/Test1084.tsx            |  20 ++-
 FabricTestExample/src/Test1091.tsx            |  10 +-
 FabricTestExample/src/Test1096.tsx            |  14 +-
 FabricTestExample/src/Test1097.tsx            |  20 +--
 FabricTestExample/src/Test111.js              |  12 +-
 FabricTestExample/src/Test1153.tsx            |  13 +-
 FabricTestExample/src/Test1157.tsx            |  18 +-
 FabricTestExample/src/Test1162.tsx            |  25 +--
 .../Test1166/AndroidDifferentScreenSearch.tsx |  18 +-
 .../AndroidSearchBarCustomization.tsx         |   6 +-
 .../src/Test1166/AndroidSearchBarEvents.tsx   |  18 +-
 .../src/Test1166/AndroidSearchTypes.tsx       |  18 +-
 FabricTestExample/src/Test1166/index.tsx      |  14 +-
 FabricTestExample/src/Test1188.tsx            |   8 +-
 FabricTestExample/src/Test1190.tsx            |  46 +++--
 FabricTestExample/src/Test1198.tsx            |  10 +-
 FabricTestExample/src/Test1204.tsx            |   8 +-
 FabricTestExample/src/Test1209.tsx            |  22 ++-
 FabricTestExample/src/Test1213.tsx            |   8 +-
 FabricTestExample/src/Test1214.tsx            |  35 ++--
 FabricTestExample/src/Test1227.tsx            |  14 +-
 FabricTestExample/src/Test1228.tsx            |  15 +-
 FabricTestExample/src/Test1259.tsx            |   4 +-
 FabricTestExample/src/Test1260.tsx            |  48 ++++--
 FabricTestExample/src/Test1296.tsx            |  29 ++--
 FabricTestExample/src/Test1299.tsx            |  18 +-
 FabricTestExample/src/Test1391.tsx            |  28 ++--
 FabricTestExample/src/Test1419.tsx            |  72 ++++----
 FabricTestExample/src/Test1463.tsx            |  41 +++--
 FabricTestExample/src/Test1473.tsx            |  29 ++--
 FabricTestExample/src/Test1476.tsx            | 108 +++++++-----
 FabricTestExample/src/Test1646.tsx            |  12 +-
 FabricTestExample/src/Test1649.tsx            | 158 ++++++++++--------
 FabricTestExample/src/Test1683.tsx            |  12 +-
 FabricTestExample/src/Test1726.tsx            |  18 +-
 FabricTestExample/src/Test263.js              |  24 +--
 FabricTestExample/src/Test349.js              |  28 ++--
 FabricTestExample/src/Test364.js              |   7 +-
 FabricTestExample/src/Test42.tsx              |  15 +-
 FabricTestExample/src/Test528.js              |  27 +--
 FabricTestExample/src/Test550.js              |  10 +-
 FabricTestExample/src/Test556.js              |  38 +++--
 FabricTestExample/src/Test564.js              |  16 +-
 FabricTestExample/src/Test577.js              |   6 +-
 FabricTestExample/src/Test593.tsx             |  68 ++++----
 FabricTestExample/src/Test619.js              |  92 ++++++----
 FabricTestExample/src/Test624.js              |  14 +-
 FabricTestExample/src/Test640.js              |  35 ++--
 FabricTestExample/src/Test642.tsx             |  10 +-
 FabricTestExample/src/Test645.js              |  41 +++--
 FabricTestExample/src/Test648.js              |  11 +-
 FabricTestExample/src/Test649.js              |  18 +-
 FabricTestExample/src/Test654.js              |  29 ++--
 FabricTestExample/src/Test658.js              |  14 +-
 FabricTestExample/src/Test662.tsx             |  47 +++---
 FabricTestExample/src/Test691.js              |  50 +++---
 FabricTestExample/src/Test702.js              |  25 ++-
 FabricTestExample/src/Test706.js              |  16 +-
 FabricTestExample/src/Test713.js              | 125 +++++++++-----
 FabricTestExample/src/Test726.js              |  15 +-
 FabricTestExample/src/Test748.tsx             |  37 +++-
 FabricTestExample/src/Test750.js              |   6 +-
 FabricTestExample/src/Test758.tsx             |  17 +-
 FabricTestExample/src/Test761.tsx             |  52 +++---
 FabricTestExample/src/Test779.tsx             |  57 +++++--
 FabricTestExample/src/Test780.tsx             |   4 +-
 FabricTestExample/src/Test791.tsx             |  84 +++++-----
 FabricTestExample/src/Test800.tsx             |  18 +-
 FabricTestExample/src/Test817.tsx             |  32 ++--
 FabricTestExample/src/Test830.tsx             |  11 +-
 FabricTestExample/src/Test831.tsx             |  37 ++--
 FabricTestExample/src/Test844.tsx             |  12 +-
 FabricTestExample/src/Test852.tsx             |  16 +-
 FabricTestExample/src/Test860.tsx             |  17 +-
 FabricTestExample/src/Test861.tsx             |  10 +-
 FabricTestExample/src/Test865.tsx             |  18 +-
 FabricTestExample/src/Test881.tsx             |  14 +-
 FabricTestExample/src/Test887.tsx             |  28 ++--
 FabricTestExample/src/Test898.tsx             |  38 ++---
 FabricTestExample/src/Test913.tsx             |  31 ++--
 FabricTestExample/src/Test999.tsx             |  29 +++-
 FabricTestExample/src/TestFreeze.tsx          |  16 +-
 TestsExample/.eslintrc.js                     |   8 +
 TestsExample/.prettierrc.js                   |   2 +-
 TestsExample/App.js                           |   2 +-
 TestsExample/__tests__/App.test.tsx           |   2 +-
 TestsExample/index.js                         |   4 +-
 TestsExample/metro.config.js                  |   3 +-
 TestsExample/src/Test1017.tsx                 |  25 +--
 TestsExample/src/Test1031.tsx                 |  42 +++--
 TestsExample/src/Test1032.tsx                 |  17 +-
 TestsExample/src/Test1036.tsx                 |  10 +-
 TestsExample/src/Test1072.tsx                 |   4 +-
 TestsExample/src/Test1084.tsx                 |  20 ++-
 TestsExample/src/Test1091.tsx                 |  10 +-
 TestsExample/src/Test1096.tsx                 |  11 +-
 TestsExample/src/Test1097.tsx                 |  34 ++--
 TestsExample/src/Test111.js                   |  12 +-
 TestsExample/src/Test1153.tsx                 |  13 +-
 TestsExample/src/Test1157.tsx                 |  18 +-
 TestsExample/src/Test1162.tsx                 |  25 +--
 .../Test1166/AndroidDifferentScreenSearch.tsx |  18 +-
 .../AndroidSearchBarCustomization.tsx         |   6 +-
 .../src/Test1166/AndroidSearchBarEvents.tsx   |  18 +-
 .../src/Test1166/AndroidSearchTypes.tsx       |  18 +-
 TestsExample/src/Test1166/index.tsx           |  14 +-
 TestsExample/src/Test1188.tsx                 |   8 +-
 TestsExample/src/Test1190.tsx                 |  46 +++--
 TestsExample/src/Test1198.tsx                 |  10 +-
 TestsExample/src/Test1204.tsx                 |   8 +-
 TestsExample/src/Test1209.tsx                 |  18 +-
 TestsExample/src/Test1213.tsx                 |   8 +-
 TestsExample/src/Test1214.tsx                 |  47 ++++--
 TestsExample/src/Test1227.tsx                 |  14 +-
 TestsExample/src/Test1228.tsx                 |  15 +-
 TestsExample/src/Test1259.tsx                 |   4 +-
 TestsExample/src/Test1260.tsx                 |  43 +++--
 TestsExample/src/Test1296.tsx                 |  29 ++--
 TestsExample/src/Test1299.tsx                 |  18 +-
 TestsExample/src/Test1391.tsx                 |  30 ++--
 TestsExample/src/Test1419.tsx                 |  72 ++++----
 TestsExample/src/Test1473.tsx                 |  29 ++--
 TestsExample/src/Test1476.tsx                 | 115 +++++++------
 TestsExample/src/Test1509.tsx                 |   6 +-
 TestsExample/src/Test1539.tsx                 |   8 +-
 TestsExample/src/Test1646.tsx                 |  12 +-
 TestsExample/src/Test1649.tsx                 | 157 +++++++++--------
 TestsExample/src/Test1683.tsx                 |  12 +-
 TestsExample/src/Test1726.tsx                 |  20 +--
 TestsExample/src/Test1791.tsx                 |  22 +--
 TestsExample/src/Test263.js                   |  24 +--
 TestsExample/src/Test349.js                   |  28 ++--
 TestsExample/src/Test364.js                   |   7 +-
 TestsExample/src/Test42.tsx                   |  43 +++--
 TestsExample/src/Test528.js                   |  27 +--
 TestsExample/src/Test550.js                   |  10 +-
 TestsExample/src/Test556.js                   |  26 +--
 TestsExample/src/Test564.js                   |  16 +-
 TestsExample/src/Test577.js                   |   6 +-
 TestsExample/src/Test593.tsx                  |  68 ++++----
 TestsExample/src/Test619.js                   |  92 ++++++----
 TestsExample/src/Test624.js                   |  16 +-
 TestsExample/src/Test640.js                   |  35 ++--
 TestsExample/src/Test642.tsx                  |  24 +--
 TestsExample/src/Test645.js                   |  41 +++--
 TestsExample/src/Test648.js                   |  11 +-
 TestsExample/src/Test649.js                   |  18 +-
 TestsExample/src/Test654.js                   |  29 ++--
 TestsExample/src/Test658.js                   |  14 +-
 TestsExample/src/Test662.tsx                  |  47 +++---
 TestsExample/src/Test691.js                   |  50 +++---
 TestsExample/src/Test702.js                   |  25 ++-
 TestsExample/src/Test706.js                   |  16 +-
 TestsExample/src/Test713.js                   | 125 +++++++++-----
 TestsExample/src/Test726.js                   |  15 +-
 TestsExample/src/Test748.tsx                  |  37 +++-
 TestsExample/src/Test750.js                   |   6 +-
 TestsExample/src/Test758.tsx                  |  17 +-
 TestsExample/src/Test761.tsx                  |  52 +++---
 TestsExample/src/Test779.tsx                  |  57 +++++--
 TestsExample/src/Test780.tsx                  |  52 +++---
 TestsExample/src/Test791.tsx                  |  84 +++++-----
 TestsExample/src/Test800.tsx                  |  17 +-
 TestsExample/src/Test817.tsx                  |  31 ++--
 TestsExample/src/Test830.tsx                  |  11 +-
 TestsExample/src/Test831.tsx                  |  37 ++--
 TestsExample/src/Test844.tsx                  |  12 +-
 TestsExample/src/Test852.tsx                  |  16 +-
 TestsExample/src/Test860.tsx                  |  96 +++++++----
 TestsExample/src/Test861.tsx                  |  10 +-
 TestsExample/src/Test865.tsx                  |  18 +-
 TestsExample/src/Test881.tsx                  |  14 +-
 TestsExample/src/Test887.tsx                  |  28 ++--
 TestsExample/src/Test898.tsx                  |  39 ++---
 TestsExample/src/Test913.tsx                  |  31 ++--
 TestsExample/src/Test999.tsx                  |  29 +++-
 TestsExample/src/TestFreeze.tsx               |  16 +-
 TestsExample/tsconfig.json                    |   2 +-
 188 files changed, 2844 insertions(+), 2212 deletions(-)

diff --git a/FabricTestExample/.eslintrc.js b/FabricTestExample/.eslintrc.js
index 187894b6af..cfc90f7103 100644
--- a/FabricTestExample/.eslintrc.js
+++ b/FabricTestExample/.eslintrc.js
@@ -1,4 +1,12 @@
 module.exports = {
   root: true,
   extends: '@react-native',
+  overrides: [
+    {
+      files: ['*.tsx', '*.js'],
+      rules: {
+        'react-native/no-inline-styles': 'off',
+      },
+    },
+  ],
 };
diff --git a/FabricTestExample/.prettierrc.js b/FabricTestExample/.prettierrc.js
index 2b540746a7..2ae7b381ed 100644
--- a/FabricTestExample/.prettierrc.js
+++ b/FabricTestExample/.prettierrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   arrowParens: 'avoid',
   bracketSameLine: true,
-  bracketSpacing: false,
+  bracketSpacing: true,
   singleQuote: true,
   trailingComma: 'all',
 };
diff --git a/FabricTestExample/App.js b/FabricTestExample/App.js
index 26fdc433b3..6c272a5fa9 100644
--- a/FabricTestExample/App.js
+++ b/FabricTestExample/App.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 
-import {enableFreeze} from 'react-native-screens';
+import { enableFreeze } from 'react-native-screens';
 
 import Test42 from './src/Test42';
 import Test111 from './src/Test111';
diff --git a/FabricTestExample/index.js b/FabricTestExample/index.js
index a850d031de..9b73932914 100644
--- a/FabricTestExample/index.js
+++ b/FabricTestExample/index.js
@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/FabricTestExample/metro.config.js b/FabricTestExample/metro.config.js
index 048f7b12bf..7825403986 100644
--- a/FabricTestExample/metro.config.js
+++ b/FabricTestExample/metro.config.js
@@ -24,8 +24,7 @@ module.exports = {
   resolver: {
     blacklistRE: exclusionList(
       modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
+        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
       ),
     ),
 
diff --git a/FabricTestExample/src/Test1017.tsx b/FabricTestExample/src/Test1017.tsx
index f297170fe4..486aac64dc 100644
--- a/FabricTestExample/src/Test1017.tsx
+++ b/FabricTestExample/src/Test1017.tsx
@@ -1,13 +1,13 @@
-import {NavigationContainer, RouteProp} from '@react-navigation/native';
+import { NavigationContainer, RouteProp } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackNavigationProp,
   TransitionPresets,
 } from '@react-navigation/stack';
 import React from 'react';
-import {Alert, LogBox} from 'react-native';
-import {StyleSheet, Text, View, FlatList, Pressable} from 'react-native';
-import {ScrollView} from 'react-native-gesture-handler';
+import { Alert, LogBox } from 'react-native';
+import { StyleSheet, Text, View, FlatList, Pressable } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   Header,
@@ -36,7 +36,7 @@ LogBox.ignoreLogs([
 
 const Stack = createStackNavigator();
 
-const dataset = Array.from<unknown, DataItem>({length: 100}, (_, i) => ({
+const dataset = Array.from<unknown, DataItem>({ length: 100 }, (_, i) => ({
   title: `Title ${i}`,
   value: i,
 }));
@@ -44,7 +44,7 @@ const dataset = Array.from<unknown, DataItem>({length: 100}, (_, i) => ({
 const Screen: React.FC<{
   route: RouteProp<RootStackParamList, any>;
   navigation: StackNavigationProp<RootStackParamList, any>;
-}> = ({route, navigation}) => {
+}> = ({ route, navigation }) => {
   for (let i = 0; i < 10 ** 3; i++) {}
   const isSecondScreen = route.name === Route.SecondScreen;
 
@@ -58,7 +58,7 @@ const Screen: React.FC<{
 
   const renderItem = (item: DataItem) => (
     <Pressable
-      android_ripple={{color: Colors.light}}
+      android_ripple={{ color: Colors.light }}
       style={styles.listItemContainer}
       onPress={handleItemPress(item)}>
       <View style={styles.listItemContentWrapper}>
@@ -75,8 +75,8 @@ const Screen: React.FC<{
     <ScrollView>
       <FlatList
         data={dataset}
-        keyExtractor={(item) => item.value.toString()}
-        renderItem={({item}) => renderItem(item)}
+        keyExtractor={item => item.value.toString()}
+        renderItem={({ item }) => renderItem(item)}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
         ListHeaderComponent={!isSecondScreen && Header}
         ListHeaderComponentStyle={styles.headerWrapper}
@@ -91,16 +91,17 @@ const Screen: React.FC<{
 const App: React.FC = () => {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{...TransitionPresets.SlideFromRightIOS}}>
+      <Stack.Navigator
+        screenOptions={{ ...TransitionPresets.SlideFromRightIOS }}>
         <Stack.Screen
           name={Route.FirstScreen}
           component={Screen}
-          options={{title: 'Sample List'}}
+          options={{ title: 'Sample List' }}
         />
         <Stack.Screen
           name={Route.SecondScreen}
           component={Screen}
-          options={{title: 'Sample List 2'}}
+          options={{ title: 'Sample List 2' }}
         />
       </Stack.Navigator>
     </NavigationContainer>
diff --git a/FabricTestExample/src/Test1031.tsx b/FabricTestExample/src/Test1031.tsx
index 74a874dfc0..cb9e7c3a8d 100644
--- a/FabricTestExample/src/Test1031.tsx
+++ b/FabricTestExample/src/Test1031.tsx
@@ -1,36 +1,50 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp, useHeaderHeight} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+  useHeaderHeight,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{stackPresentation: 'formSheet', headerShown: false}}>
+      <Stack.Navigator
+        screenOptions={{ stackPresentation: 'formSheet', headerShown: false }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   console.log(useHeaderHeight());
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
-
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.navigate('Second')}
+    />
   );
 }
 
-function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Second({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   console.log(useHeaderHeight());
   return (
-    <Button title="Tap me for first screen" onPress={() => navigation.navigate('First')} />
+    <Button
+      title="Tap me for first screen"
+      onPress={() => navigation.navigate('First')}
+    />
   );
 }
-
diff --git a/FabricTestExample/src/Test1032.tsx b/FabricTestExample/src/Test1032.tsx
index a944804072..6165453001 100644
--- a/FabricTestExample/src/Test1032.tsx
+++ b/FabricTestExample/src/Test1032.tsx
@@ -1,6 +1,7 @@
+/* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
-import {Alert, Button, Switch, Text, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Alert, Button, Switch, Text, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -11,9 +12,9 @@ const Stack = createNativeStackNavigator();
 export default function App() {
   const [gestureEnabled, setGestureEnable] = React.useState(false);
   return (
-    <View style={{flex: 1, paddingBottom: 200}}>
+    <View style={{ flex: 1, paddingBottom: 200 }}>
       <NavigationContainer>
-        <Stack.Navigator screenOptions={{gestureEnabled}}>
+        <Stack.Navigator screenOptions={{ gestureEnabled }}>
           <Stack.Screen name="Top" component={First} />
           <Stack.Screen name="Top1" component={Second} />
         </Stack.Navigator>
@@ -32,7 +33,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{backgroundColor: '#FFF'}}>
+    <View style={{ backgroundColor: '#FFF' }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.push('Top1')}
@@ -43,8 +44,11 @@ function First({
 
 function Second() {
   return (
-    <View style={{backgroundColor: '#FFF'}}>
-      <Button title="Swipe back to see if button click triggers" onPress={() => Alert.alert('Click detected')} />
+    <View style={{ backgroundColor: '#FFF' }}>
+      <Button
+        title="Swipe back to see if button click triggers"
+        onPress={() => Alert.alert('Click detected')}
+      />
     </View>
   );
 }
diff --git a/FabricTestExample/src/Test1036.tsx b/FabricTestExample/src/Test1036.tsx
index 9eebd8841f..c9bc584776 100644
--- a/FabricTestExample/src/Test1036.tsx
+++ b/FabricTestExample/src/Test1036.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -16,9 +16,9 @@ const App = () => {
         screenOptions={{
           headerTitle: 'Title',
           searchBar: {
-            onCancelButtonPress: ()=>{
-              console.log('cancel button press')
-            }
+            onCancelButtonPress: () => {
+              console.log('cancel button press');
+            },
           },
         }}>
         <Stack.Screen name="Screen" component={Screen} />
diff --git a/FabricTestExample/src/Test1072.tsx b/FabricTestExample/src/Test1072.tsx
index e46b3cf173..c11a8d1ebe 100644
--- a/FabricTestExample/src/Test1072.tsx
+++ b/FabricTestExample/src/Test1072.tsx
@@ -1,6 +1,6 @@
-import React, {useState} from 'react';
-import {Dimensions, Image, StyleSheet, Text, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React, { useState } from 'react';
+import { Dimensions, Image, StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -41,7 +41,7 @@ function Second() {
 
 export default function App() {
   return (
-    <GestureHandlerRootView style={{flex: 1}}>
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <NavigationContainer>
         <Stack.Navigator
           screenOptions={{
@@ -59,12 +59,12 @@ export default function App() {
 
 // components
 
-function Post({onPress}: {onPress?: () => void}) {
+function Post({ onPress }: { onPress?: () => void }) {
   const [width] = useState(Math.round(Dimensions.get('screen').width));
 
   return (
     <TapGestureHandler
-      onHandlerStateChange={(e) =>
+      onHandlerStateChange={e =>
         e.nativeEvent.oldState === State.ACTIVE && onPress?.()
       }>
       <View style={styles.post}>
@@ -83,11 +83,11 @@ function generatePhotos(
   height: number,
 ): JSX.Element[] {
   const startFrom = Math.floor(Math.random() * 20) + 10;
-  return Array.from({length: amount}, (_, index) => {
+  return Array.from({ length: amount }, (_, index) => {
     const uri = `https://picsum.photos/id/${
       startFrom + index
     }/${width}/${height}`;
-    return <Image style={{width, height}} key={uri} source={{uri}} />;
+    return <Image style={{ width, height }} key={uri} source={{ uri }} />;
   });
 }
 
diff --git a/FabricTestExample/src/Test1084.tsx b/FabricTestExample/src/Test1084.tsx
index b0914c303c..00bdf968e5 100644
--- a/FabricTestExample/src/Test1084.tsx
+++ b/FabricTestExample/src/Test1084.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -13,7 +16,7 @@ export default function App() {
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{customAnimationOnSwipe: true, stackAnimation: 'fade'}}
+          options={{ customAnimationOnSwipe: true, stackAnimation: 'fade' }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -26,7 +29,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'red'}}>
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.navigate('Second')}
@@ -41,8 +44,11 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'yellow'}}>
-      <Button title="Tap me for first screen" onPress={() => navigation.goBack()} />
+    <View style={{ flex: 1, backgroundColor: 'yellow' }}>
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.goBack()}
+      />
     </View>
   );
 }
diff --git a/FabricTestExample/src/Test1091.tsx b/FabricTestExample/src/Test1091.tsx
index 2b1a116559..a0d95f7ed5 100644
--- a/FabricTestExample/src/Test1091.tsx
+++ b/FabricTestExample/src/Test1091.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Button, View, Text} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { Button, View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 
 // swipe gesture works when using react-native-screens/native-stack
 import {
@@ -23,15 +23,15 @@ type StackParams = {
 const Stack = createNativeStackNavigator<StackParams>();
 
 const Screen2 = () => (
-  <View style={{paddingTop: 200}}>
+  <View style={{ paddingTop: 200 }}>
     <Text>
       Swipe gesture doesn't work on iOS 12 in @react-navigation/native-stack
     </Text>
   </View>
 );
 
-const Screen = ({navigation}: NativeStackScreenProps<StackParams>) => (
-  <View style={{paddingTop: 200}}>
+const Screen = ({ navigation }: NativeStackScreenProps<StackParams>) => (
+  <View style={{ paddingTop: 200 }}>
     <Button
       title="Go to Screen2"
       onPress={() => navigation.navigate('Screen2')}
diff --git a/FabricTestExample/src/Test1096.tsx b/FabricTestExample/src/Test1096.tsx
index 6e6bb1753e..c0ffb6a4f3 100644
--- a/FabricTestExample/src/Test1096.tsx
+++ b/FabricTestExample/src/Test1096.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
 
 import { Button, StyleSheet, View, Modal } from 'react-native';
-import {FullWindowOverlay} from 'react-native-screens';
+import { FullWindowOverlay } from 'react-native-screens';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -25,8 +26,7 @@ function Home({
       <Modal
         animationType="slide"
         visible={isShowModal}
-        presentationStyle="pageSheet"
-      >
+        presentationStyle="pageSheet">
         <View style={styles.container}>
           <Button
             title="dismiss rn modal"
@@ -34,7 +34,13 @@ function Home({
           />
         </View>
       </Modal>
-      <FullWindowOverlay style={{position: 'absolute', width: '100%', height: '100%', justifyContent: 'center'}}>
+      <FullWindowOverlay
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          justifyContent: 'center',
+        }}>
         <View style={styles.box} />
         <Button title="click me" onPress={() => console.warn('clicked')} />
       </FullWindowOverlay>
diff --git a/FabricTestExample/src/Test1097.tsx b/FabricTestExample/src/Test1097.tsx
index 8c5a737932..640ccde74d 100644
--- a/FabricTestExample/src/Test1097.tsx
+++ b/FabricTestExample/src/Test1097.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import * as React from 'react';
-import {Button, NativeSyntheticEvent, ScrollView} from 'react-native';
+import { Button, NativeSyntheticEvent, ScrollView } from 'react-native';
 import {
   NavigationContainer,
   NavigationProp,
@@ -10,7 +10,7 @@ import {
   createNativeStackNavigator,
   NativeStackScreenProps,
 } from 'react-native-screens/native-stack';
-import {SearchBarProps, SearchBarCommands} from 'react-native-screens';
+import { SearchBarProps, SearchBarCommands } from 'react-native-screens';
 
 const AppStack = createNativeStackNavigator();
 
@@ -30,7 +30,7 @@ export default function App(): JSX.Element {
   );
 }
 
-function First({navigation}: NativeStackScreenProps<ParamListBase>) {
+function First({ navigation }: NativeStackScreenProps<ParamListBase>) {
   const searchBarRef = React.useRef<SearchBarCommands>();
 
   React.useEffect(() => {
@@ -50,7 +50,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
     hideNavigationBar: false,
     autoCapitalize: 'sentences',
     placeholder: 'Some text',
-    onChangeText: (e: NativeSyntheticEvent<{text: string}>) =>
+    onChangeText: (e: NativeSyntheticEvent<{ text: string }>) =>
       setSearch(e.nativeEvent.text),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),
     onSearchButtonPress: () => console.warn('Search button pressed'),
@@ -91,10 +91,8 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
         onPress={() => searchBarRef.current?.focus()}
       />
       {items
-        .filter(
-          (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1,
-        )
-        .map((item) => (
+        .filter(item => item.toLowerCase().indexOf(search.toLowerCase()) !== -1)
+        .map(item => (
           <Button
             title={item}
             key={item}
@@ -119,7 +117,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
   );
 }
 
-function Second({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function Second({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
   return (
     <ScrollView contentInsetAdjustmentBehavior="automatic">
       <Button
@@ -134,7 +132,7 @@ function Second({navigation}: {navigation: NavigationProp<ParamListBase>}) {
   );
 }
 
-function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function Third({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
   const searchBarRef = React.useRef<SearchBarCommands>();
 
   const searchBarProps: SearchBarProps = {
@@ -146,7 +144,7 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
     hideNavigationBar: false,
     autoCapitalize: 'sentences',
     placeholder: 'Some text',
-    onChangeText: (e: NativeSyntheticEvent<{text: string}>) =>
+    onChangeText: (e: NativeSyntheticEvent<{ text: string }>) =>
       console.warn(`Text changed to ${e.nativeEvent.text}`),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),
     onSearchButtonPress: () => console.warn('Search button pressed'),
diff --git a/FabricTestExample/src/Test111.js b/FabricTestExample/src/Test111.js
index 0beaf85d35..0ed234036b 100644
--- a/FabricTestExample/src/Test111.js
+++ b/FabricTestExample/src/Test111.js
@@ -1,8 +1,11 @@
 import React from 'react';
-import {View, Text, Button} from 'react-native';
+import { View, Text, Button } from 'react-native';
 
-import {NavigationContainer, useNavigation} from '@react-navigation/native';
-import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from '@react-navigation/stack';
 
 const Screen2 = () => {
   const navigation = useNavigation();
@@ -35,7 +38,8 @@ const Screen1 = () => {
       }}>
       <Button
         title="Go to Screen 2"
-        onPress={() => navigation.navigate('Screen2')} />
+        onPress={() => navigation.navigate('Screen2')}
+      />
     </View>
   );
 };
diff --git a/FabricTestExample/src/Test1153.tsx b/FabricTestExample/src/Test1153.tsx
index 478bf1eec3..442ed0e47c 100644
--- a/FabricTestExample/src/Test1153.tsx
+++ b/FabricTestExample/src/Test1153.tsx
@@ -1,20 +1,20 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {SafeAreaView} from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { ScrollView } from 'react-native-gesture-handler';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <View style={{flex: 1}}>
+    <View style={{ flex: 1 }}>
       <NavigationContainer>
-        <Stack.Navigator screenOptions={{gestureEnabled: true}}>
+        <Stack.Navigator screenOptions={{ gestureEnabled: true }}>
           <Stack.Screen
             name="First"
             component={First}
@@ -71,7 +71,8 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{backgroundColor: '#777', flex: 1, justifyContent: 'center'}}>
+    <View
+      style={{ backgroundColor: '#777', flex: 1, justifyContent: 'center' }}>
       <Button
         title="Tap me to go back"
         onPress={() => {
diff --git a/FabricTestExample/src/Test1157.tsx b/FabricTestExample/src/Test1157.tsx
index 03cd8be4ac..cb69a08fe1 100644
--- a/FabricTestExample/src/Test1157.tsx
+++ b/FabricTestExample/src/Test1157.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
-import {Button, View, TouchableOpacity} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View, TouchableOpacity } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -14,7 +14,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'red'}}>
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.navigate('Second')}
@@ -29,7 +29,7 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'yellow'}}>
+    <View style={{ flex: 1, backgroundColor: 'yellow' }}>
       <Button
         title="Tap me for first screen"
         onPress={() => navigation.goBack()}
@@ -45,11 +45,13 @@ function ButtonWithBiggerChild(props: {
   onClickText?: string | undefined;
   backgroundColor?: string | undefined;
 }): JSX.Element {
-  const {onClickText = 'Hello there General Kenobi', backgroundColor = 'red'} =
-    props;
+  const {
+    onClickText = 'Hello there General Kenobi',
+    backgroundColor = 'red',
+  } = props;
   return (
     <TouchableOpacity
-      style={{width: 30, height: 30, backgroundColor: 'red'}}
+      style={{ width: 30, height: 30, backgroundColor: 'red' }}
       onPress={() => console.log(onClickText)}>
       <View
         style={{
@@ -66,7 +68,7 @@ function ButtonWithBiggerChild(props: {
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{stackPresentation: 'modal'}}>
+      <Stack.Navigator screenOptions={{ stackPresentation: 'modal' }}>
         <Stack.Screen
           name="First"
           component={First}
diff --git a/FabricTestExample/src/Test1162.tsx b/FabricTestExample/src/Test1162.tsx
index 450b4d7001..3b53f6ea8e 100644
--- a/FabricTestExample/src/Test1162.tsx
+++ b/FabricTestExample/src/Test1162.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {Button, View} from 'react-native';
+import { Button, View } from 'react-native';
 import {
   NavigationContainer,
   ParamListBase,
@@ -10,7 +11,7 @@ import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 function isTranslucent(route: Route<string>) {
   const routeName = getFocusedRouteNameFromRoute(route) ?? 'Screen1';
@@ -43,15 +44,15 @@ export default function App() {
         <Stack.Screen
           name="Tab"
           component={TabNavigator}
-          options={({route}) => ({
-            headerStyle: {backgroundColor: 'transparent'},
+          options={({ route }) => ({
+            headerStyle: { backgroundColor: 'transparent' },
             headerTranslucent: isTranslucent(route),
           })}
         />
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{headerStyle: {backgroundColor: 'transparent'}}}
+          options={{ headerStyle: { backgroundColor: 'transparent' } }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -64,7 +65,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{backgroundColor: '#FFF', flex: 1}}>
+    <View style={{ backgroundColor: '#FFF', flex: 1 }}>
       <Button
         title="Tap me for tab navigator"
         onPress={() => navigation.navigate('Tab')}
@@ -79,8 +80,8 @@ function First({
 
 function TabScreen() {
   return (
-    <View style={{backgroundColor: '#CCC', flex: 1, paddingTop: 200}}>
-      <View style={{backgroundColor: '#EEE', flex: 1}}></View>
+    <View style={{ backgroundColor: '#CCC', flex: 1, paddingTop: 200 }}>
+      <View style={{ backgroundColor: '#EEE', flex: 1 }}></View>
     </View>
   );
 }
@@ -93,15 +94,15 @@ function Second({
   const [isTranslucent, setIsTranslucent] = React.useState(false);
 
   React.useEffect(() => {
-    navigation.setOptions({headerTranslucent: isTranslucent});
+    navigation.setOptions({ headerTranslucent: isTranslucent });
   }, [isTranslucent]);
 
   return (
-    <View style={{backgroundColor: '#DDD', flex: 1, paddingTop: 200}}>
-      <View style={{backgroundColor: '#333', flex: 1}}>
+    <View style={{ backgroundColor: '#DDD', flex: 1, paddingTop: 200 }}>
+      <View style={{ backgroundColor: '#333', flex: 1 }}>
         <Button
           title="Change translucent"
-          onPress={() => setIsTranslucent((prev) => !prev)}
+          onPress={() => setIsTranslucent(prev => !prev)}
         />
       </View>
     </View>
diff --git a/FabricTestExample/src/Test1166/AndroidDifferentScreenSearch.tsx b/FabricTestExample/src/Test1166/AndroidDifferentScreenSearch.tsx
index b741b5aaf5..d3c9a61ff7 100644
--- a/FabricTestExample/src/Test1166/AndroidDifferentScreenSearch.tsx
+++ b/FabricTestExample/src/Test1166/AndroidDifferentScreenSearch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, Image, Text, TouchableOpacity, View} from 'react-native';
-import {ParamListBase} from '@react-navigation/native';
+import { Button, Image, Text, TouchableOpacity, View } from 'react-native';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -10,14 +10,14 @@ const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <Stack.Navigator screenOptions={{stackAnimation: 'none'}}>
+    <Stack.Navigator screenOptions={{ stackAnimation: 'none' }}>
       <Stack.Screen name="First" component={First} />
-      <Stack.Screen name="Search" component={Second} options={{title: ''}} />
+      <Stack.Screen name="Search" component={Second} options={{ title: '' }} />
     </Stack.Navigator>
   );
 }
 
-function SearchIconButton(props: {onPress: () => void}) {
+function SearchIconButton(props: { onPress: () => void }) {
   return (
     <TouchableOpacity onPress={props.onPress}>
       <Image source={require('../../assets/search_black.png')} />
@@ -41,7 +41,7 @@ function First({
     });
   }, [navigation]);
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF'}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF' }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
     </View>
   );
@@ -61,7 +61,7 @@ function Second({
         autoCapitalize: 'none',
         autoFocus: true,
         onClose: () => navigation.navigate('First'),
-        onChangeText: (e) => setText(e.nativeEvent.text),
+        onChangeText: e => setText(e.nativeEvent.text),
         barTintColor: text,
       },
       stackAnimation: 'none',
@@ -69,8 +69,8 @@ function Second({
   }, [navigation, text]);
 
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
-      <Text style={{fontSize: 24, fontWeight: '600', marginBottom: 12}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 12 }}>
+      <Text style={{ fontSize: 24, fontWeight: '600', marginBottom: 12 }}>
         Search Results
       </Text>
       <Text>{text}</Text>
diff --git a/FabricTestExample/src/Test1166/AndroidSearchBarCustomization.tsx b/FabricTestExample/src/Test1166/AndroidSearchBarCustomization.tsx
index 1700051af7..eaf443d2ad 100644
--- a/FabricTestExample/src/Test1166/AndroidSearchBarCustomization.tsx
+++ b/FabricTestExample/src/Test1166/AndroidSearchBarCustomization.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -33,7 +33,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF'}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF' }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
     </View>
   );
diff --git a/FabricTestExample/src/Test1166/AndroidSearchBarEvents.tsx b/FabricTestExample/src/Test1166/AndroidSearchBarEvents.tsx
index f90c55e376..6019e84551 100644
--- a/FabricTestExample/src/Test1166/AndroidSearchBarEvents.tsx
+++ b/FabricTestExample/src/Test1166/AndroidSearchBarEvents.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import {Button, Text, View} from 'react-native';
-import {ParamListBase} from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {SearchBarProps} from 'react-native-screens';
+import { SearchBarProps } from 'react-native-screens';
 
 const Stack = createNativeStackNavigator();
 
@@ -25,11 +25,11 @@ function First({
   const [events, setEvents] = React.useState<string[]>([]);
   React.useLayoutEffect(() => {
     const searchBar: SearchBarProps = {
-      onSearchButtonPress: () => setEvents((prev) => [...prev, 'Search']),
-      onBlur: () => setEvents((prev) => [...prev, 'Blur']),
-      onClose: () => setEvents((prev) => [...prev, 'Close']),
-      onOpen: () => setEvents((prev) => [...prev, 'Open']),
-      onFocus: () => setEvents((prev) => [...prev, 'Focus']),
+      onSearchButtonPress: () => setEvents(prev => [...prev, 'Search']),
+      onBlur: () => setEvents(prev => [...prev, 'Blur']),
+      onClose: () => setEvents(prev => [...prev, 'Close']),
+      onOpen: () => setEvents(prev => [...prev, 'Open']),
+      onFocus: () => setEvents(prev => [...prev, 'Focus']),
     };
     navigation.setOptions({
       searchBar: searchBar,
@@ -37,7 +37,7 @@ function First({
   }, [navigation]);
 
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 12 }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
       {events.map((event, i) => (
         <Text key={i}>{event}</Text>
diff --git a/FabricTestExample/src/Test1166/AndroidSearchTypes.tsx b/FabricTestExample/src/Test1166/AndroidSearchTypes.tsx
index 6a566b330c..73be6a6f94 100644
--- a/FabricTestExample/src/Test1166/AndroidSearchTypes.tsx
+++ b/FabricTestExample/src/Test1166/AndroidSearchTypes.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -10,22 +10,22 @@ const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <Stack.Navigator screenOptions={{stackAnimation: 'none'}}>
+    <Stack.Navigator screenOptions={{ stackAnimation: 'none' }}>
       <Stack.Screen name="First" component={First} />
       <Stack.Screen
         name="number"
         component={Second}
-        options={{searchBar: {autoFocus: true, inputType: 'number'}}}
+        options={{ searchBar: { autoFocus: true, inputType: 'number' } }}
       />
       <Stack.Screen
         name="email"
         component={Second}
-        options={{searchBar: {autoFocus: true, inputType: 'email'}}}
+        options={{ searchBar: { autoFocus: true, inputType: 'email' } }}
       />
       <Stack.Screen
         name="phone"
         component={Second}
-        options={{searchBar: {autoFocus: true, inputType: 'phone'}}}
+        options={{ searchBar: { autoFocus: true, inputType: 'phone' } }}
       />
     </Stack.Navigator>
   );
@@ -39,7 +39,7 @@ function First({
   React.useLayoutEffect(() => {
     function HeaderSearchButtons() {
       return (
-        <View style={{flexDirection: 'row'}}>
+        <View style={{ flexDirection: 'row' }}>
           <Button title="N" onPress={() => navigation.navigate('number')} />
           <Button title="E" onPress={() => navigation.navigate('email')} />
           <Button title="P" onPress={() => navigation.navigate('phone')} />
@@ -53,7 +53,7 @@ function First({
     });
   }, [navigation]);
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 12 }}>
       <Button title="Number" onPress={() => navigation.navigate('number')} />
       <Button title="Email" onPress={() => navigation.navigate('email')} />
       <Button title="Phone" onPress={() => navigation.navigate('phone')} />
@@ -68,7 +68,7 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 12 }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
     </View>
   );
diff --git a/FabricTestExample/src/Test1166/index.tsx b/FabricTestExample/src/Test1166/index.tsx
index 879172d433..ae0b73e52b 100644
--- a/FabricTestExample/src/Test1166/index.tsx
+++ b/FabricTestExample/src/Test1166/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -15,7 +15,7 @@ const Stack = createNativeStackNavigator();
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{headerShown: false}}>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
         <Stack.Screen name="Home" component={Home} />
         <Stack.Screen
           name="Customization"
@@ -45,25 +45,25 @@ function Home({
         justifyContent: 'center',
         padding: 12,
       }}>
-      <View style={{marginBottom: 12}}>
+      <View style={{ marginBottom: 12 }}>
         <Button
           title="Search bar customization"
           onPress={() => navigation.navigate('Customization')}
         />
       </View>
-      <View style={{marginBottom: 12}}>
+      <View style={{ marginBottom: 12 }}>
         <Button
           title="Search bar input types"
           onPress={() => navigation.navigate('InputTypes')}
         />
       </View>
-      <View style={{marginBottom: 12}}>
+      <View style={{ marginBottom: 12 }}>
         <Button
           title="Search bar events"
           onPress={() => navigation.navigate('Events')}
         />
       </View>
-      <View style={{marginBottom: 12}}>
+      <View style={{ marginBottom: 12 }}>
         <Button
           title="Search bar different search results screen"
           onPress={() => navigation.navigate('DifferentSearchScreen')}
diff --git a/FabricTestExample/src/Test1188.tsx b/FabricTestExample/src/Test1188.tsx
index c79fb5dc60..ebe011d829 100644
--- a/FabricTestExample/src/Test1188.tsx
+++ b/FabricTestExample/src/Test1188.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -12,7 +12,7 @@ const NestedStack = createNativeStackNavigator();
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{headerShown: false}}>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
         <Stack.Screen name="Home" component={Home} />
         <Stack.Screen name="Nested" component={Nested} />
       </Stack.Navigator>
@@ -26,7 +26,7 @@ function Home({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
+    <View style={{ flex: 1, justifyContent: 'center' }}>
       <Button
         title="Go to nested stack"
         onPress={() => navigation.navigate('Nested')}
diff --git a/FabricTestExample/src/Test1190.tsx b/FabricTestExample/src/Test1190.tsx
index b29ed56bfb..0d3ebffe6d 100644
--- a/FabricTestExample/src/Test1190.tsx
+++ b/FabricTestExample/src/Test1190.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const Stack = createNativeStackNavigator();
 
@@ -13,32 +16,51 @@ export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen name="First" component={First} options={{stackAnimation: 'none'}}/>
+        <Stack.Screen
+          name="First"
+          component={First}
+          options={{ stackAnimation: 'none' }}
+        />
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{stackAnimation: 'slide_from_bottom', replaceAnimation: 'push'}}
+          options={{
+            stackAnimation: 'slide_from_bottom',
+            replaceAnimation: 'push',
+          }}
         />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation} : Props) {
+function First({ navigation }: Props) {
   return (
     <>
-      <Button title="Tap me for push second screen" onPress={() => navigation.push('Second')} />
-      <Button title="Tap me for replace with second screen" onPress={() => navigation.replace('Second')} />
+      <Button
+        title="Tap me for push second screen"
+        onPress={() => navigation.push('Second')}
+      />
+      <Button
+        title="Tap me for replace with second screen"
+        onPress={() => navigation.replace('Second')}
+      />
       <Button title="Tap me for go back" onPress={() => navigation.goBack()} />
     </>
   );
 }
 
-function Second({navigation} : Props) {
+function Second({ navigation }: Props) {
   return (
     <>
-      <Button title="Tap me for push first screen" onPress={() => navigation.push('First')} />
-      <Button title="Tap me for replace with first screen" onPress={() => navigation.replace('First')} />
+      <Button
+        title="Tap me for push first screen"
+        onPress={() => navigation.push('First')}
+      />
+      <Button
+        title="Tap me for replace with first screen"
+        onPress={() => navigation.replace('First')}
+      />
       <Button title="Tap me for go back" onPress={() => navigation.goBack()} />
     </>
   );
diff --git a/FabricTestExample/src/Test1198.tsx b/FabricTestExample/src/Test1198.tsx
index f5284029eb..33ed867c6c 100644
--- a/FabricTestExample/src/Test1198.tsx
+++ b/FabricTestExample/src/Test1198.tsx
@@ -1,7 +1,7 @@
-import React, {useEffect} from 'react';
-import {NavigationContainer, useIsFocused} from '@react-navigation/native';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {Text, View} from 'react-native';
+import React, { useEffect } from 'react';
+import { NavigationContainer, useIsFocused } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text, View } from 'react-native';
 
 const BottomTabs = createBottomTabNavigator();
 
@@ -29,7 +29,7 @@ function Settings() {
     }
   }, [isFocused]);
 
-  console.log({isFocused});
+  console.log({ isFocused });
 
   return (
     <View
diff --git a/FabricTestExample/src/Test1204.tsx b/FabricTestExample/src/Test1204.tsx
index 6c01125ff8..5df5a1f586 100644
--- a/FabricTestExample/src/Test1204.tsx
+++ b/FabricTestExample/src/Test1204.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, Text, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -41,7 +41,7 @@ function Main({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
+    <View style={{ flex: 1, justifyContent: 'center' }}>
       <Text>Example text that could be read out by TalkBack</Text>
       <Button
         title="Open transparent modal"
@@ -76,7 +76,7 @@ function Details({
           justifyContent: 'space-around',
           backgroundColor: 'white',
         }}>
-        <Text style={{padding: 15}}>
+        <Text style={{ padding: 15 }}>
           Buttons beneath the modal shouldn&apos;t be picked up by Android
           TalkBack
         </Text>
diff --git a/FabricTestExample/src/Test1209.tsx b/FabricTestExample/src/Test1209.tsx
index 1af9a110bb..336510a11b 100644
--- a/FabricTestExample/src/Test1209.tsx
+++ b/FabricTestExample/src/Test1209.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import {View, Text, Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { View, Text, Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import {
   createStackNavigator,
   StackNavigationProp,
@@ -22,7 +23,7 @@ function Screen1({
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Text style={{color: 'white'}}>Screen 1</Text>
+      <Text style={{ color: 'white' }}>Screen 1</Text>
       <Button
         onPress={() => navigation.navigate('Screen2')}
         title="Go to Screen 2"
@@ -44,7 +45,7 @@ function Screen2({
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Text style={{color: 'white'}}>Screen 2</Text>
+      <Text style={{ color: 'white' }}>Screen 2</Text>
       <Button
         onPress={() => navigation.navigate('Screen3')}
         title="Go to Screen 3"
@@ -62,14 +63,14 @@ function Screen3() {
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Text style={{color: 'white'}}>Screen 3</Text>
+      <Text style={{ color: 'white' }}>Screen 3</Text>
     </View>
   );
 }
 
 function ScreenB() {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Screen B</Text>
     </View>
   );
@@ -90,13 +91,16 @@ function TabAStack() {
 export const maybePopToTop = (
   navigation: StackNavigationProp<ParamListBase>,
 ) => {
+  // @ts-ignore It does exist on v5
   const state = navigation.dangerouslyGetState().routes;
 
-  const stackWithState = state.filter((stack) => stack.state);
+  // @ts-ignore
+  const stackWithState = state.filter(stack => stack.state);
 
   if (
     stackWithState.length &&
-    stackWithState.some((route) => route.state?.index !== 0)
+    // @ts-ignore
+    stackWithState.some(route => route.state?.index !== 0)
   ) {
     navigation.popToTop();
   }
diff --git a/FabricTestExample/src/Test1213.tsx b/FabricTestExample/src/Test1213.tsx
index bd7e05277b..6b5fec5736 100644
--- a/FabricTestExample/src/Test1213.tsx
+++ b/FabricTestExample/src/Test1213.tsx
@@ -1,10 +1,10 @@
-import React, {useEffect} from 'react';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React, { useEffect } from 'react';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {Text} from 'react-native';
+import { Text } from 'react-native';
 
 const Stack = createNativeStackNavigator();
 const NStack = createNativeStackNavigator();
@@ -21,7 +21,7 @@ type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
 };
 
-const MainScreen = ({navigation}: Props): JSX.Element => {
+const MainScreen = ({ navigation }: Props): JSX.Element => {
   useEffect(() => {
     const unsubscribe = navigation.addListener('transitionStart', () => {
       console.log('1');
diff --git a/FabricTestExample/src/Test1214.tsx b/FabricTestExample/src/Test1214.tsx
index 74ba6a09af..c37a969577 100644
--- a/FabricTestExample/src/Test1214.tsx
+++ b/FabricTestExample/src/Test1214.tsx
@@ -1,20 +1,23 @@
 import React from 'react';
-import {Button, SafeAreaView, Text, TextInput, View} from 'react-native';
+import { Button, SafeAreaView, Text, TextInput, View } from 'react-native';
 
-import {createStackNavigator} from '@react-navigation/stack';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const NStack = createNativeStackNavigator();
 const Stack = createStackNavigator();
 
-const Home = ({navigation}: Props) => {
+const Home = ({ navigation }: Props) => {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
+    <View style={{ flex: 1, justifyContent: 'center' }}>
       <Button
         title="Go to details"
         onPress={() => {
@@ -26,25 +29,31 @@ const Home = ({navigation}: Props) => {
 
 const Details = () => {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput style={{backgroundColor: 'lime', height: 40}} autoFocus={true}></TextInput>
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <TextInput
+        style={{ backgroundColor: 'lime', height: 40 }}
+        autoFocus={true}></TextInput>
     </View>
   );
 };
 
 const App = () => {
   return (
-    <SafeAreaView style={{flex:1, backgroundColor: 'white'}}>
-      <Text style={{textAlign: 'center', fontSize: 20, color:'black'}}>JS Navigation</Text>
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+      <Text style={{ textAlign: 'center', fontSize: 20, color: 'black' }}>
+        JS Navigation
+      </Text>
       <NavigationContainer>
         <Stack.Navigator detachInactiveScreens={true}>
           <Stack.Screen component={Home} name="HOME"></Stack.Screen>
           <Stack.Screen component={Details} name="DETAILS"></Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
-      <Text style={{textAlign: 'center', fontSize: 20, color:'black'}}>Native Navigation</Text>
+      <Text style={{ textAlign: 'center', fontSize: 20, color: 'black' }}>
+        Native Navigation
+      </Text>
       <NavigationContainer>
-        <NStack.Navigator screenOptions={{stackAnimation: 'fade'}}>
+        <NStack.Navigator screenOptions={{ stackAnimation: 'fade' }}>
           <NStack.Screen component={Home} name="HOME"></NStack.Screen>
           <NStack.Screen component={Details} name="DETAILS"></NStack.Screen>
         </NStack.Navigator>
diff --git a/FabricTestExample/src/Test1227.tsx b/FabricTestExample/src/Test1227.tsx
index 98d74bff0b..4e21c9f9e6 100644
--- a/FabricTestExample/src/Test1227.tsx
+++ b/FabricTestExample/src/Test1227.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -16,12 +16,12 @@ export default function App() {
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{stackAnimation: 'slide_from_bottom'}}
+          options={{ stackAnimation: 'slide_from_bottom' }}
         />
         <Stack.Screen
           name="Third"
           component={Third}
-          options={{stackAnimation: 'fade_from_bottom'}}
+          options={{ stackAnimation: 'fade_from_bottom' }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -34,7 +34,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'red'}}>
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.navigate('Second')}
@@ -49,7 +49,7 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'yellow'}}>
+    <View style={{ flex: 1, backgroundColor: 'yellow' }}>
       <Button
         title="Tap me for third screen"
         onPress={() => navigation.navigate('Third')}
@@ -64,7 +64,7 @@ function Third({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'blue'}}>
+    <View style={{ flex: 1, backgroundColor: 'blue' }}>
       <Button
         title="Tap me for first screen"
         onPress={() => navigation.navigate('First')}
diff --git a/FabricTestExample/src/Test1228.tsx b/FabricTestExample/src/Test1228.tsx
index 298d44bb25..d22747353e 100644
--- a/FabricTestExample/src/Test1228.tsx
+++ b/FabricTestExample/src/Test1228.tsx
@@ -9,7 +9,6 @@ import {
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-
 export const FirstScreen = () => {
   const [theme, setTheme] = useState(false);
   const navigation = useNavigation<any>();
@@ -17,7 +16,7 @@ export const FirstScreen = () => {
   useEffect(() => {
     navigation.setOptions({
       headerTitle: theme ? 'red' : 'green',
-    })
+    });
   });
 
   return (
@@ -36,7 +35,7 @@ export const SecondScreen = () => {
   useEffect(() => {
     navigation.setOptions({
       headerTitle: theme ? 'red' : 'green',
-    })
+    });
   });
 
   return (
@@ -57,12 +56,14 @@ export default function App() {
 
   return (
     <SafeAreaProvider>
-      <NavigationContainer
-        theme={theme ? DarkTheme : DefaultTheme}
-      >
+      <NavigationContainer theme={theme ? DarkTheme : DefaultTheme}>
         <Stack.Navigator screenOptions={{ stackPresentation: 'modal' }}>
           <Stack.Screen name="screen1" component={FirstScreen} />
-          <Stack.Screen name="screen2" component={SecondScreen} options={{headerShown: false}}/>
+          <Stack.Screen
+            name="screen2"
+            component={SecondScreen}
+            options={{ headerShown: false }}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaProvider>
diff --git a/FabricTestExample/src/Test1259.tsx b/FabricTestExample/src/Test1259.tsx
index ff46b6ab06..6188c21a47 100644
--- a/FabricTestExample/src/Test1259.tsx
+++ b/FabricTestExample/src/Test1259.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
diff --git a/FabricTestExample/src/Test1260.tsx b/FabricTestExample/src/Test1260.tsx
index a7c5e85ccd..b674d79c11 100644
--- a/FabricTestExample/src/Test1260.tsx
+++ b/FabricTestExample/src/Test1260.tsx
@@ -1,39 +1,53 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{
-        swipeDirection: 'vertical',
-      }}>
+      <Stack.Navigator
+        screenOptions={{
+          swipeDirection: 'vertical',
+        }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
-    <View style={{flex: 1, backgroundColor: 'red'}}>
-      <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
     </View>
-
   );
 }
 
-function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Second({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
-    <View style={{flex: 1, backgroundColor: 'blue'}}>
-      <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
+    <View style={{ flex: 1, backgroundColor: 'blue' }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('First')}
+      />
     </View>
   );
 }
diff --git a/FabricTestExample/src/Test1296.tsx b/FabricTestExample/src/Test1296.tsx
index da8a9a19cc..c7f8389a61 100644
--- a/FabricTestExample/src/Test1296.tsx
+++ b/FabricTestExample/src/Test1296.tsx
@@ -37,13 +37,13 @@ function Second({
   const headerHeight = useHeaderHeight();
   useLayoutEffect(() => {
     navigation.setOptions({
-    gestureResponseDistance: {
-      start: 200,
-      end: 250,
-      top: headerHeight,
-      bottom: headerHeight + 50,
-    }
-  });
+      gestureResponseDistance: {
+        start: 200,
+        end: 250,
+        top: headerHeight,
+        bottom: headerHeight + 50,
+      },
+    });
   });
   return (
     <ScrollView>
@@ -51,7 +51,16 @@ function Second({
         Use swipe back gesture to go back (iOS only)
       </Text>
       <Post />
-    <View style={{position: 'absolute', backgroundColor: 'red', width: 50, height: 50, left: 200, top: 0}}/>
+      <View
+        style={{
+          position: 'absolute',
+          backgroundColor: 'red',
+          width: 50,
+          height: 50,
+          left: 200,
+          top: 0,
+        }}
+      />
     </ScrollView>
   );
 }
@@ -81,7 +90,7 @@ function Post({ onPress }: { onPress?: () => void }) {
 
   return (
     <TapGestureHandler
-      onHandlerStateChange={(e) =>
+      onHandlerStateChange={e =>
         e.nativeEvent.oldState === State.ACTIVE && onPress?.()
       }>
       <View style={styles.post}>
@@ -97,7 +106,7 @@ function Post({ onPress }: { onPress?: () => void }) {
 function generatePhotos(
   amount: number,
   width: number,
-  height: number
+  height: number,
 ): JSX.Element[] {
   const startFrom = Math.floor(Math.random() * 20) + 10;
   return Array.from({ length: amount }, (_, index) => {
diff --git a/FabricTestExample/src/Test1299.tsx b/FabricTestExample/src/Test1299.tsx
index 5104f4da86..e38b9d1866 100644
--- a/FabricTestExample/src/Test1299.tsx
+++ b/FabricTestExample/src/Test1299.tsx
@@ -17,12 +17,18 @@ export const MainScreen = React.memo(() => {
   return (
     <View
       style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Button title={'Open modal 1'} onPress={() => {
-        navigation.navigate('modalScreen-1')
-      }}/>
-      <Button title={'Open modal 2'} onPress={() => {
-        navigation.navigate('modalScreen-2')
-      }}/>
+      <Button
+        title={'Open modal 1'}
+        onPress={() => {
+          navigation.navigate('modalScreen-1');
+        }}
+      />
+      <Button
+        title={'Open modal 2'}
+        onPress={() => {
+          navigation.navigate('modalScreen-2');
+        }}
+      />
     </View>
   );
 });
diff --git a/FabricTestExample/src/Test1391.tsx b/FabricTestExample/src/Test1391.tsx
index 59182116a5..c660d44e3b 100644
--- a/FabricTestExample/src/Test1391.tsx
+++ b/FabricTestExample/src/Test1391.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { Button, Text, View } from "react-native";
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React from 'react';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import { SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 interface Props {
   navigation: NativeStackNavigationProp<ParamListBase>;
@@ -16,7 +16,10 @@ const Stack = createNativeStackNavigator();
 function Second(props: Props) {
   return (
     <View>
-      <Button title="Navigate to First" onPress={() => props.navigation.navigate('First')} />
+      <Button
+        title="Navigate to First"
+        onPress={() => props.navigation.navigate('First')}
+      />
     </View>
   );
 }
@@ -24,14 +27,17 @@ function Second(props: Props) {
 function First(props: Props) {
   return (
     <View>
-      <Button title="Navigate to Second" onPress={() => props.navigation.navigate('Second')} />
+      <Button
+        title="Navigate to Second"
+        onPress={() => props.navigation.navigate('Second')}
+      />
     </View>
   );
 }
 
 const App = (): JSX.Element => {
   return (
-    <SafeAreaView style={{flex:1, backgroundColor: 'white'}}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
       <NavigationContainer>
         <Stack.Navigator
           screenOptions={{
@@ -39,8 +45,7 @@ const App = (): JSX.Element => {
               backgroundColor: 'pink',
             },
           }}
-          initialRouteName="First"
-        >
+          initialRouteName="First">
           <Stack.Screen
             name="Second"
             component={Second}
@@ -50,10 +55,7 @@ const App = (): JSX.Element => {
               headerLeft: () => <View />,
             }}
           />
-          <Stack.Screen
-            name="First"
-            component={First}
-          />
+          <Stack.Screen name="First" component={First} />
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaView>
diff --git a/FabricTestExample/src/Test1419.tsx b/FabricTestExample/src/Test1419.tsx
index edbc598cd8..b8d7ba059b 100644
--- a/FabricTestExample/src/Test1419.tsx
+++ b/FabricTestExample/src/Test1419.tsx
@@ -1,15 +1,33 @@
 import React from 'react';
-import { View, Text, Button, KeyboardAvoidingView, Platform, TouchableWithoutFeedback, Keyboard, Image, TextInput } from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import {
+  View,
+  Text,
+  Button,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  Image,
+  TextInput,
+} from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
-function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
-    <View style={{
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
       <Text>First screen</Text>
       <Button
         title={'Navigate'}
@@ -22,21 +40,21 @@ function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBas
 function Second() {
   return (
     <KeyboardAvoidingView
-    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    style={{ flex: 1 }}
-    >
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        <View style={{
-          flex: 1,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
           <Image
             source={require('../assets/backButton.png')}
             style={{
               width: 150,
               height: 150,
-              marginBottom: 30
+              marginBottom: 30,
             }}
           />
           <TextInput
@@ -48,7 +66,7 @@ function Second() {
               paddingRight: 15,
               borderWidth: 1,
               borderRadius: 5,
-              borderColor: '#cccccc'
+              borderColor: '#cccccc',
             }}
           />
         </View>
@@ -62,16 +80,10 @@ const { Navigator, Screen } = createNativeStackNavigator();
 export default () => {
   return (
     <NavigationContainer>
-        <Navigator screenOptions={{hideKeyboardOnSwipe: true}}>
-        <Screen
-            name={'First'}
-            component={First}
-        />
-        <Screen
-            name={'Second'}
-            component={Second}
-        />
-        </Navigator>
+      <Navigator screenOptions={{ hideKeyboardOnSwipe: true }}>
+        <Screen name={'First'} component={First} />
+        <Screen name={'Second'} component={Second} />
+      </Navigator>
     </NavigationContainer>
   );
-}
+};
diff --git a/FabricTestExample/src/Test1463.tsx b/FabricTestExample/src/Test1463.tsx
index 35e5572c2a..2806302672 100644
--- a/FabricTestExample/src/Test1463.tsx
+++ b/FabricTestExample/src/Test1463.tsx
@@ -1,6 +1,13 @@
-import React, {useState} from 'react';
-import {Button, Dimensions, Image, StyleSheet, Text, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React, { useState } from 'react';
+import {
+  Button,
+  Dimensions,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -20,10 +27,11 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{
-      flex: 1,
-      backgroundColor: 'blue',
-    }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: 'blue',
+      }}>
       <Button
         onPress={() => navigation.navigate('Second')}
         title="Go to second"
@@ -34,10 +42,11 @@ function First({
 
 function Second() {
   return (
-    <View style={{
-      flex: 1, 
-      backgroundColor: 'red',
-    }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: 'red',
+      }}>
       <Text style={styles.subTitle}>
         Use swipe back gesture to go back (iOS only)
       </Text>
@@ -47,7 +56,7 @@ function Second() {
 
 export default function App() {
   return (
-    <GestureHandlerRootView style={{flex: 1}}>
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <NavigationContainer>
         <Stack.Navigator
           screenOptions={{
@@ -65,12 +74,12 @@ export default function App() {
 
 // components
 
-function Post({onPress}: {onPress?: () => void}) {
+function Post({ onPress }: { onPress?: () => void }) {
   const [width] = useState(Math.round(Dimensions.get('screen').width));
 
   return (
     <TapGestureHandler
-      onHandlerStateChange={(e) =>
+      onHandlerStateChange={e =>
         e.nativeEvent.oldState === State.ACTIVE && onPress?.()
       }>
       <View style={styles.post}>
@@ -89,11 +98,11 @@ function generatePhotos(
   height: number,
 ): JSX.Element[] {
   const startFrom = Math.floor(Math.random() * 20) + 10;
-  return Array.from({length: amount}, (_, index) => {
+  return Array.from({ length: amount }, (_, index) => {
     const uri = `https://picsum.photos/id/${
       startFrom + index
     }/${width}/${height}`;
-    return <Image style={{width, height}} key={uri} source={{uri}} />;
+    return <Image style={{ width, height }} key={uri} source={{ uri }} />;
   });
 }
 
diff --git a/FabricTestExample/src/Test1473.tsx b/FabricTestExample/src/Test1473.tsx
index b0fad8a90d..4c689b9b0c 100644
--- a/FabricTestExample/src/Test1473.tsx
+++ b/FabricTestExample/src/Test1473.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {StyleSheet, View, Text, Button} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { StyleSheet, View, Text, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -9,7 +9,7 @@ function First(props) {
   return (
     <View style={styles.container}>
       <Text>This is the first screen</Text>
-      <Button 
+      <Button
         onPress={() => props.navigation.navigate('Second')}
         title="Navigate to second screen"
       />
@@ -31,17 +31,18 @@ function Second(props) {
 
 function Modal(props) {
   return (
-    <View style={{
-      ...styles.container,
-      backgroundColor: 'rgba(0, 170, 0, 0.5)',
-    }}>
+    <View
+      style={{
+        ...styles.container,
+        backgroundColor: 'rgba(0, 170, 0, 0.5)',
+      }}>
       <Text>This is the modal</Text>
       <Button
         onPress={() => props.navigation.goBack()}
         title="Close the modal"
       />
     </View>
-  )
+  );
 }
 
 function App() {
@@ -49,9 +50,13 @@ function App() {
     <NavigationContainer>
       <Stack.Navigator initialRouteName="First">
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen name="Second" component={Second} options={{
-          fullScreenSwipeEnabled: true,
-        }}/>
+        <Stack.Screen
+          name="Second"
+          component={Second}
+          options={{
+            fullScreenSwipeEnabled: true,
+          }}
+        />
         <Stack.Screen
           name="Modal"
           component={Modal}
diff --git a/FabricTestExample/src/Test1476.tsx b/FabricTestExample/src/Test1476.tsx
index bb4c98e5b0..d80684d4df 100644
--- a/FabricTestExample/src/Test1476.tsx
+++ b/FabricTestExample/src/Test1476.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Button, Text, View, StyleSheet} from 'react-native';
-import {NavigationContainer as NavigationContainerNative} from '@react-navigation/native';
+import { Button, Text, View, StyleSheet } from 'react-native';
+import { NavigationContainer as NavigationContainerNative } from '@react-navigation/native';
 
 // remember to change prop names in ScreenGroup && ModalGroup
 // import { createNativeStackNavigator, NativeStackNavigationOptions } from '@react-navigation/native-stack';
@@ -11,7 +11,7 @@ import {
 
 const NativeStack = createNativeStackNavigator();
 
-function ScreenA({navigation}) {
+function ScreenA({ navigation }) {
   return (
     <View
       style={{
@@ -20,7 +20,7 @@ function ScreenA({navigation}) {
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Text style={{color: 'white'}}>
+      <Text style={{ color: 'white' }}>
         ScreenA, with backgroundColor: 'blue'
       </Text>
       <Button
@@ -31,7 +31,7 @@ function ScreenA({navigation}) {
   );
 }
 
-function ScreenB({navigation}) {
+function ScreenB({ navigation }) {
   return (
     <View
       style={{
@@ -60,9 +60,8 @@ function ModalA(props: Props) {
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <View style={{backgroundColor: 'white'}}>
-
-      <Text>ModalA, with opacity and backgroundColor</Text>
+      <View style={{ backgroundColor: 'white' }}>
+        <Text>ModalA, with opacity and backgroundColor</Text>
         <Text>
           At ModalA, we still can gesture swipe the screenB back to screenA,{' '}
         </Text>
@@ -72,57 +71,78 @@ function ModalA(props: Props) {
   );
 }
 
-const StackBuilder = (configs: any, groupOptions?: NativeStackNavigationOptions) => {
+const StackBuilder = (
+  configs: any,
+  groupOptions?: NativeStackNavigationOptions,
+) => {
   return () => (
     <NativeStack.Group screenOptions={groupOptions}>
       {configs.map(config => {
         const { options, ...anyConfig } = config;
-        const { statusBarStyle, statusBarAnimation, statusBarHidden, ...anyOption } = options || {};
-        return <NativeStack.Screen key={config.name} {...anyConfig} options={anyOption} />;
+        const {
+          statusBarStyle,
+          statusBarAnimation,
+          statusBarHidden,
+          ...anyOption
+        } = options || {};
+        return (
+          <NativeStack.Screen
+            key={config.name}
+            {...anyConfig}
+            options={anyOption}
+          />
+        );
       })}
     </NativeStack.Group>
   );
 };
 
-const ScreenGroup = StackBuilder([
-  {
-    name: 'screenA',
-    component: ScreenA,
-  },
+const ScreenGroup = StackBuilder(
+  [
+    {
+      name: 'screenA',
+      component: ScreenA,
+    },
+    {
+      name: 'screenB',
+      component: ScreenB,
+    },
+  ],
   {
-    name: 'screenB',
-    component: ScreenB,
-  }], {
-  // headerShadowVisible: false,
-  headerTintColor: 'black',
-  headerBackTitleVisible: false,
-  gestureEnabled: true,
-  contentStyle: { backgroundColor: 'white' },
+    // headerShadowVisible: false,
+    headerTintColor: 'black',
+    headerBackTitleVisible: false,
+    gestureEnabled: true,
+    contentStyle: { backgroundColor: 'white' },
 
-  // prop for @react-navigation/native-stack
-  // fullScreenGestureEnabled: true,
-
-  // prop for react-native-screens/native-stack
-  fullScreenSwipeEnabled: true,
-});
+    // prop for @react-navigation/native-stack
+    // fullScreenGestureEnabled: true,
 
-
-const ModalGroup = StackBuilder([
+    // prop for react-native-screens/native-stack
+    fullScreenSwipeEnabled: true,
+  },
+);
+
+const ModalGroup = StackBuilder(
+  [
+    {
+      name: 'modalA',
+      component: ModalA,
+      options: { animation: 'fade' },
+    },
+  ],
   {
-    name: 'modalA',
-    component: ModalA,
-    options: { animation: 'fade' },
-  }], {
-  headerShown: false,
+    headerShown: false,
 
-  // props for @react-navigation/native-stack
-  // animation: 'fade_from_bottom',
-  // presentation: 'containedTransparentModal',
+    // props for @react-navigation/native-stack
+    // animation: 'fade_from_bottom',
+    // presentation: 'containedTransparentModal',
 
-  // props for react-native-screens/native-stack
-  stackAnimation: 'fade_from_bottom',
-  stackPresentation: 'containedTransparentModal',
-});
+    // props for react-native-screens/native-stack
+    stackAnimation: 'fade_from_bottom',
+    stackPresentation: 'containedTransparentModal',
+  },
+);
 
 export default function TestModalPresentation() {
   return (
diff --git a/FabricTestExample/src/Test1646.tsx b/FabricTestExample/src/Test1646.tsx
index e9e24d8feb..228fc5b4ce 100644
--- a/FabricTestExample/src/Test1646.tsx
+++ b/FabricTestExample/src/Test1646.tsx
@@ -1,8 +1,8 @@
-import {NavigationContainer, useRoute} from '@react-navigation/native';
+import { NavigationContainer, useRoute } from '@react-navigation/native';
 // import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 import * as React from 'react';
-import {Button, View} from 'react-native';
+import { Button, View } from 'react-native';
 
 const Stack = createNativeStackNavigator();
 
@@ -18,14 +18,16 @@ export default function App() {
         <Stack.Screen
           name="Screen"
           component={Screen}
-          options={({route}: any) => ({title: route.params?.title ?? 'Hello'})}
+          options={({ route }: any) => ({
+            title: route.params?.title ?? 'Hello',
+          })}
         />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function Screen({navigation}: any) {
+function Screen({ navigation }: any) {
   const route = useRoute<any>();
   const count = route.params?.count ?? 0;
 
diff --git a/FabricTestExample/src/Test1649.tsx b/FabricTestExample/src/Test1649.tsx
index 80568c15e4..2822c809ee 100644
--- a/FabricTestExample/src/Test1649.tsx
+++ b/FabricTestExample/src/Test1649.tsx
@@ -1,11 +1,10 @@
-/* eslint-disable react/display-name */
 import * as React from 'react';
-import {Button, StyleSheet, View, Text, ScrollView} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, StyleSheet, View, Text, ScrollView } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
-  NativeStackNavigationOptions
+  NativeStackNavigationOptions,
 } from 'react-native-screens/native-stack';
 import { SheetDetentTypes } from 'react-native-screens';
 
@@ -18,8 +17,8 @@ export default function App(): JSX.Element {
     sheetLargestUndimmedDetent: 'medium',
     sheetGrabberVisible: false,
     sheetCornerRadius: -1,
-    sheetExpandsWhenScrolledToEdge: true
-  }
+    sheetExpandsWhenScrolledToEdge: true,
+  };
 
   return (
     <NavigationContainer>
@@ -30,19 +29,30 @@ export default function App(): JSX.Element {
             color: 'cyan',
           },
           headerShown: true,
-          headerHideBackButton: false
+          headerHideBackButton: false,
         }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen name="Second" component={Second} options={{
-          fullScreenSwipeEnabled: true,
-        }} />
-        <Stack.Screen name="SheetScreen" component={SheetScreen} options={{
-          ...initialScreenOptions
-        }}/>
-        <Stack.Screen name="SheetScreenWithScrollView" component={SheetScreenWithScrollView} options={{
-          ...initialScreenOptions
-        }}/>
-
+        <Stack.Screen
+          name="Second"
+          component={Second}
+          options={{
+            fullScreenSwipeEnabled: true,
+          }}
+        />
+        <Stack.Screen
+          name="SheetScreen"
+          component={SheetScreen}
+          options={{
+            ...initialScreenOptions,
+          }}
+        />
+        <Stack.Screen
+          name="SheetScreenWithScrollView"
+          component={SheetScreenWithScrollView}
+          options={{
+            ...initialScreenOptions,
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
@@ -70,17 +80,16 @@ function Second({
     <>
       <Button
         title="Open the sheet"
-        onPress={() => navigation.navigate("SheetScreen")}
+        onPress={() => navigation.navigate('SheetScreen')}
       />
       <Button
         title="Open the sheet with ScrollView"
-        onPress={() => navigation.navigate("SheetScreenWithScrollView")}
+        onPress={() => navigation.navigate('SheetScreenWithScrollView')}
       />
     </>
-  )
+  );
 }
 
-
 function SheetScreen({
   navigation,
 }: {
@@ -88,101 +97,112 @@ function SheetScreen({
 }) {
   const [radius, setRadius] = React.useState(-1);
   const [detent, setDetent] = React.useState<SheetDetentTypes>('all');
-  const [largestUndimmedDetent, sheetLargestUndimmedDetent] = React.useState<SheetDetentTypes>('all');
+  const [largestUndimmedDetent, sheetLargestUndimmedDetent] =
+    React.useState<SheetDetentTypes>('all');
   const [isGrabberVisible, setIsGrabberVisible] = React.useState(false);
   // navigation
-  const [shouldExpand, setShouldExpand] = React.useState(true)
+  const [shouldExpand, setShouldExpand] = React.useState(true);
 
   function nextDetentLevel(currDetent: SheetDetentTypes): SheetDetentTypes {
-    if (currDetent === "all") {
-      return "medium";
-    } else if (currDetent === "medium") {
-      return "large";
-    } else if (currDetent === "large") {
-      return "all";
+    if (currDetent === 'all') {
+      return 'medium';
+    } else if (currDetent === 'medium') {
+      return 'large';
+    } else if (currDetent === 'large') {
+      return 'all';
     } else {
-      console.warn("Unhandled sheetDetent type")
-      return "all";
+      console.warn('Unhandled sheetDetent type');
+      return 'all';
     }
   }
 
   return (
     <View style={styles.centeredView}>
       <Button
-      title="Tap me for the first screen"
-      onPress={() => navigation.navigate('First')} />
+        title="Tap me for the first screen"
+        onPress={() => navigation.navigate('First')}
+      />
       <Button
-      title="Tap me for the second screen"
-      onPress={() => navigation.navigate('Second')} />
+        title="Tap me for the second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
       <Button
-      title="Change the corner radius"
-      onPress={() => {
-        const newRadius = radius >= 150 ? -1.0 : radius + 50;
-        setRadius(newRadius)
-        navigation.setOptions({
-          sheetCornerRadius: newRadius
-        })
-      }}/>
+        title="Change the corner radius"
+        onPress={() => {
+          const newRadius = radius >= 150 ? -1.0 : radius + 50;
+          setRadius(newRadius);
+          navigation.setOptions({
+            sheetCornerRadius: newRadius,
+          });
+        }}
+      />
       <Text>radius: {radius}</Text>
-      <Button 
+      <Button
         title="Change detent level"
         onPress={() => {
           const newDetentLevel = nextDetentLevel(detent);
-          setDetent(newDetentLevel)
+          setDetent(newDetentLevel);
           navigation.setOptions({
-            sheetAllowedDetents: newDetentLevel
-          })
-        }} 
+            sheetAllowedDetents: newDetentLevel,
+          });
+        }}
       />
       <Text>detent: {detent}</Text>
-      <Button 
+      <Button
         title="Change largest undimmed detent"
         onPress={() => {
           const newDetentLevel = nextDetentLevel(largestUndimmedDetent);
           sheetLargestUndimmedDetent(newDetentLevel);
           navigation.setOptions({
-            sheetLargestUndimmedDetent: newDetentLevel
-          })
+            sheetLargestUndimmedDetent: newDetentLevel,
+          });
         }}
       />
       <Text>largestUndimmedDetent: {largestUndimmedDetent}</Text>
-      <Button 
+      <Button
         title="Toggle sheetExpandsWhenScrolledToEdge"
         onPress={() => {
           setShouldExpand(!shouldExpand);
           navigation.setOptions({
-            sheetExpandsWhenScrolledToEdge: !shouldExpand
-          })
+            sheetExpandsWhenScrolledToEdge: !shouldExpand,
+          });
         }}
       />
-      <Text>sheetExpandsWhenScrolledToEdge: {shouldExpand ? "true" : "false"}</Text>
-      <Button 
+      <Text>
+        sheetExpandsWhenScrolledToEdge: {shouldExpand ? 'true' : 'false'}
+      </Text>
+      <Button
         title="Toggle grabber visibility"
         onPress={() => {
           setIsGrabberVisible(!isGrabberVisible);
           navigation.setOptions({
-            sheetGrabberVisible: !isGrabberVisible
-          })
+            sheetGrabberVisible: !isGrabberVisible,
+          });
         }}
       />
     </View>
   );
 }
 
-function SheetScreenWithScrollView({ navigation }: { navigation: NativeStackNavigationProp<ParamListBase> }) {
+function SheetScreenWithScrollView({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
     <>
-    <View style={styles.centeredView}>
-      <ScrollView>
-        <SheetScreen navigation={navigation} />
-        {[...Array(40).keys()].map((val) => <Text key={`${val}`}>Some component {val}</Text>)}
-      </ScrollView>
-    </View>
+      <View style={styles.centeredView}>
+        <ScrollView>
+          <SheetScreen navigation={navigation} />
+          {[...Array(40).keys()].map(val => (
+            <Text key={`${val}`}>Some component {val}</Text>
+          ))}
+        </ScrollView>
+      </View>
     </>
-  )
+  );
 }
 
-
 const styles = StyleSheet.create({
   headerView: {
     height: 20,
@@ -191,6 +211,6 @@ const styles = StyleSheet.create({
   },
   centeredView: {
     justifyContent: 'center',
-    alignItems: 'center'
-  }
+    alignItems: 'center',
+  },
 });
diff --git a/FabricTestExample/src/Test1683.tsx b/FabricTestExample/src/Test1683.tsx
index ae939f6a28..7a8f20b2a3 100644
--- a/FabricTestExample/src/Test1683.tsx
+++ b/FabricTestExample/src/Test1683.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import {View, StyleSheet, Button, useColorScheme} from 'react-native';
+import { View, StyleSheet, Button, useColorScheme } from 'react-native';
 import {
   NavigationContainer,
   DarkTheme,
@@ -7,8 +7,8 @@ import {
   Theme,
 } from '@react-navigation/native';
 // import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import React, {createContext, useContext, useState} from 'react';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import React, { createContext, useContext, useState } from 'react';
 
 const RootStack = createNativeStackNavigator();
 
@@ -19,7 +19,7 @@ const ThemeContext = createContext({
 });
 
 const HomeScreen = () => {
-  const {theme, setTheme} = useContext(ThemeContext);
+  const { theme, setTheme } = useContext(ThemeContext);
   return (
     <View style={styles.container}>
       <Button
@@ -34,7 +34,7 @@ const HomeScreen = () => {
 };
 
 const Navigator = () => {
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   // const scheme = useColorScheme();
   return (
     <NavigationContainer
@@ -60,7 +60,7 @@ const Navigator = () => {
 export default function App() {
   const [theme, setTheme] = useState(DefaultTheme);
   return (
-    <ThemeContext.Provider value={{theme: theme, setTheme: setTheme}}>
+    <ThemeContext.Provider value={{ theme: theme, setTheme: setTheme }}>
       <Navigator />
     </ThemeContext.Provider>
   );
diff --git a/FabricTestExample/src/Test1726.tsx b/FabricTestExample/src/Test1726.tsx
index 965df812b1..bb8267a208 100644
--- a/FabricTestExample/src/Test1726.tsx
+++ b/FabricTestExample/src/Test1726.tsx
@@ -1,23 +1,23 @@
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import React from 'react';
-import {Button, View} from 'react-native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const RootStack = createNativeStackNavigator();
 
-const Screen1 = ({navigation: {navigate}}) => (
-  <View style={{flex: 1}}>
+const Screen1 = ({ navigation: { navigate } }) => (
+  <View style={{ flex: 1 }}>
     <Button onPress={() => navigate('Screen2')} title="Screen 2" />
   </View>
 );
 
-const Screen2 = ({navigation: {navigate}}) => (
-  <View style={{flex: 1}}>
+const Screen2 = ({ navigation: { navigate } }) => (
+  <View style={{ flex: 1 }}>
     <Button onPress={() => navigate('Screen3')} title="Screen 3" />
   </View>
 );
 
-const Screen3 = () => <View style={{flex: 1}} />;
+const Screen3 = () => <View style={{ flex: 1 }} />;
 
 const App = () => {
   return (
@@ -36,7 +36,7 @@ const App = () => {
           name="Screen3"
           options={{
             headerBackTitle: 'Small title',
-            headerBackTitleStyle: {fontSize: 8},
+            headerBackTitleStyle: { fontSize: 8 },
           }}
         />
       </RootStack.Navigator>
diff --git a/FabricTestExample/src/Test263.js b/FabricTestExample/src/Test263.js
index ebefc95651..c49980f8a6 100644
--- a/FabricTestExample/src/Test263.js
+++ b/FabricTestExample/src/Test263.js
@@ -1,13 +1,13 @@
-import React, {Component} from 'react';
-import {StyleSheet, Animated, Button} from 'react-native';
+import React, { Component } from 'react';
+import { StyleSheet, Animated, Button } from 'react-native';
 
 import {
   PanGestureHandler,
   ScrollView,
   State,
 } from 'react-native-gesture-handler';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 function Example() {
   return (
@@ -24,7 +24,7 @@ class DraggableBox extends Component {
     super(props);
     this._translateX = new Animated.Value(0);
     this._translateY = new Animated.Value(0);
-    this._lastOffset = {x: 0, y: 0};
+    this._lastOffset = { x: 0, y: 0 };
     this._onGestureEvent = Animated.event(
       [
         {
@@ -34,11 +34,11 @@ class DraggableBox extends Component {
           },
         },
       ],
-      {useNativeDriver: true},
+      { useNativeDriver: true },
     );
   }
 
-  _onHandlerStateChange = (event) => {
+  _onHandlerStateChange = event => {
     if (event.nativeEvent.oldState === State.ACTIVE) {
       this._lastOffset.x += event.nativeEvent.translationX;
       this._lastOffset.y += event.nativeEvent.translationY;
@@ -60,8 +60,8 @@ class DraggableBox extends Component {
             styles.box,
             {
               transform: [
-                {translateX: this._translateX},
-                {translateY: this._translateY},
+                { translateX: this._translateX },
+                { translateY: this._translateY },
               ],
             },
             this.props.boxStyle,
@@ -74,7 +74,7 @@ class DraggableBox extends Component {
 
 const NativeStack = createNativeStackNavigator();
 
-const HomeScreen = ({navigation}) => {
+const HomeScreen = ({ navigation }) => {
   return (
     <ScrollView
       style={{}}
@@ -94,12 +94,12 @@ export default function ReactNativeScreensBugs() {
           stackPresentation: 'modal',
         }}>
         <NativeStack.Screen
-          options={{headerLargeTitle: true}}
+          options={{ headerLargeTitle: true }}
           name="StickyHeader"
           component={HomeScreen}
         />
         <NativeStack.Screen
-          options={{headerLargeTitle: true, gestureEnabled: true}}
+          options={{ headerLargeTitle: true, gestureEnabled: true }}
           name="Second"
           component={Example}
         />
diff --git a/FabricTestExample/src/Test349.js b/FabricTestExample/src/Test349.js
index af64c6d075..6e12baec33 100644
--- a/FabricTestExample/src/Test349.js
+++ b/FabricTestExample/src/Test349.js
@@ -1,28 +1,22 @@
 import React from 'react';
-import {
-  StyleSheet,
-  ScrollView,
-  TextInput,
-  View,
-  Text,
-} from 'react-native';
+import { StyleSheet, ScrollView, TextInput, View, Text } from 'react-native';
 
-import {Colors} from 'react-native/Libraries/NewAppScreen';
-import {NavigationContainer} from '@react-navigation/native';
-import {createStackNavigator} from '@react-navigation/stack';
-import {TouchableOpacity} from 'react-native-gesture-handler';
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 
-const LoginScreen = (props) => {
+const LoginScreen = props => {
   return (
     <>
       <TextInput
-        style={{fontSize: 20}}
+        style={{ fontSize: 20 }}
         autoCompleteType={'username'}
         importantForAutofill={'yes'}
         placeholder={'Username'}
       />
       <TextInput
-        style={{fontSize: 20}}
+        style={{ fontSize: 20 }}
         autoCompleteType={'password'}
         importantForAutofill={'yes'}
         placeholder={'Password'}
@@ -41,13 +35,13 @@ const LoginScreen = (props) => {
       </TouchableOpacity>
       <ScrollView>
         <TextInput
-          style={{fontSize: 20}}
+          style={{ fontSize: 20 }}
           autoCompleteType={'username'}
           importantForAutofill={'yes'}
           placeholder={'Username'}
         />
         <TextInput
-          style={{fontSize: 20}}
+          style={{ fontSize: 20 }}
           autoCompleteType={'password'}
           importantForAutofill={'yes'}
           placeholder={'Password'}
@@ -58,7 +52,7 @@ const LoginScreen = (props) => {
   );
 };
 
-const HomeScreen = (props) => {
+const HomeScreen = props => {
   return (
     <View
       style={{
diff --git a/FabricTestExample/src/Test364.js b/FabricTestExample/src/Test364.js
index fc99705770..82b4bd6363 100644
--- a/FabricTestExample/src/Test364.js
+++ b/FabricTestExample/src/Test364.js
@@ -1,7 +1,10 @@
 // fixed by #712
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';
+import {
+  NavigationContainer,
+  getFocusedRouteNameFromRoute,
+} from '@react-navigation/native';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { enableScreens } from 'react-native-screens';
@@ -80,4 +83,4 @@ export default function App() {
       </Tab.Navigator>
     </NavigationContainer>
   );
-};
+}
diff --git a/FabricTestExample/src/Test42.tsx b/FabricTestExample/src/Test42.tsx
index 4680e0fd18..db74a01e9b 100644
--- a/FabricTestExample/src/Test42.tsx
+++ b/FabricTestExample/src/Test42.tsx
@@ -1,12 +1,12 @@
 // connected PRs: #679, #675
 import React from 'react';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {ScrollView, Button, Text} from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { ScrollView, Button, Text } from 'react-native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 // import {createStackNavigator} from '@react-navigation/stack';
 
 const Stack = createNativeStackNavigator();
@@ -42,10 +42,11 @@ const Tab = createBottomTabNavigator();
 
 const NestedNavigator = () => (
   <Tab.Navigator
-    screenOptions={{
+    screenOptions={
+      {
         // screenOrientation: 'landscape_left',
-    }}
-  >
+      }
+    }>
     <Tab.Screen name="Screen1" component={Home} />
     <Tab.Screen name="Screen2" component={Inner} />
     <Tab.Screen
@@ -75,7 +76,7 @@ function Home({
   const [yes, setYes] = React.useState(true);
   return (
     <ScrollView
-      style={{backgroundColor: 'yellow'}}
+      style={{ backgroundColor: 'yellow' }}
       contentInsetAdjustmentBehavior="automatic">
       <Button
         title="NestedNavigator"
diff --git a/FabricTestExample/src/Test528.js b/FabricTestExample/src/Test528.js
index 02bf6a1a4e..2c5ab47324 100644
--- a/FabricTestExample/src/Test528.js
+++ b/FabricTestExample/src/Test528.js
@@ -1,23 +1,18 @@
-import React, {useLayoutEffect} from 'react';
-import {
-  View,
-  Text,
-  Pressable,
-  Alert,
-} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import React, { useLayoutEffect } from 'react';
+import { View, Text, Pressable, Alert } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const CustomHeaderRight = () => {
   return (
     <Pressable
       onPress={() => Alert.alert('hi')}
-      style={{backgroundColor: 'orange'}}>
+      style={{ backgroundColor: 'orange' }}>
       <Text>Custom Button</Text>
     </Pressable>
   );
 };
-const Screen1 = (props) => {
+const Screen1 = props => {
   useLayoutEffect(() => {
     props.navigation.setOptions({
       headerRight: () => <CustomHeaderRight />,
@@ -56,14 +51,8 @@ const Stack = createNativeStackNavigator();
 const Router = () => {
   return (
     <Stack.Navigator>
-      <Stack.Screen
-        name="Screen1"
-        component={Screen1}
-      />
-      <Stack.Screen
-        name="Screen2"
-        component={Screen2}
-      />
+      <Stack.Screen name="Screen1" component={Screen1} />
+      <Stack.Screen name="Screen2" component={Screen2} />
     </Stack.Navigator>
   );
 };
diff --git a/FabricTestExample/src/Test550.js b/FabricTestExample/src/Test550.js
index 6ec353655b..ed413f92cc 100644
--- a/FabricTestExample/src/Test550.js
+++ b/FabricTestExample/src/Test550.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import {Button, ScrollView, StyleSheet} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, ScrollView, StyleSheet } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
     <ScrollView contentContainerStyle={styles.contentContainer}>
       <Button
@@ -31,7 +31,7 @@ function RootStackScreen() {
       <RootStack.Screen
         name="Home"
         component={HomeScreen}
-        options={{headerShown: false}}
+        options={{ headerShown: false }}
       />
       <RootStack.Screen name="Details" component={DetailsScreen} />
     </RootStack.Navigator>
diff --git a/FabricTestExample/src/Test556.js b/FabricTestExample/src/Test556.js
index e065292dfd..b8df07b258 100644
--- a/FabricTestExample/src/Test556.js
+++ b/FabricTestExample/src/Test556.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -9,31 +9,33 @@ export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator
-       screenOptions={{stackPresentation: 'modal', headerShown: true, stackAnimation: 'default'}}
-       >
+        screenOptions={{
+          stackPresentation: 'modal',
+          headerShown: true,
+          stackAnimation: 'default',
+        }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}) {
-
+function First({ navigation }) {
   return (
-    <View style={{flex: 1, paddingTop: 100}}>
-    <Button title="Tap me for second screen" onPress={() => navigation.push('Second')} />
+    <View style={{ flex: 1, paddingTop: 100 }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.push('Second')}
+      />
     </View>
   );
 }
 
-function Second({navigation}) {
-
+function Second({ navigation }) {
   return (
-    <View style={{flex: 1, paddingTop: 100, backgroundColor: 'red'}}>
-    <Button title="Go back" onPress={() => navigation.goBack()} />
-    </View>  );
+    <View style={{ flex: 1, paddingTop: 100, backgroundColor: 'red' }}>
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
 }
diff --git a/FabricTestExample/src/Test564.js b/FabricTestExample/src/Test564.js
index 4d7ed5dd1a..13437943f3 100644
--- a/FabricTestExample/src/Test564.js
+++ b/FabricTestExample/src/Test564.js
@@ -1,24 +1,22 @@
 import React from 'react';
 import { ScrollView, Button } from 'react-native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {NavigationContainer} from '@react-navigation/native';
-
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
 
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
-    <ScrollView
-      contentInsetAdjustmentBehavior="automatic">
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
       <Button
         title="TabNavigator"
         onPress={() => navigation.navigate('TabNavigator')}
       />
     </ScrollView>
   );
-};
+}
 
 const TabNavigator = () => (
   <Tab.Navigator>
@@ -31,7 +29,7 @@ const TabNavigator = () => (
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{headerTranslucent: true}}>
+      <Stack.Navigator screenOptions={{ headerTranslucent: true }}>
         <Stack.Screen name="Home1" component={HomeScreen} />
         <Stack.Screen name="TabNavigator" component={TabNavigator} />
       </Stack.Navigator>
diff --git a/FabricTestExample/src/Test577.js b/FabricTestExample/src/Test577.js
index bd8288ca3f..c187cf0ab8 100644
--- a/FabricTestExample/src/Test577.js
+++ b/FabricTestExample/src/Test577.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import {StyleSheet, View, Text, Button} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { StyleSheet, View, Text, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 function Home(props) {
   return (
diff --git a/FabricTestExample/src/Test593.tsx b/FabricTestExample/src/Test593.tsx
index 7518dd36b7..95a08a150e 100644
--- a/FabricTestExample/src/Test593.tsx
+++ b/FabricTestExample/src/Test593.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { createContext, useState, useContext, useEffect } from 'react';
 import {
   ScrollView,
@@ -12,11 +13,14 @@ import {
 } from 'react-native';
 import { nanoid } from 'nanoid/non-secure';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
-import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const Stack = createNativeStackNavigator();
 const NestedStack = createNativeStackNavigator();
@@ -34,7 +38,7 @@ function Deeper({ navigation }: Props) {
           }`,
           backgroundColor: 'orange',
         });
-      }
+      },
     );
 
     return unsubscribe;
@@ -60,9 +64,9 @@ function Deeper({ navigation }: Props) {
         console.warn(
           Platform.OS +
             ' Deeper transitionStart ' +
-            (data.closing ? 'closing' : 'opening')
+            (data.closing ? 'closing' : 'opening'),
         );
-      }
+      },
     );
 
     return unsubscribe;
@@ -73,7 +77,7 @@ function Deeper({ navigation }: Props) {
       console.warn(
         Platform.OS +
           ' Deeper transitionEnd ' +
-          (data.closing ? 'closing' : 'opening')
+          (data.closing ? 'closing' : 'opening'),
       );
     });
 
@@ -81,7 +85,12 @@ function Deeper({ navigation }: Props) {
   }, [navigation]);
 
   return (
-    <NestedStack.Navigator screenOptions={{ headerShown: true, stackAnimation: 'slide_from_right', nativeBackButtonDismissalEnabled: true }}>
+    <NestedStack.Navigator
+      screenOptions={{
+        headerShown: true,
+        stackAnimation: 'slide_from_right',
+        nativeBackButtonDismissalEnabled: true,
+      }}>
       <NestedStack.Screen name="Privacy" component={Privacy} />
       <NestedStack.Screen name="Another" component={Another} />
     </NestedStack.Navigator>
@@ -92,10 +101,14 @@ export default function NativeNavigation() {
   return (
     <NavigationContainer>
       <ToastProvider>
-      <Stack.Navigator screenOptions={{stackAnimation: 'slide_from_bottom',  nativeBackButtonDismissalEnabled: true}}>
-        <Stack.Screen name="Status" component={Status} />
-        <Stack.Screen name="Deeper" component={Deeper} />
-      </Stack.Navigator>
+        <Stack.Navigator
+          screenOptions={{
+            stackAnimation: 'slide_from_bottom',
+            nativeBackButtonDismissalEnabled: true,
+          }}>
+          <Stack.Screen name="Status" component={Status} />
+          <Stack.Screen name="Deeper" component={Deeper} />
+        </Stack.Navigator>
       </ToastProvider>
     </NavigationContainer>
   );
@@ -114,7 +127,7 @@ function Status({ navigation }: Props) {
           }`,
           backgroundColor: 'orange',
         });
-      }
+      },
     );
 
     return unsubscribe;
@@ -132,7 +145,7 @@ function Status({ navigation }: Props) {
 
     return unsubscribe;
   }, [navigation]);
-  
+
   React.useEffect(() => {
     const unsubscribe = navigation.addListener(
       'transitionStart',
@@ -140,9 +153,9 @@ function Status({ navigation }: Props) {
         console.warn(
           Platform.OS +
             ' Status transitionStart ' +
-            (data.closing ? 'closing' : 'opening')
+            (data.closing ? 'closing' : 'opening'),
         );
-      }
+      },
     );
 
     return unsubscribe;
@@ -153,7 +166,7 @@ function Status({ navigation }: Props) {
       console.warn(
         Platform.OS +
           ' Status transitionEnd ' +
-          (data.closing ? 'closing' : 'opening')
+          (data.closing ? 'closing' : 'opening'),
       );
     });
 
@@ -180,7 +193,7 @@ function Privacy({ navigation }: Props) {
           }`,
           backgroundColor: 'orange',
         });
-      }
+      },
     );
 
     return unsubscribe;
@@ -206,9 +219,9 @@ function Privacy({ navigation }: Props) {
         console.warn(
           Platform.OS +
             ' Privacy transitionStart ' +
-            (data.closing ? 'closing' : 'opening')
+            (data.closing ? 'closing' : 'opening'),
         );
-      }
+      },
     );
 
     return unsubscribe;
@@ -219,7 +232,7 @@ function Privacy({ navigation }: Props) {
       console.warn(
         Platform.OS +
           ' Privacy transitionEnd ' +
-          (data.closing ? 'closing' : 'opening')
+          (data.closing ? 'closing' : 'opening'),
       );
     });
 
@@ -246,7 +259,7 @@ function Another({ navigation }: Props) {
           }`,
           backgroundColor: 'orange',
         });
-      }
+      },
     );
 
     return unsubscribe;
@@ -272,9 +285,9 @@ function Another({ navigation }: Props) {
         console.warn(
           Platform.OS +
             ' Another transitionStart ' +
-            (data.closing ? 'closing' : 'opening')
+            (data.closing ? 'closing' : 'opening'),
         );
-      }
+      },
     );
 
     return unsubscribe;
@@ -285,7 +298,7 @@ function Another({ navigation }: Props) {
       console.warn(
         Platform.OS +
           ' Another transitionEnd ' +
-          (data.closing ? 'closing' : 'opening')
+          (data.closing ? 'closing' : 'opening'),
       );
     });
 
@@ -361,15 +374,12 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
   const [toasts, setToasts] = useState(initialState);
 
   const remove = (id: string) => {
-    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+    setToasts(prevToasts => prevToasts.filter(toast => toast.id !== id));
   };
 
   const push = ({ backgroundColor, message }: Omit<IToast, 'id'>): void => {
     const id = nanoid();
-    setToasts((prevToasts) => [
-      ...prevToasts,
-      { id, backgroundColor, message },
-    ]);
+    setToasts(prevToasts => [...prevToasts, { id, backgroundColor, message }]);
   };
 
   return (
diff --git a/FabricTestExample/src/Test619.js b/FabricTestExample/src/Test619.js
index 93cd87c665..d66ce94aea 100644
--- a/FabricTestExample/src/Test619.js
+++ b/FabricTestExample/src/Test619.js
@@ -1,62 +1,96 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native'
-import { createNativeStackNavigator } from "react-native-screens/native-stack"
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import { createStackNavigator } from '@react-navigation/stack'
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStackNavigator } from '@react-navigation/stack';
 import { View, Text, Button } from 'react-native';
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation } from '@react-navigation/native';
 
-const ParentStack = createNativeStackNavigator()
-const BottomTab = createBottomTabNavigator()
-const ChildStack = createNativeStackNavigator()
-const Tab1Stack = createNativeStackNavigator()
+const ParentStack = createNativeStackNavigator();
+const BottomTab = createBottomTabNavigator();
+const ChildStack = createNativeStackNavigator();
+const Tab1Stack = createNativeStackNavigator();
 
 const DummyContent = () => {
   const navigation = useNavigation();
 
-  return <View style={{flex:1,justifyContent:"center",alignItems:"center", backgroundColor: 'red'}}>
-    <Text style={{marginBottom:20, textAlign:"center"}}>Child Stack</Text>
-    <Button title="Go Back" onPress={() => navigation.goBack()}/>
-  </View>
-}
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'red',
+      }}>
+      <Text style={{ marginBottom: 20, textAlign: 'center' }}>Child Stack</Text>
+      <Button title="Go Back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+};
 
 const ChildStackScreen = () => (
-  <ChildStack.Navigator screenOptions={{headerShown: false, headerLargeTitle: false}}>
+  <ChildStack.Navigator
+    screenOptions={{ headerShown: false, headerLargeTitle: false }}>
     <Tab1Stack.Screen name="ChildStack" component={BottomStackScreen} />
   </ChildStack.Navigator>
-)
+);
 
 const Another = () => (
-  <ChildStack.Navigator screenOptions={{headerShown: true, headerLargeTitle: false}}>
+  <ChildStack.Navigator
+    screenOptions={{ headerShown: true, headerLargeTitle: false }}>
     <Tab1Stack.Screen name="ChildStack1" component={InitialScreen} />
   </ChildStack.Navigator>
-)
+);
 
 const AnotherBottomTabs = () => (
-  <BottomTab.Navigator screenOptions={{headerShown: false}} detachInactiveScreens={true}>
-  <BottomTab.Screen name="Tab2" component={ChildStackScreen} />
-</BottomTab.Navigator>
-)
+  <BottomTab.Navigator
+    screenOptions={{ headerShown: false }}
+    detachInactiveScreens={true}>
+    <BottomTab.Screen name="Tab2" component={ChildStackScreen} />
+  </BottomTab.Navigator>
+);
 
 const BottomStackScreen = () => (
-  <BottomTab.Navigator screenOptions={{headerShown: false}} detachInactiveScreens={true}>
+  <BottomTab.Navigator
+    screenOptions={{ headerShown: false }}
+    detachInactiveScreens={true}>
     <BottomTab.Screen name="Tab1" component={Another} />
   </BottomTab.Navigator>
-)
+);
 
 const InitialScreen = () => {
   const navigation = useNavigation();
 
-  return <View style={{flex:1,justifyContent:"center",alignItems:"center", backgroundColor: 'red'}}><Button title="Click" onPress={() => navigation.navigate('Bottom')}/></View>
-}
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'red',
+      }}>
+      <Button title="Click" onPress={() => navigation.navigate('Bottom')} />
+    </View>
+  );
+};
 
 const App = () => (
   <NavigationContainer>
     <ParentStack.Navigator>
-    <ParentStack.Screen name="Initial" component={BottomStackScreen} options={{ headerShown: false, stackAnimation: 'default' /** set none to fix */ }} />
-    <ParentStack.Screen name="Bottom" component={ChildStackScreen} options={{ headerShown: false }}></ParentStack.Screen>
+      <ParentStack.Screen
+        name="Initial"
+        component={BottomStackScreen}
+        options={{
+          headerShown: false,
+          stackAnimation: 'default' /** set none to fix */,
+        }}
+      />
+      <ParentStack.Screen
+        name="Bottom"
+        component={ChildStackScreen}
+        options={{ headerShown: false }}></ParentStack.Screen>
     </ParentStack.Navigator>
   </NavigationContainer>
 );
 
- export default App;
+export default App;
diff --git a/FabricTestExample/src/Test624.js b/FabricTestExample/src/Test624.js
index 85ff056f8b..84e8a08daf 100644
--- a/FabricTestExample/src/Test624.js
+++ b/FabricTestExample/src/Test624.js
@@ -6,12 +6,12 @@ import {
   TouchableOpacity,
   TextInput,
 } from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import {
   createStackNavigator,
   CardStyleInterpolators,
 } from '@react-navigation/stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 function First() {
   const NestedStack = createBottomTabNavigator();
@@ -24,7 +24,7 @@ function First() {
   );
 }
 
-function SecondScreen({navigation}) {
+function SecondScreen({ navigation }) {
   return (
     <View style={styles.verticalContainer}>
       <View style={styles.centeredContainer}>
@@ -61,7 +61,7 @@ function SecondScreen({navigation}) {
   );
 }
 
-function ThirdScreen({navigation}) {
+function ThirdScreen({ navigation }) {
   return (
     <View style={styles.verticalContainer}>
       <View style={styles.centeredContainer}>
@@ -79,7 +79,7 @@ function ThirdScreen({navigation}) {
   );
 }
 
-function NestedFirst({navigation}) {
+function NestedFirst({ navigation }) {
   return (
     <View style={styles.verticalContainer}>
       <View style={styles.centeredContainer}>
@@ -116,7 +116,7 @@ function NestedFirst({navigation}) {
   );
 }
 
-function NestedSecond({navigation}) {
+function NestedSecond({ navigation }) {
   return (
     <View style={styles.verticalContainer}>
       <View style={styles.centeredContainer}>
@@ -165,7 +165,7 @@ export default function App() {
           animationEnabled: true,
           transparentCard: true,
           cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
-          headerStyle: {backgroundColor: 'red'},
+          headerStyle: { backgroundColor: 'red' },
           gestureEnabled: true,
           cardOverlayEnabled: true,
         }}>
diff --git a/FabricTestExample/src/Test640.js b/FabricTestExample/src/Test640.js
index f1875f6231..f34c1da112 100644
--- a/FabricTestExample/src/Test640.js
+++ b/FabricTestExample/src/Test640.js
@@ -8,25 +8,23 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {NavigationContainer} from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
 
 function wait(timeout) {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     setTimeout(resolve, timeout);
   });
 }
 
-function HomeScreen({navigation}) {
-  return(
-    <Button
-      title="Navigate"
-      onPress={() => navigation.navigate('Modal')} />
+function HomeScreen({ navigation }) {
+  return (
+    <Button title="Navigate" onPress={() => navigation.navigate('Modal')} />
   );
 }
 
-function Modal({navigation}) {
-  const someContent = Array.from({length: 50}, (v, i) => i);
+function Modal({ navigation }) {
+  const someContent = Array.from({ length: 50 }, (v, i) => i);
   const [refreshing, setRefreshing] = React.useState(false);
 
   const onRefresh = React.useCallback(() => {
@@ -42,7 +40,7 @@ function Modal({navigation}) {
       contentInsetAdjustmentBehavior="automatic"
       scrollToOverflowEnabled
       stickyHeaderIndices={[0, 5]}>
-      {someContent.map((x) => (
+      {someContent.map(x => (
         <TouchableOpacity key={x} style={styles.button}>
           <Text>Scroll to {x}</Text>
         </TouchableOpacity>
@@ -56,20 +54,13 @@ export default function App() {
 
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{stackPresentation: 'modal'}}>
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-        />
-        <Stack.Screen
-          name="Modal"
-          component={Modal}
-          options={{}}
-        />
+      <Stack.Navigator screenOptions={{ stackPresentation: 'modal' }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Modal" component={Modal} options={{}} />
       </Stack.Navigator>
     </NavigationContainer>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {
diff --git a/FabricTestExample/src/Test642.tsx b/FabricTestExample/src/Test642.tsx
index d48aac29e9..d92e178309 100644
--- a/FabricTestExample/src/Test642.tsx
+++ b/FabricTestExample/src/Test642.tsx
@@ -1,12 +1,12 @@
 // connected PRs: #679, #675
 import React from 'react';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {ScrollView, View, Button} from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { ScrollView, View, Button } from 'react-native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
@@ -72,13 +72,13 @@ const Inner = () => (
   </InnerStack.Navigator>
 );
 
-function Home({navigation}: Props) {
+function Home({ navigation }: Props) {
   const [yes, setYes] = React.useState(true);
   const [hidden, setHidden] = React.useState(true);
   const [animation, setAnimation] = React.useState(true);
   return (
     <ScrollView
-      style={{backgroundColor: 'rgba(255,255,0,0.5)'}}
+      style={{ backgroundColor: 'rgba(255,255,0,0.5)' }}
       contentInsetAdjustmentBehavior="automatic">
       <View />
       <Button
diff --git a/FabricTestExample/src/Test645.js b/FabricTestExample/src/Test645.js
index fc09b873c5..b4244a6d81 100644
--- a/FabricTestExample/src/Test645.js
+++ b/FabricTestExample/src/Test645.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import {Button, Text, View} from 'react-native';
-import {createStackNavigator} from '@react-navigation/stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, Text, View } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is the home screen!</Text>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
       <Button
         onPress={() => navigation.navigate('Details')}
         title="Go to Details"
@@ -21,9 +21,9 @@ function HomeScreen({navigation}) {
   );
 }
 
-function DetailsScreen({navigation}) {
+function DetailsScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
         onPress={() => navigation.navigate('Settings')}
         title="Go to Settings"
@@ -33,20 +33,20 @@ function DetailsScreen({navigation}) {
   );
 }
 
-function SettingsScreen({navigation}) {
+function SettingsScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.navigate('Home')} title="Go to Home" />
       <Text>Details</Text>
     </View>
   );
 }
 
-function SecondScreen({navigation}) {
+function SecondScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a second screen!</Text>
-      <Button onPress={() => navigation.goBack()} title="go back"/>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a second screen!</Text>
+      <Button onPress={() => navigation.goBack()} title="go back" />
     </View>
   );
 }
@@ -56,7 +56,7 @@ const Tabs = createBottomTabNavigator();
 
 function MainStackScreen() {
   return (
-    <MainStack.Navigator screenOptions={{headerLargeTitle: true}}>
+    <MainStack.Navigator screenOptions={{ headerLargeTitle: true }}>
       <MainStack.Screen name="Main" component={TabsScreen} />
       <MainStack.Screen name="Details" component={DetailsScreen} />
       <MainStack.Screen name="Settings" component={SettingsScreen} />
@@ -68,11 +68,8 @@ function TabsScreen() {
   return (
     <Tabs.Navigator
       detachInactiveScreens={true}
-      screenOptions={{detachPreviousScreen: false}}>
-      <Tabs.Screen
-        name="Home"
-        component={HomeScreen}
-      />
+      screenOptions={{ detachPreviousScreen: false }}>
+      <Tabs.Screen name="Home" component={HomeScreen} />
       <Tabs.Screen name="Second" component={SecondScreen} />
     </Tabs.Navigator>
   );
diff --git a/FabricTestExample/src/Test648.js b/FabricTestExample/src/Test648.js
index c8def65002..e84591e81d 100644
--- a/FabricTestExample/src/Test648.js
+++ b/FabricTestExample/src/Test648.js
@@ -11,19 +11,16 @@ export default function App() {
       <AppStack.Navigator
         screenOptions={{
           headerLargeTitle: true,
-          stackAnimation: 'slide_from_right'
+          stackAnimation: 'slide_from_right',
         }}>
         <AppStack.Screen name="First" component={First} />
-        <AppStack.Screen
-          name="Second"
-          component={Second}
-        />
+        <AppStack.Screen name="Second" component={Second} />
       </AppStack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
     <ScrollView>
       <Button
@@ -34,7 +31,7 @@ function First({navigation}) {
   );
 }
 
-function Second({navigation}) {
+function Second({ navigation }) {
   return (
     <ScrollView>
       <Button
diff --git a/FabricTestExample/src/Test649.js b/FabricTestExample/src/Test649.js
index 8446cba101..0e4454e9ef 100644
--- a/FabricTestExample/src/Test649.js
+++ b/FabricTestExample/src/Test649.js
@@ -1,10 +1,7 @@
 import * as React from 'react';
-import {
-  Button,
-  ScrollView,
-} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, ScrollView } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -16,16 +13,13 @@ export default function App() {
           headerLargeTitle: true,
         }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
     <ScrollView>
       <Button
@@ -36,7 +30,7 @@ function First({navigation}) {
   );
 }
 
-function Second({navigation}) {
+function Second({ navigation }) {
   return (
     <ScrollView>
       <Button
diff --git a/FabricTestExample/src/Test654.js b/FabricTestExample/src/Test654.js
index f465528d87..94aa5b95d3 100644
--- a/FabricTestExample/src/Test654.js
+++ b/FabricTestExample/src/Test654.js
@@ -1,34 +1,35 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{direction: 'rtl'}}>
+      <Stack.Navigator screenOptions={{ direction: 'rtl' }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
-
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.navigate('Second')}
+    />
   );
 }
 
-function Second({navigation}) {
+function Second({ navigation }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.navigate('First')}
+    />
   );
 }
-
diff --git a/FabricTestExample/src/Test658.js b/FabricTestExample/src/Test658.js
index 41a949384f..9c825a0982 100644
--- a/FabricTestExample/src/Test658.js
+++ b/FabricTestExample/src/Test658.js
@@ -1,7 +1,7 @@
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import * as React from 'react';
-import {Button, Dimensions, Text, View} from 'react-native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, Dimensions, Text, View } from 'react-native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -33,7 +33,7 @@ export default function App() {
   );
 }
 
-function Screen({navigation}) {
+function Screen({ navigation }) {
   const addedRoutes = navigation.dangerouslyGetState().routes.length - 1;
   const margin = addedRoutes * 20;
   const width = Dimensions.get('screen').width - addedRoutes * 40;
@@ -41,7 +41,7 @@ function Screen({navigation}) {
   return (
     <View
       style={[
-        {width, margin, backgroundColor, height: '100%', borderWidth: 2},
+        { width, margin, backgroundColor, height: '100%', borderWidth: 2 },
       ]}>
       <Button
         title="Open transparent modal"
@@ -51,11 +51,11 @@ function Screen({navigation}) {
       {addedRoutes > 0 && (
         <Button title="Back" onPress={() => navigation.goBack()} />
       )}
-      <Text style={{padding: 10}}>
+      <Text style={{ padding: 10 }}>
         For each transparent modal you open, all previously visible screens
         should be visible underneath.
       </Text>
-      <Text style={{padding: 10}}>
+      <Text style={{ padding: 10 }}>
         For each new (non-transparent) modal you open, all previously visible
         screens should be hidden.
       </Text>
diff --git a/FabricTestExample/src/Test662.tsx b/FabricTestExample/src/Test662.tsx
index 2df94d3e89..046922339e 100644
--- a/FabricTestExample/src/Test662.tsx
+++ b/FabricTestExample/src/Test662.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -21,9 +21,13 @@ export default function App(): JSX.Element {
           // stackAnimation: 'slide_from_bottom',
         }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen name="Second" component={Second} options={{
-          replaceAnimation: 'push',
-        }}/>
+        <Stack.Screen
+          name="Second"
+          component={Second}
+          options={{
+            replaceAnimation: 'push',
+          }}
+        />
         <Stack.Screen name="Third" component={Third} />
         <Stack.Screen name="Fourth" component={Fourth} />
       </Stack.Navigator>
@@ -31,8 +35,8 @@ export default function App(): JSX.Element {
   );
 }
 
-const First = ({navigation}: Props): JSX.Element => (
-  <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'blue'}}>
+const First = ({ navigation }: Props): JSX.Element => (
+  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: 'blue' }}>
     <Button
       title="Tap me for the second screen"
       onPress={() => navigation.navigate('Second')}
@@ -44,16 +48,13 @@ const First = ({navigation}: Props): JSX.Element => (
   </View>
 );
 
-const Second = ({navigation}: Props): JSX.Element => (
-  <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'red'}}>
+const Second = ({ navigation }: Props): JSX.Element => (
+  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: 'red' }}>
     <Button
       title="Tap me for the third screen"
       onPress={() => navigation.navigate('Third')}
     />
-    <Button
-      title="Tap me to go back"
-      onPress={() => navigation.goBack()}
-    />
+    <Button title="Tap me to go back" onPress={() => navigation.goBack()} />
     <Button
       title="Replace with first screen"
       onPress={() => navigation.replace('First')}
@@ -61,28 +62,24 @@ const Second = ({navigation}: Props): JSX.Element => (
   </View>
 );
 
-const Third = ({navigation}: Props): JSX.Element => (
-  <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'purple'}}>
+const Third = ({ navigation }: Props): JSX.Element => (
+  <View
+    style={{ flex: 1, justifyContent: 'center', backgroundColor: 'purple' }}>
     <Button
       title="Tap me for fourth screen"
       onPress={() => navigation.navigate('Fourth')}
     />
-    <Button
-      title="Tap me to go back"
-      onPress={() => navigation.goBack()}
-    />
+    <Button title="Tap me to go back" onPress={() => navigation.goBack()} />
   </View>
 );
 
-const Fourth = ({navigation}: Props): JSX.Element => (
-  <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'orange'}}>
+const Fourth = ({ navigation }: Props): JSX.Element => (
+  <View
+    style={{ flex: 1, justifyContent: 'center', backgroundColor: 'orange' }}>
     <Button
       title="Tap me for first screen"
       onPress={() => navigation.navigate('First')}
     />
-    <Button
-      title="Tap me to go back"
-      onPress={() => navigation.goBack()}
-    />
+    <Button title="Tap me to go back" onPress={() => navigation.goBack()} />
   </View>
 );
diff --git a/FabricTestExample/src/Test691.js b/FabricTestExample/src/Test691.js
index aac9bb57a1..9b9211387f 100644
--- a/FabricTestExample/src/Test691.js
+++ b/FabricTestExample/src/Test691.js
@@ -1,39 +1,35 @@
 import * as React from 'react';
-import {
-  View,
-  Text,
-  Button,
-} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { View, Text, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a first screen!</Text>
-      <Button onPress={() => navigation.navigate('Modal')} title="Modal"/>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a first screen!</Text>
+      <Button onPress={() => navigation.navigate('Modal')} title="Modal" />
     </View>
   );
 }
 
-function Modal({navigation}) {
+function Modal({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a modal screen!</Text>
-      <Button onPress={() => navigation.navigate('Tab2')} title="Tab2"/>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a modal screen!</Text>
+      <Button onPress={() => navigation.navigate('Tab2')} title="Tab2" />
     </View>
   );
 }
 
 function Second() {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a second screen!</Text>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a second screen!</Text>
     </View>
   );
 }
@@ -41,24 +37,22 @@ function Second() {
 function ModalStack() {
   return (
     <Stack.Navigator
-    screenOptions={{
-      stackPresentation: 'modal',
-    }}>
-    <Stack.Screen name="First" component={First} />
-    <Stack.Screen name="Modal" component={Modal} />
-  </Stack.Navigator>
-  )
+      screenOptions={{
+        stackPresentation: 'modal',
+      }}>
+      <Stack.Screen name="First" component={First} />
+      <Stack.Screen name="Modal" component={Modal} />
+    </Stack.Navigator>
+  );
 }
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Tab.Navigator screenOptions={{unmountOnBlur: false}}>
+      <Tab.Navigator screenOptions={{ unmountOnBlur: false }}>
         <Tab.Screen name="Tab1" component={ModalStack} />
         <Tab.Screen name="Tab2" component={Second} />
       </Tab.Navigator>
     </NavigationContainer>
   );
 }
-
-
diff --git a/FabricTestExample/src/Test702.js b/FabricTestExample/src/Test702.js
index 28f9af504e..56db3253f8 100644
--- a/FabricTestExample/src/Test702.js
+++ b/FabricTestExample/src/Test702.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import {Button, Text, View} from 'react-native';
-import {createStackNavigator} from '@react-navigation/stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, Text, View } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is the home screen!</Text>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
       <Button
         onPress={() => navigation.navigate('Details')}
         title="Go to Details"
@@ -30,10 +29,10 @@ function DetailsScreen() {
   );
 }
 
-function ModalScreen({navigation}) {
+function ModalScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a modal!</Text>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
       <Button onPress={() => navigation.goBack()} title="Dismiss" />
     </View>
   );
@@ -57,7 +56,7 @@ function RootStackScreen() {
       <RootStack.Screen
         name="Main"
         component={MainStackScreen}
-        options={{headerShown: false}}
+        options={{ headerShown: false }}
       />
       <RootStack.Screen name="MyModal" component={ModalScreen} />
     </RootStack.Navigator>
diff --git a/FabricTestExample/src/Test706.js b/FabricTestExample/src/Test706.js
index 8c673371dc..4534eeb42d 100644
--- a/FabricTestExample/src/Test706.js
+++ b/FabricTestExample/src/Test706.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import {Button, Text, ScrollView, View} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, Text, ScrollView, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
     <ScrollView>
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-        <Text style={{fontSize: 24}}>Home screen with a 'bold' title</Text>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text style={{ fontSize: 24 }}>Home screen with a 'bold' title</Text>
         <Button
           onPress={() => navigation.navigate('Details')}
           title="Go to Details"
@@ -33,7 +33,7 @@ function RootStackScreen() {
   return (
     <RootStack.Navigator
       screenOptions={{
-        headerTitleStyle: {fontWeight: '900'},
+        headerTitleStyle: { fontWeight: '900' },
         headerLargeTitle: true,
         headerLargeTitleStyle: {
           fontWeight: '900',
@@ -44,7 +44,7 @@ function RootStackScreen() {
         name="Details"
         component={DetailsScreen}
         options={{
-          headerTitleStyle: {fontWeight: '100'},
+          headerTitleStyle: { fontWeight: '100' },
           headerLargeTitleStyle: {
             fontWeight: '100',
           },
diff --git a/FabricTestExample/src/Test713.js b/FabricTestExample/src/Test713.js
index 0c03a4a0f0..001f965671 100644
--- a/FabricTestExample/src/Test713.js
+++ b/FabricTestExample/src/Test713.js
@@ -1,70 +1,107 @@
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import React, { useState } from 'react';
 import { Modal, Text, TouchableWithoutFeedback, View } from 'react-native';
-import { createNativeStackNavigator } from "react-native-screens/native-stack"
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const App = () => {
- return <NavigationContainer>
-    <MyStack />
-  </NavigationContainer>
-}
-export default App
+  return (
+    <NavigationContainer>
+      <MyStack />
+    </NavigationContainer>
+  );
+};
+export default App;
 
-  const Home = () => {
-    const navigation = useNavigation()
-    const [open, setOpen] = useState(false)
+const Home = () => {
+  const navigation = useNavigation();
+  const [open, setOpen] = useState(false);
 
-    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Modal presentationStyle="pageSheet" animationType="slide" visible={open} >
-        <PinnedModalStack/>
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Modal presentationStyle="pageSheet" animationType="slide" visible={open}>
+        <PinnedModalStack />
       </Modal>
-      <TouchableWithoutFeedback onPress={() => navigation.navigate("PinnedModal")}>
+      <TouchableWithoutFeedback
+        onPress={() => navigation.navigate('PinnedModal')}>
         <Text>Go to pinned modal</Text>
       </TouchableWithoutFeedback>
       <TouchableWithoutFeedback onPress={() => setOpen(true)}>
         <Text>open react native modal</Text>
       </TouchableWithoutFeedback>
-     
     </View>
-  }
+  );
+};
 
-  const {Navigator: PinnedModalNavigator, Screen: PinnedModalScreen} = createNativeStackNavigator();
+const { Navigator: PinnedModalNavigator, Screen: PinnedModalScreen } =
+  createNativeStackNavigator();
 
- const PinnedModalStack = ({navigation}) => {
-   return <PinnedModalNavigator>
-   <PinnedModalScreen listeners={{
-     transitionStart: () => console.log("START"),
-     transitionEnd: () => console.log("END"),
-     dismiss:() => console.log("DISMISS")
-   }} name="PinnedModalScreen" component={ScreenWithPinnedBottom} options={{headerLeft: () => {
-     return <TouchableWithoutFeedback onPress={() => navigation.goBack()}><Text>close</Text></TouchableWithoutFeedback>
-    }}}/>
- </PinnedModalNavigator>
-  }
+const PinnedModalStack = ({ navigation }) => {
+  return (
+    <PinnedModalNavigator>
+      <PinnedModalScreen
+        listeners={{
+          transitionStart: () => console.log('START'),
+          transitionEnd: () => console.log('END'),
+          dismiss: () => console.log('DISMISS'),
+        }}
+        name="PinnedModalScreen"
+        component={ScreenWithPinnedBottom}
+        options={{
+          headerLeft: () => {
+            return (
+              <TouchableWithoutFeedback onPress={() => navigation.goBack()}>
+                <Text>close</Text>
+              </TouchableWithoutFeedback>
+            );
+          },
+        }}
+      />
+    </PinnedModalNavigator>
+  );
+};
 
-  const ScreenWithPinnedBottom = () => {
-    const navigation = useNavigation();
+const ScreenWithPinnedBottom = () => {
+  const navigation = useNavigation();
 
-    return <View style={{flex:1, alignItems:"center", top: 10}}>
+  return (
+    <View style={{ flex: 1, alignItems: 'center', top: 10 }}>
       <Text>Pull header upwards on iOS 13 device or higher</Text>
-      <Text>observe wobble and frame getting bigger (text is not longer centered) </Text>
-      <TouchableWithoutFeedback onPress={() => navigation.push("PinnedModal")}>
+      <Text>
+        observe wobble and frame getting bigger (text is not longer centered){' '}
+      </Text>
+      <TouchableWithoutFeedback onPress={() => navigation.push('PinnedModal')}>
         <Text>push another modal</Text>
       </TouchableWithoutFeedback>
 
-      <View style={{position: "absolute", height: 500, bottom:0, left:0, right:0, backgroundColor: "blue", alignItems:"center", justifyContent:"center"}}>
+      <View
+        style={{
+          position: 'absolute',
+          height: 500,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          backgroundColor: 'blue',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
         <Text>Wobble</Text>
       </View>
     </View>
-  }
-  
-  const {Navigator: MainNavigator, Screen: MainScreen} = createNativeStackNavigator();
+  );
+};
+
+const { Navigator: MainNavigator, Screen: MainScreen } =
+  createNativeStackNavigator();
 
-  function MyStack() {
-    return (
-      <MainNavigator initialRouteName={"Home"}>
-        <MainScreen name="Home" component={Home} />
-        <MainScreen name="PinnedModal" component={PinnedModalStack} options={{stackPresentation:"modal"}} />
-      </MainNavigator>
-    );
-  }
+function MyStack() {
+  return (
+    <MainNavigator initialRouteName={'Home'}>
+      <MainScreen name="Home" component={Home} />
+      <MainScreen
+        name="PinnedModal"
+        component={PinnedModalStack}
+        options={{ stackPresentation: 'modal' }}
+      />
+    </MainNavigator>
+  );
+}
diff --git a/FabricTestExample/src/Test726.js b/FabricTestExample/src/Test726.js
index 7f43990cde..f11b13695c 100644
--- a/FabricTestExample/src/Test726.js
+++ b/FabricTestExample/src/Test726.js
@@ -9,7 +9,8 @@ function TestScreen({ navigation }) {
       <Button
         title="PUSH ME"
         onPress={() => navigation.push('Test')}
-        style={styles.button} />
+        style={styles.button}
+      />
     </View>
   );
 }
@@ -29,15 +30,9 @@ export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator keyboardHandlingEnabled={false}>
-        <Stack.Screen
-          name="Home"
-          component={TestScreen}
-        />
-        <Stack.Screen
-          name="Test"
-          component={TestScreen2}
-        />
-    </Stack.Navigator>
+        <Stack.Screen name="Home" component={TestScreen} />
+        <Stack.Screen name="Test" component={TestScreen2} />
+      </Stack.Navigator>
     </NavigationContainer>
   );
 }
diff --git a/FabricTestExample/src/Test748.tsx b/FabricTestExample/src/Test748.tsx
index b4887c471a..350b1fbddf 100644
--- a/FabricTestExample/src/Test748.tsx
+++ b/FabricTestExample/src/Test748.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
-import {Button, ScrollView, View} from 'react-native';
-import {NavigationContainer, NavigationProp, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, ScrollView, View } from 'react-native';
+import {
+  NavigationContainer,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function HomeScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   return (
     <Button
       onPress={() => {
@@ -14,16 +22,27 @@ function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
   );
 }
 
-function DetailsScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
-
+function DetailsScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   const [visible, setVisible] = React.useState(true);
 
   return (
     <ScrollView>
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Button
           onPress={() => {
-            navigation.setOptions({headerRight: visible ? () => <View style={{width: 40, height: 40, backgroundColor: 'red'}} /> : () => null})
+            navigation.setOptions({
+              headerRight: visible
+                ? () => (
+                    <View
+                      style={{ width: 40, height: 40, backgroundColor: 'red' }}
+                    />
+                  )
+                : () => null,
+            });
             setVisible(!visible);
           }}
           title="Swap headerRight"
@@ -38,7 +57,7 @@ const RootStack = createNativeStackNavigator();
 function RootStackScreen() {
   return (
     <RootStack.Navigator>
-      <RootStack.Screen name="Home" component={HomeScreen}/>
+      <RootStack.Screen name="Home" component={HomeScreen} />
       <RootStack.Screen name="Details" component={DetailsScreen} />
     </RootStack.Navigator>
   );
diff --git a/FabricTestExample/src/Test750.js b/FabricTestExample/src/Test750.js
index 6e57e50ae7..c9dc1b705c 100644
--- a/FabricTestExample/src/Test750.js
+++ b/FabricTestExample/src/Test750.js
@@ -23,7 +23,11 @@ const Stack = createNativeStackNavigator();
 function StackNav() {
   return (
     <Stack.Navigator>
-      <Stack.Screen name="Screen1" component={Screen1} options={{ headerShown: true }} />
+      <Stack.Screen
+        name="Screen1"
+        component={Screen1}
+        options={{ headerShown: true }}
+      />
       <Stack.Screen name="Screen2" component={Screen2} />
     </Stack.Navigator>
   );
diff --git a/FabricTestExample/src/Test758.tsx b/FabricTestExample/src/Test758.tsx
index ea08d52ddb..ef9c09b290 100644
--- a/FabricTestExample/src/Test758.tsx
+++ b/FabricTestExample/src/Test758.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {Button, NativeSyntheticEvent, ScrollView} from 'react-native';
+import { Button, NativeSyntheticEvent, ScrollView } from 'react-native';
 import {
   NavigationContainer,
   NavigationProp,
@@ -9,7 +10,7 @@ import {
   createNativeStackNavigator,
   NativeStackScreenProps,
 } from 'react-native-screens/native-stack';
-import {SearchBarProps} from 'react-native-screens';
+import { SearchBarProps } from 'react-native-screens';
 
 const AppStack = createNativeStackNavigator();
 
@@ -28,7 +29,7 @@ export default function App(): JSX.Element {
   );
 }
 
-function First({navigation}: NativeStackScreenProps<ParamListBase>) {
+function First({ navigation }: NativeStackScreenProps<ParamListBase>) {
   React.useLayoutEffect(() => {
     navigation.setOptions({
       searchBar: searchBarOptions,
@@ -47,7 +48,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
     autoCapitalize: 'sentences',
     placeholder: 'Some text',
     cancelButtonText: 'Some text',
-    onChangeText: (e: NativeSyntheticEvent<{text: string}>) =>
+    onChangeText: (e: NativeSyntheticEvent<{ text: string }>) =>
       setSearch(e.nativeEvent.text),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),
     onSearchButtonPress: () => console.warn('Search button pressed'),
@@ -80,10 +81,8 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
         onPress={() => navigation.navigate('Second')}
       />
       {items
-        .filter(
-          (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1,
-        )
-        .map((item) => (
+        .filter(item => item.toLowerCase().indexOf(search.toLowerCase()) !== -1)
+        .map(item => (
           <Button
             title={item}
             key={item}
@@ -96,7 +95,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
   );
 }
 
-function Second({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function Second({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
   return (
     <ScrollView contentInsetAdjustmentBehavior="automatic">
       <Button
diff --git a/FabricTestExample/src/Test761.tsx b/FabricTestExample/src/Test761.tsx
index 18ab6dceb9..4a01719922 100644
--- a/FabricTestExample/src/Test761.tsx
+++ b/FabricTestExample/src/Test761.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 // import {createStackNavigator} from '@react-navigation/stack';
 
 const Stack = createNativeStackNavigator();
@@ -14,35 +17,44 @@ type SimpleStackParams = {
 export default function App(): JSX.Element {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions=
-      {{
-        stackAnimation: 'simple_push',
-        direction: 'ltr',
+      <Stack.Navigator
+        screenOptions={{
+          stackAnimation: 'simple_push',
+          direction: 'ltr',
         }}>
-        <Stack.Screen name="First" component={First}/>
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="First" component={First} />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}: {navigation: NativeStackNavigationProp<SimpleStackParams, 'First'>}) {
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<SimpleStackParams, 'First'>;
+}) {
   return (
-    <View style={{backgroundColor: 'red', flex: 1}}>
-      <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+    <View style={{ backgroundColor: 'red', flex: 1 }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
     </View>
   );
 }
 
-function Second({navigation}: {navigation: NativeStackNavigationProp<SimpleStackParams, 'Second'>}) {
-
+function Second({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<SimpleStackParams, 'Second'>;
+}) {
   return (
-    <View style={{backgroundColor: 'yellow', flex: 1}}>
-      <Button title="Tap me for first screen" onPress={() => navigation.navigate('First')} />
+    <View style={{ backgroundColor: 'yellow', flex: 1 }}>
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.navigate('First')}
+      />
     </View>
   );
 }
-
diff --git a/FabricTestExample/src/Test779.tsx b/FabricTestExample/src/Test779.tsx
index e5f4ba4aa8..230112fff2 100644
--- a/FabricTestExample/src/Test779.tsx
+++ b/FabricTestExample/src/Test779.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
-import {Button, ScrollView, View, SafeAreaView} from 'react-native';
-import {NavigationContainer, NavigationProp, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, ScrollView, View, SafeAreaView } from 'react-native';
+import {
+  NavigationContainer,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function HomeScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   return (
     <SafeAreaView>
       <Button
@@ -16,13 +24,17 @@ function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
   );
 }
 
-function DetailsScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function DetailsScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   return (
-    <ScrollView style={{backgroundColor: 'red'}}>
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <ScrollView style={{ backgroundColor: 'red' }}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Button
           onPress={() => {
-            navigation.goBack()
+            navigation.goBack();
           }}
           title="Go back"
         />
@@ -37,13 +49,17 @@ function DetailsScreen({navigation}: {navigation: NavigationProp<ParamListBase>}
   );
 }
 
-function ProfileScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function ProfileScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   return (
-    <ScrollView style={{backgroundColor: 'blue'}}>
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <ScrollView style={{ backgroundColor: 'blue' }}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Button
           onPress={() => {
-            navigation.goBack()
+            navigation.goBack();
           }}
           title="Go back"
         />
@@ -56,11 +72,18 @@ const RootStack = createNativeStackNavigator();
 
 function RootStackScreen() {
   return (
-    <RootStack.Navigator 
-      screenOptions={{stackAnimation: "slide_from_bottom", gestureEnabled: false, headerShown: false}}
-    >
-      <RootStack.Screen name="Home" component={HomeScreen}/>
-      <RootStack.Screen name="Details" component={DetailsScreen} options={{headerShown: true}}/>
+    <RootStack.Navigator
+      screenOptions={{
+        stackAnimation: 'slide_from_bottom',
+        gestureEnabled: false,
+        headerShown: false,
+      }}>
+      <RootStack.Screen name="Home" component={HomeScreen} />
+      <RootStack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{ headerShown: true }}
+      />
       <RootStack.Screen name="Profile" component={ProfileScreen} />
     </RootStack.Navigator>
   );
diff --git a/FabricTestExample/src/Test780.tsx b/FabricTestExample/src/Test780.tsx
index 0e92503360..d55c780071 100644
--- a/FabricTestExample/src/Test780.tsx
+++ b/FabricTestExample/src/Test780.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Button,
@@ -7,7 +7,7 @@ import {
   StyleSheet,
   TouchableHighlight,
 } from 'react-native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 // import {createStackNavigator} from '@react-navigation/stack';
 import {
   NavigationContainer,
diff --git a/FabricTestExample/src/Test791.tsx b/FabricTestExample/src/Test791.tsx
index d9e7cd7345..f5f504fd08 100644
--- a/FabricTestExample/src/Test791.tsx
+++ b/FabricTestExample/src/Test791.tsx
@@ -1,41 +1,55 @@
 import React from 'react';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
-import {StyleSheet, Button, View, Text} from 'react-native';
-import {createNativeStackNavigator, NativeStackScreenProps} from 'react-native-screens/native-stack';
-
-const MainScreen = ({navigation}: NativeStackScreenProps<ParamListBase>) => {
+import { StyleSheet, Button, View, Text } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from 'react-native-screens/native-stack';
 
+const MainScreen = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
   return (
     <View style={styles.screen}>
-      <Button onPress={() => {
-      navigation.push('Push');
-      setTimeout(() => navigation.push('Push'), 10);
-      setTimeout(() => navigation.push('Push'), 20);
-      setTimeout(() => navigation.push('Push'), 30);
-      setTimeout(() => navigation.push('Push'), 40);
-      }} title="Click this button to see the crash if native changes not applied" />
-            <Button onPress={() => {
-      navigation.push('Modal');
-      }} title="Push modal" />
+      <Button
+        onPress={() => {
+          navigation.push('Push');
+          setTimeout(() => navigation.push('Push'), 10);
+          setTimeout(() => navigation.push('Push'), 20);
+          setTimeout(() => navigation.push('Push'), 30);
+          setTimeout(() => navigation.push('Push'), 40);
+        }}
+        title="Click this button to see the crash if native changes not applied"
+      />
+      <Button
+        onPress={() => {
+          navigation.push('Modal');
+        }}
+        title="Push modal"
+      />
       <Text>Issue 791</Text>
     </View>
-  )
-}
+  );
+};
 
-const PushScreen = ({navigation}: NativeStackScreenProps<ParamListBase>) => (
+const PushScreen = ({ navigation }: NativeStackScreenProps<ParamListBase>) => (
   <View style={styles.screen}>
-    <Button onPress={() => {
-      navigation.push('Push');
-      setTimeout(() => navigation.push('Push'), 10);
-      setTimeout(() => navigation.push('Push'), 20);
-      setTimeout(() => navigation.push('Push'), 30);
-      setTimeout(() => navigation.push('Push'), 40);
-      }} title="Click this button to see the crash if native changes not applied" />
-      <Button onPress={() => {
-      navigation.pop();
-      setTimeout(() => navigation.pop(), 10);
-      setTimeout(() => navigation.pop(), 20);
-      }} title="Click this button to pop" />
+    <Button
+      onPress={() => {
+        navigation.push('Push');
+        setTimeout(() => navigation.push('Push'), 10);
+        setTimeout(() => navigation.push('Push'), 20);
+        setTimeout(() => navigation.push('Push'), 30);
+        setTimeout(() => navigation.push('Push'), 40);
+      }}
+      title="Click this button to see the crash if native changes not applied"
+    />
+    <Button
+      onPress={() => {
+        navigation.pop();
+        setTimeout(() => navigation.pop(), 10);
+        setTimeout(() => navigation.pop(), 20);
+      }}
+      title="Click this button to pop"
+    />
   </View>
 );
 
@@ -44,18 +58,12 @@ const Stack = createNativeStackNavigator();
 const App = () => (
   <NavigationContainer>
     <Stack.Navigator>
-      <Stack.Screen
-        name="Main"
-        component={MainScreen}
-      />
-      <Stack.Screen
-        name="Push"
-        component={PushScreen}
-      />
+      <Stack.Screen name="Main" component={MainScreen} />
+      <Stack.Screen name="Push" component={PushScreen} />
       <Stack.Screen
         name="Modal"
         component={PushScreen}
-        options={{ stackPresentation: 'modal'}}
+        options={{ stackPresentation: 'modal' }}
       />
     </Stack.Navigator>
   </NavigationContainer>
diff --git a/FabricTestExample/src/Test800.tsx b/FabricTestExample/src/Test800.tsx
index 9fdd3aad5c..78a9569c1b 100644
--- a/FabricTestExample/src/Test800.tsx
+++ b/FabricTestExample/src/Test800.tsx
@@ -1,7 +1,6 @@
-/* eslint-disable react/display-name */
 import * as React from 'react';
-import {Button, StyleSheet, View, Text} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, StyleSheet, View, Text } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -51,18 +50,21 @@ function Second({
   return (
     <>
       <Button
-      title="Tap me for the first screen"
-      onPress={() => navigation.navigate('First')} />
+        title="Tap me for the first screen"
+        onPress={() => navigation.navigate('First')}
+      />
       <Text>{text}</Text>
       <Button
         title="Change text"
-        onPress={() => setText(Math.random().toString())} />
+        onPress={() => setText(Math.random().toString())}
+      />
       <Button
         title="Hide header"
         onPress={() => {
-          navigation.setOptions({headerShown: hidden});
+          navigation.setOptions({ headerShown: hidden });
           setHidden(!hidden);
-      }}/>
+        }}
+      />
     </>
   );
 }
diff --git a/FabricTestExample/src/Test817.tsx b/FabricTestExample/src/Test817.tsx
index a352ad59a8..61e9479a9b 100644
--- a/FabricTestExample/src/Test817.tsx
+++ b/FabricTestExample/src/Test817.tsx
@@ -1,9 +1,11 @@
-/* eslint-disable react/display-name */
-import React from "react";
-import { View, Text, Button } from "react-native";
+import React from 'react';
+import { View, Text, Button } from 'react-native';
 
-import { NavigationContainer, ParamListBase } from "@react-navigation/native";
-import { createNativeStackNavigator, NativeStackNavigationProp } from "react-native-screens/native-stack";
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -12,13 +14,9 @@ const App = (): JSX.Element => {
     <NavigationContainer>
       <Stack.Navigator
         screenOptions={{
-          stackAnimation: "slide_from_right",
-        }}
-      >
-        <Stack.Screen
-          name="Home"
-          component={Home}
-        />
+          stackAnimation: 'slide_from_right',
+        }}>
+        <Stack.Screen name="Home" component={Home} />
         <Stack.Screen
           name="Notifications"
           component={Notifications}
@@ -32,15 +30,19 @@ const App = (): JSX.Element => {
   );
 };
 
-function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Home({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
     <View>
       <Button
         title="Navigate"
-        onPress={() => navigation.navigate("Notifications")}
+        onPress={() => navigation.navigate('Notifications')}
       />
     </View>
-  )
+  );
 }
 
 function Notifications() {
diff --git a/FabricTestExample/src/Test830.tsx b/FabricTestExample/src/Test830.tsx
index 767d593cc3..bca964e5c9 100644
--- a/FabricTestExample/src/Test830.tsx
+++ b/FabricTestExample/src/Test830.tsx
@@ -1,13 +1,14 @@
-import React, {useLayoutEffect} from 'react';
-import {Button, View} from 'react-native';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useLayoutEffect } from 'react';
+import { Button, View } from 'react-native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {NavigationContainer, RouteProp} from '@react-navigation/native';
+import { NavigationContainer, RouteProp } from '@react-navigation/native';
 
 type StackParamList = {
-  Details: {index: number};
+  Details: { index: number };
 };
 interface DetailsScreenProps {
   navigation: NativeStackNavigationProp<StackParamList, 'Details'>;
@@ -30,7 +31,7 @@ const DetailsScreen = ({
     <View>
       <Button
         title={`More details ${index}`}
-        onPress={() => navigation.push('Details', {index: index + 1})}
+        onPress={() => navigation.push('Details', { index: index + 1 })}
       />
     </View>
   );
diff --git a/FabricTestExample/src/Test831.tsx b/FabricTestExample/src/Test831.tsx
index 948c6d695b..b833c299e6 100644
--- a/FabricTestExample/src/Test831.tsx
+++ b/FabricTestExample/src/Test831.tsx
@@ -1,41 +1,46 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const Stack = createNativeStackNavigator();
 
 export default function App(): JSX.Element {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{direction: 'rtl', headerShown: false}}>
+      <Stack.Navigator screenOptions={{ direction: 'rtl', headerShown: false }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}: Props) {
+function First({ navigation }: Props) {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}} >
-      <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
     </View>
   );
 }
 
-function Second({navigation}: Props) {
+function Second({ navigation }: Props) {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}} >
-      <Button title="Tap me for first screen" onPress={() => navigation.navigate('First')} />
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.navigate('First')}
+      />
     </View>
   );
 }
-
diff --git a/FabricTestExample/src/Test844.tsx b/FabricTestExample/src/Test844.tsx
index 875e7b4fa5..9f96529a3a 100644
--- a/FabricTestExample/src/Test844.tsx
+++ b/FabricTestExample/src/Test844.tsx
@@ -1,6 +1,6 @@
-import React, {useEffect, useRef} from 'react';
-import {Text, View, Button, StyleSheet} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React, { useEffect, useRef } from 'react';
+import { Text, View, Button, StyleSheet } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -21,7 +21,7 @@ type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
 };
 
-function Main({navigation}: Props) {
+function Main({ navigation }: Props) {
   const times = useRef(8);
   const id = useRef<any>(0);
 
@@ -48,7 +48,7 @@ function Main({navigation}: Props) {
   );
 }
 
-const Modal = ({navigation}: Props) => (
+const Modal = ({ navigation }: Props) => (
   <View style={styles.container}>
     <Button title="back" onPress={() => navigation.goBack()} />
   </View>
@@ -58,7 +58,7 @@ const ModalStack = createNativeStackNavigator();
 
 const ModalNavigator = () => (
   <ModalStack.Navigator
-    screenOptions={{...defaultOptions, headerTitle: 'modal'}}>
+    screenOptions={{ ...defaultOptions, headerTitle: 'modal' }}>
     <ModalStack.Screen
       name="modal"
       component={Modal}
diff --git a/FabricTestExample/src/Test852.tsx b/FabricTestExample/src/Test852.tsx
index 8bc52cc0d8..b8358e520a 100644
--- a/FabricTestExample/src/Test852.tsx
+++ b/FabricTestExample/src/Test852.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -48,8 +48,8 @@ export default function App(): JSX.Element {
   );
 }
 
-const First = ({navigation}: Props) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
+const First = ({ navigation }: Props) => (
+  <View style={{ flex: 1, justifyContent: 'center' }}>
     <Button
       title="Tap me for second screen"
       onPress={() => navigation.navigate('Second')}
@@ -57,8 +57,8 @@ const First = ({navigation}: Props) => (
   </View>
 );
 
-const Second = ({navigation}: Props) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
+const Second = ({ navigation }: Props) => (
+  <View style={{ flex: 1, justifyContent: 'center' }}>
     <Button
       title="Tap me for third screen"
       onPress={() => navigation.navigate('Third')}
@@ -66,8 +66,8 @@ const Second = ({navigation}: Props) => (
   </View>
 );
 
-const Third = ({navigation}: Props) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
+const Third = ({ navigation }: Props) => (
+  <View style={{ flex: 1, justifyContent: 'center' }}>
     <Button
       title="Tap me for first screen"
       onPress={() => navigation.navigate('First')}
diff --git a/FabricTestExample/src/Test860.tsx b/FabricTestExample/src/Test860.tsx
index 017b493033..38e9d69c79 100644
--- a/FabricTestExample/src/Test860.tsx
+++ b/FabricTestExample/src/Test860.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {ScrollView, Button, Text} from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { ScrollView, Button, Text } from 'react-native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
   NativeStackNavigationOptions,
 } from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 // import {createStackNavigator} from '@react-navigation/stack';
 
 const Stack = createNativeStackNavigator();
@@ -99,17 +99,20 @@ function Home({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   const [statusBarColor, setStatusBarColor] = React.useState('mediumseagreen');
-  const [statusBarStyle, setStatusBarStyle] = React.useState<NativeStackNavigationOptions['statusBarStyle']>('dark');
+  const [statusBarStyle, setStatusBarStyle] =
+    React.useState<NativeStackNavigationOptions['statusBarStyle']>('dark');
   const [statusBarHidden, setStatusBarHidden] = React.useState(false);
   const [statusBarTranslucent, setStatusBarTranslucent] = React.useState(true);
-  const [statusBarAnimation, setStatusBarAnimation] = React.useState<NativeStackNavigationOptions['statusBarAnimation']>('slide');
+  const [statusBarAnimation, setStatusBarAnimation] =
+    React.useState<NativeStackNavigationOptions['statusBarAnimation']>('slide');
   const [navigationBarColor, setNavigationBarColor] = React.useState('green');
   const [navigationBarHidden, setNavigationBarHidden] = React.useState(false);
-  const [headerTopInsetEnabled, setHeaderTopInsetEnabled] = React.useState(false);
+  const [headerTopInsetEnabled, setHeaderTopInsetEnabled] =
+    React.useState(false);
 
   return (
     <ScrollView
-      style={{backgroundColor: 'yellow'}}
+      style={{ backgroundColor: 'yellow' }}
       contentInsetAdjustmentBehavior="automatic">
       <Button
         title="NestedNavigator"
diff --git a/FabricTestExample/src/Test861.tsx b/FabricTestExample/src/Test861.tsx
index af699d2c89..0b637b566e 100644
--- a/FabricTestExample/src/Test861.tsx
+++ b/FabricTestExample/src/Test861.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {Button, SafeAreaView} from 'react-native';
+import { Button, SafeAreaView } from 'react-native';
 
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -31,7 +31,7 @@ const App = (): JSX.Element => {
   );
 };
 
-const First = ({navigation}: Props) => (
+const First = ({ navigation }: Props) => (
   <SafeAreaView>
     <Button
       title="Go to second screen"
@@ -40,8 +40,8 @@ const First = ({navigation}: Props) => (
   </SafeAreaView>
 );
 
-const Second = ({navigation}: Props) => (
-  <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
+const Second = ({ navigation }: Props) => (
+  <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
     <Button title="Go back" onPress={() => navigation.goBack()} />
   </SafeAreaView>
 );
diff --git a/FabricTestExample/src/Test865.tsx b/FabricTestExample/src/Test865.tsx
index 93e375623d..67545d8517 100644
--- a/FabricTestExample/src/Test865.tsx
+++ b/FabricTestExample/src/Test865.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {View, Text, Button} from 'react-native';
+import { View, Text, Button } from 'react-native';
 
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -14,8 +14,8 @@ const First = ({
 }: {
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
-    <Text style={{paddingBottom: 24, textAlign: 'center'}}>Screen 1</Text>
+  <View style={{ flex: 1, justifyContent: 'center' }}>
+    <Text style={{ paddingBottom: 24, textAlign: 'center' }}>Screen 1</Text>
     <Button
       title="PUSH TO SCREEN 2"
       onPress={() => navigation.push('Screen2')}
@@ -28,8 +28,8 @@ const Second = ({
 }: {
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
-    <Text style={{paddingBottom: 24, textAlign: 'center'}}>Screen 2</Text>
+  <View style={{ flex: 1, justifyContent: 'center' }}>
+    <Text style={{ paddingBottom: 24, textAlign: 'center' }}>Screen 2</Text>
     <Button
       title="PUSH TO SCREEN 3"
       onPress={() => navigation.push('Screen3')}
@@ -42,13 +42,13 @@ const Third = ({
 }: {
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
-    <Text style={{paddingBottom: 24, textAlign: 'center'}}>Screen 3</Text>
+  <View style={{ flex: 1, justifyContent: 'center' }}>
+    <Text style={{ paddingBottom: 24, textAlign: 'center' }}>Screen 3</Text>
     <Button
       title="RESET TO SCREEN 1 WITH INDEX OF 0"
       onPress={() =>
         navigation.reset({
-          routes: [{name: 'Screen1'}],
+          routes: [{ name: 'Screen1' }],
           index: 0,
         })
       }
diff --git a/FabricTestExample/src/Test881.tsx b/FabricTestExample/src/Test881.tsx
index fe4146d787..9bd01569a2 100644
--- a/FabricTestExample/src/Test881.tsx
+++ b/FabricTestExample/src/Test881.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {View} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 
-const View1 = () => <View style={{flex: 1, backgroundColor: 'red'}} />;
-const View2 = () => <View style={{flex: 1, backgroundColor: 'blue'}} />;
-const View3 = () => <View style={{flex: 1, backgroundColor: 'yellow'}} />;
+const View1 = () => <View style={{ flex: 1, backgroundColor: 'red' }} />;
+const View2 = () => <View style={{ flex: 1, backgroundColor: 'blue' }} />;
+const View3 = () => <View style={{ flex: 1, backgroundColor: 'yellow' }} />;
 
 const Stack1 = createNativeStackNavigator();
 const Stack2 = createNativeStackNavigator();
diff --git a/FabricTestExample/src/Test887.tsx b/FabricTestExample/src/Test887.tsx
index b78ab1c020..04b56efce2 100644
--- a/FabricTestExample/src/Test887.tsx
+++ b/FabricTestExample/src/Test887.tsx
@@ -9,12 +9,12 @@ import {
   Dimensions,
   SafeAreaView,
 } from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {useTransitionProgress} from 'react-native-screens';
+import { useTransitionProgress } from 'react-native-screens';
 import {
   useReanimatedTransitionProgress,
   ReanimatedScreenProvider,
@@ -23,7 +23,7 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
-import {createStackNavigator} from '@react-navigation/stack';
+import { createStackNavigator } from '@react-navigation/stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -59,7 +59,7 @@ export default function App(): JSX.Element {
           <Stack.Screen
             name="Third"
             component={Dialog}
-            options={{stackPresentation: 'modal'}}
+            options={{ stackPresentation: 'modal' }}
           />
         </Stack.Navigator>
       </NavigationContainer>
@@ -84,7 +84,7 @@ function SiblingView() {
     };
   });
 
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
 
   const opacity = progress.interpolate({
     inputRange: [0, 0.5, 1],
@@ -96,7 +96,7 @@ function SiblingView() {
     <>
       <Animated.View style={reaStyle} />
       <RNAnimated.View
-        style={{opacity, height: 50, width: '100%', backgroundColor: 'green'}}
+        style={{ opacity, height: 50, width: '100%', backgroundColor: 'green' }}
       />
     </>
   );
@@ -123,7 +123,7 @@ function First({
     };
   });
 
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
 
   const opacity = progress.interpolate({
     inputRange: [0, 0.5, 1],
@@ -132,7 +132,7 @@ function First({
   });
 
   return (
-    <View style={{backgroundColor: 'red', flex: 1}}>
+    <View style={{ backgroundColor: 'red', flex: 1 }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.navigate('Second')}
@@ -145,7 +145,7 @@ function First({
       <SiblingView />
       <SiblingView />
       <RNAnimated.View
-        style={{opacity, height: 50, width: '100%', backgroundColor: 'green'}}
+        style={{ opacity, height: 50, width: '100%', backgroundColor: 'green' }}
       />
     </View>
   );
@@ -157,7 +157,7 @@ function Second({
   navigation: NativeStackNavigationProp<SimpleStackParams, 'Second'>;
 }) {
   // using Animated.Value with the progress from context
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
 
   const opacity = progress.interpolate({
     inputRange: [0, 0.5, 1],
@@ -177,7 +177,7 @@ function Second({
   // })
 
   return (
-    <View style={{backgroundColor: 'yellow', flex: 1}}>
+    <View style={{ backgroundColor: 'yellow', flex: 1 }}>
       <Button
         title="Tap me for first screen"
         onPress={() => navigation.navigate('First')}
@@ -191,7 +191,7 @@ function Second({
         onPress={() => navigation.push('Third')}
       />
       <RNAnimated.View
-        style={{opacity, height: 50, backgroundColor: 'green'}}
+        style={{ opacity, height: 50, backgroundColor: 'green' }}
       />
     </View>
   );
@@ -203,7 +203,7 @@ const Dialog = ({
   navigation: NativeStackNavigationProp<SimpleStackParams, 'Third'>;
 }): JSX.Element => {
   // using Animated with the progress
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
   const reaProgress = useReanimatedTransitionProgress();
   const sv = useDerivedValue(
     () =>
@@ -239,7 +239,7 @@ const Dialog = ({
         />
         <Animated.View style={reaStyle} />
         <TouchableOpacity
-          style={{...styles.button}}
+          style={{ ...styles.button }}
           onPress={() => navigation.goBack()}>
           <Text style={styles.buttonText}>Please no.</Text>
         </TouchableOpacity>
diff --git a/FabricTestExample/src/Test898.tsx b/FabricTestExample/src/Test898.tsx
index 1db1b428ab..cc2270a7eb 100644
--- a/FabricTestExample/src/Test898.tsx
+++ b/FabricTestExample/src/Test898.tsx
@@ -11,23 +11,19 @@ import Animated, {
   measure,
   runOnJS,
 } from 'react-native-reanimated';
-import {
-  Dimensions,
-  StyleSheet,
-  View,
-  Image,
-  Platform,
-} from 'react-native';
+import { Dimensions, StyleSheet, View, Image, Platform } from 'react-native';
 import {
   ScrollView,
   PanGestureHandler,
   TapGestureHandler,
   TapGestureHandlerGestureEvent,
 } from 'react-native-gesture-handler';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {NavigationContainer} from '@react-navigation/native';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
-
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 const AnimatedImage = Animated.createAnimatedComponent(Image);
 
@@ -58,7 +54,7 @@ type ActiveExampleImage = ActiveExampleImageProperties & {
 type onItemPressFn = <T>(
   animatedRef: RefObject<T>,
   item: ExampleImage,
-  svs: ActiveExampleImageProperties
+  svs: ActiveExampleImageProperties,
 ) => void;
 function ImageList({
   images,
@@ -167,14 +163,14 @@ function ImageTransition({
 
   const targetX = useSharedValue(0);
   const targetY = useSharedValue(
-    (dimensions.height - targetHeight) / 2 - headerHeight
+    (dimensions.height - targetHeight) / 2 - headerHeight,
   );
 
   const translateX = useSharedValue(0);
   const translateY = useSharedValue(0);
 
   const onPan = useAnimatedGestureHandler({
-    onActive: (event) => {
+    onActive: event => {
       translateX.value = event.translationX;
       translateY.value = event.translationY;
 
@@ -182,14 +178,14 @@ function ImageTransition({
         translateY.value,
         [-200, 0, 200],
         [0.65, 1, 0.65],
-        Extrapolate.CLAMP
+        Extrapolate.CLAMP,
       );
 
       backdropOpacity.value = interpolate(
         translateY.value,
         [-100, 0, 100],
         [0, 1, 0],
-        Extrapolate.CLAMP
+        Extrapolate.CLAMP,
       );
     },
 
@@ -209,7 +205,7 @@ function ImageTransition({
             },
             () => {
               runOnJS(onClose)();
-            }
+            },
           );
         });
 
@@ -286,14 +282,14 @@ const images: ExampleImage[] = Array.from({ length: 30 }, (_, index) => {
 
 function LightboxExample(): React.ReactElement {
   const [activeImage, setActiveImage] = useState<ActiveExampleImage | null>(
-    null
+    null,
   );
 
   function onItemPress(
     // @ts-ignore: FIXME AnimatedImage type
     animatedRef: RefObject<AnimatedImage>,
     item: ExampleImage,
-    svs: ActiveExampleImageProperties
+    svs: ActiveExampleImageProperties,
   ) {
     setActiveImage({
       animatedRef,
@@ -341,7 +337,7 @@ const styles = StyleSheet.create({
 const Stack = createNativeStackNavigator();
 
 export default function App() {
-  return(
+  return (
     <SafeAreaProvider>
       <NavigationContainer>
         <Stack.Navigator>
@@ -349,5 +345,5 @@ export default function App() {
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaProvider>
-  )
+  );
 }
diff --git a/FabricTestExample/src/Test913.tsx b/FabricTestExample/src/Test913.tsx
index 036555dc42..8945c8b751 100644
--- a/FabricTestExample/src/Test913.tsx
+++ b/FabricTestExample/src/Test913.tsx
@@ -1,28 +1,31 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { View, Text } from 'react-native';
 
-const BottomTab = createBottomTabNavigator()
-const Tab1Stack = createStackNavigator()
+const BottomTab = createBottomTabNavigator();
+const Tab1Stack = createStackNavigator();
 
 const CastScreen = () => (
-  <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
-    <Text style={{marginBottom:20, textAlign:"center"}}>Add logging in `onDetachedFromWindow` in child Screen to see that method triggered twice without the changes</Text>
-    <Text style={{position:"absolute", bottom:0, alignSelf:"flex-end"}}>↓touch Tab2↓</Text>
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Text style={{ marginBottom: 20, textAlign: 'center' }}>
+      Add logging in `onDetachedFromWindow` in child Screen to see that method
+      triggered twice without the changes
+    </Text>
+    <Text style={{ position: 'absolute', bottom: 0, alignSelf: 'flex-end' }}>
+      ↓touch Tab2↓
+    </Text>
   </View>
-)
+);
 
-const Tab2Screen = () => (
-  <View />
-)
+const Tab2Screen = () => <View />;
 
 const Tab1StackNavigator = () => (
   <Tab1Stack.Navigator initialRouteName="CastScreen">
     <Tab1Stack.Screen name="CastScreen" component={CastScreen} />
   </Tab1Stack.Navigator>
-)
+);
 
 const App = () => (
   <NavigationContainer>
@@ -33,4 +36,4 @@ const App = () => (
   </NavigationContainer>
 );
 
- export default App;
+export default App;
diff --git a/FabricTestExample/src/Test999.tsx b/FabricTestExample/src/Test999.tsx
index b1378ab120..e4f7f44350 100644
--- a/FabricTestExample/src/Test999.tsx
+++ b/FabricTestExample/src/Test999.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -9,11 +12,15 @@ export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen name="First" component={First} options={{replaceAnimation: 'push'}}/>
+        <Stack.Screen
+          name="First"
+          component={First}
+          options={{ replaceAnimation: 'push' }}
+        />
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{replaceAnimation: 'pop'}}
+          options={{ replaceAnimation: 'pop' }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -26,8 +33,10 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.replace('Second')} />
-
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.replace('Second')}
+    />
   );
 }
 
@@ -37,7 +46,9 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.replace('First')} />
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.replace('First')}
+    />
   );
 }
-
diff --git a/FabricTestExample/src/TestFreeze.tsx b/FabricTestExample/src/TestFreeze.tsx
index cff3b757d4..281537a542 100644
--- a/FabricTestExample/src/TestFreeze.tsx
+++ b/FabricTestExample/src/TestFreeze.tsx
@@ -1,6 +1,6 @@
-import React, {useState, useEffect} from 'react';
-import {View, Text, Button, ScrollView} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React, { useState, useEffect } from 'react';
+import { View, Text, Button, ScrollView } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 // import {createStackNavigator} from '@react-navigation/stack';
 // import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {
@@ -33,7 +33,7 @@ function HomeScreen({
 }) {
   const value = useValue();
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen {value}</Text>
       <Button
         title="Go to Details"
@@ -53,13 +53,13 @@ function DetailsScreen({
   console.log('render', value);
   return (
     <ScrollView>
-      <View style={{height: 400}} />
-      <Text style={{alignSelf: 'center'}}>Details Screen {value}</Text>
+      <View style={{ height: 400 }} />
+      <Text style={{ alignSelf: 'center' }}>Details Screen {value}</Text>
       <Button
         title="Go to Details"
         onPress={() => navigation.push('Details')}
       />
-      <View style={{height: 800}} />
+      <View style={{ height: 800 }} />
     </ScrollView>
   );
 }
@@ -71,7 +71,7 @@ function App() {
     let timer = 0;
     const interval = setInterval(() => {
       timer = timer + 1;
-      store.forEach((dispatch) => dispatch(timer));
+      store.forEach(dispatch => dispatch(timer));
     }, 3000);
     return () => clearInterval(interval);
   }, []);
diff --git a/TestsExample/.eslintrc.js b/TestsExample/.eslintrc.js
index 187894b6af..cfc90f7103 100644
--- a/TestsExample/.eslintrc.js
+++ b/TestsExample/.eslintrc.js
@@ -1,4 +1,12 @@
 module.exports = {
   root: true,
   extends: '@react-native',
+  overrides: [
+    {
+      files: ['*.tsx', '*.js'],
+      rules: {
+        'react-native/no-inline-styles': 'off',
+      },
+    },
+  ],
 };
diff --git a/TestsExample/.prettierrc.js b/TestsExample/.prettierrc.js
index 2b540746a7..2ae7b381ed 100644
--- a/TestsExample/.prettierrc.js
+++ b/TestsExample/.prettierrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   arrowParens: 'avoid',
   bracketSameLine: true,
-  bracketSpacing: false,
+  bracketSpacing: true,
   singleQuote: true,
   trailingComma: 'all',
 };
diff --git a/TestsExample/App.js b/TestsExample/App.js
index 9c1e0c5907..ab909dfec5 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 
-import {enableFreeze} from 'react-native-screens';
+import { enableFreeze } from 'react-native-screens';
 
 import Test42 from './src/Test42';
 import Test111 from './src/Test111';
diff --git a/TestsExample/__tests__/App.test.tsx b/TestsExample/__tests__/App.test.tsx
index 3413ac1c40..e8af277008 100644
--- a/TestsExample/__tests__/App.test.tsx
+++ b/TestsExample/__tests__/App.test.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import App from '../App';
 
 // Note: import explicitly to use the types shiped with jest.
-import {it} from '@jest/globals';
+import { it } from '@jest/globals';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
diff --git a/TestsExample/index.js b/TestsExample/index.js
index dce9c859a4..d5ce57df93 100644
--- a/TestsExample/index.js
+++ b/TestsExample/index.js
@@ -1,6 +1,6 @@
 import 'react-native-gesture-handler';
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/TestsExample/metro.config.js b/TestsExample/metro.config.js
index 35c83a5f5c..008c466db1 100644
--- a/TestsExample/metro.config.js
+++ b/TestsExample/metro.config.js
@@ -23,8 +23,7 @@ module.exports = {
   resolver: {
     blacklistRE: exclusionList(
       modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
+        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
       ),
     ),
 
diff --git a/TestsExample/src/Test1017.tsx b/TestsExample/src/Test1017.tsx
index f297170fe4..486aac64dc 100644
--- a/TestsExample/src/Test1017.tsx
+++ b/TestsExample/src/Test1017.tsx
@@ -1,13 +1,13 @@
-import {NavigationContainer, RouteProp} from '@react-navigation/native';
+import { NavigationContainer, RouteProp } from '@react-navigation/native';
 import {
   createStackNavigator,
   StackNavigationProp,
   TransitionPresets,
 } from '@react-navigation/stack';
 import React from 'react';
-import {Alert, LogBox} from 'react-native';
-import {StyleSheet, Text, View, FlatList, Pressable} from 'react-native';
-import {ScrollView} from 'react-native-gesture-handler';
+import { Alert, LogBox } from 'react-native';
+import { StyleSheet, Text, View, FlatList, Pressable } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   Header,
@@ -36,7 +36,7 @@ LogBox.ignoreLogs([
 
 const Stack = createStackNavigator();
 
-const dataset = Array.from<unknown, DataItem>({length: 100}, (_, i) => ({
+const dataset = Array.from<unknown, DataItem>({ length: 100 }, (_, i) => ({
   title: `Title ${i}`,
   value: i,
 }));
@@ -44,7 +44,7 @@ const dataset = Array.from<unknown, DataItem>({length: 100}, (_, i) => ({
 const Screen: React.FC<{
   route: RouteProp<RootStackParamList, any>;
   navigation: StackNavigationProp<RootStackParamList, any>;
-}> = ({route, navigation}) => {
+}> = ({ route, navigation }) => {
   for (let i = 0; i < 10 ** 3; i++) {}
   const isSecondScreen = route.name === Route.SecondScreen;
 
@@ -58,7 +58,7 @@ const Screen: React.FC<{
 
   const renderItem = (item: DataItem) => (
     <Pressable
-      android_ripple={{color: Colors.light}}
+      android_ripple={{ color: Colors.light }}
       style={styles.listItemContainer}
       onPress={handleItemPress(item)}>
       <View style={styles.listItemContentWrapper}>
@@ -75,8 +75,8 @@ const Screen: React.FC<{
     <ScrollView>
       <FlatList
         data={dataset}
-        keyExtractor={(item) => item.value.toString()}
-        renderItem={({item}) => renderItem(item)}
+        keyExtractor={item => item.value.toString()}
+        renderItem={({ item }) => renderItem(item)}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
         ListHeaderComponent={!isSecondScreen && Header}
         ListHeaderComponentStyle={styles.headerWrapper}
@@ -91,16 +91,17 @@ const Screen: React.FC<{
 const App: React.FC = () => {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{...TransitionPresets.SlideFromRightIOS}}>
+      <Stack.Navigator
+        screenOptions={{ ...TransitionPresets.SlideFromRightIOS }}>
         <Stack.Screen
           name={Route.FirstScreen}
           component={Screen}
-          options={{title: 'Sample List'}}
+          options={{ title: 'Sample List' }}
         />
         <Stack.Screen
           name={Route.SecondScreen}
           component={Screen}
-          options={{title: 'Sample List 2'}}
+          options={{ title: 'Sample List 2' }}
         />
       </Stack.Navigator>
     </NavigationContainer>
diff --git a/TestsExample/src/Test1031.tsx b/TestsExample/src/Test1031.tsx
index 74a874dfc0..cb9e7c3a8d 100644
--- a/TestsExample/src/Test1031.tsx
+++ b/TestsExample/src/Test1031.tsx
@@ -1,36 +1,50 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp, useHeaderHeight} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+  useHeaderHeight,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{stackPresentation: 'formSheet', headerShown: false}}>
+      <Stack.Navigator
+        screenOptions={{ stackPresentation: 'formSheet', headerShown: false }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   console.log(useHeaderHeight());
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
-
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.navigate('Second')}
+    />
   );
 }
 
-function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Second({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   console.log(useHeaderHeight());
   return (
-    <Button title="Tap me for first screen" onPress={() => navigation.navigate('First')} />
+    <Button
+      title="Tap me for first screen"
+      onPress={() => navigation.navigate('First')}
+    />
   );
 }
-
diff --git a/TestsExample/src/Test1032.tsx b/TestsExample/src/Test1032.tsx
index a944804072..336c93d1dc 100644
--- a/TestsExample/src/Test1032.tsx
+++ b/TestsExample/src/Test1032.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Alert, Button, Switch, Text, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Alert, Button, Switch, Text, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -11,9 +11,9 @@ const Stack = createNativeStackNavigator();
 export default function App() {
   const [gestureEnabled, setGestureEnable] = React.useState(false);
   return (
-    <View style={{flex: 1, paddingBottom: 200}}>
+    <View style={{ flex: 1, paddingBottom: 200 }}>
       <NavigationContainer>
-        <Stack.Navigator screenOptions={{gestureEnabled}}>
+        <Stack.Navigator screenOptions={{ gestureEnabled }}>
           <Stack.Screen name="Top" component={First} />
           <Stack.Screen name="Top1" component={Second} />
         </Stack.Navigator>
@@ -32,7 +32,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{backgroundColor: '#FFF'}}>
+    <View style={{ backgroundColor: '#FFF' }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.push('Top1')}
@@ -43,8 +43,11 @@ function First({
 
 function Second() {
   return (
-    <View style={{backgroundColor: '#FFF'}}>
-      <Button title="Swipe back to see if button click triggers" onPress={() => Alert.alert('Click detected')} />
+    <View style={{ backgroundColor: '#FFF' }}>
+      <Button
+        title="Swipe back to see if button click triggers"
+        onPress={() => Alert.alert('Click detected')}
+      />
     </View>
   );
 }
diff --git a/TestsExample/src/Test1036.tsx b/TestsExample/src/Test1036.tsx
index 9eebd8841f..c9bc584776 100644
--- a/TestsExample/src/Test1036.tsx
+++ b/TestsExample/src/Test1036.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -16,9 +16,9 @@ const App = () => {
         screenOptions={{
           headerTitle: 'Title',
           searchBar: {
-            onCancelButtonPress: ()=>{
-              console.log('cancel button press')
-            }
+            onCancelButtonPress: () => {
+              console.log('cancel button press');
+            },
           },
         }}>
         <Stack.Screen name="Screen" component={Screen} />
diff --git a/TestsExample/src/Test1072.tsx b/TestsExample/src/Test1072.tsx
index fd5606d45f..7535c82dd8 100644
--- a/TestsExample/src/Test1072.tsx
+++ b/TestsExample/src/Test1072.tsx
@@ -64,7 +64,7 @@ function Post({ onPress }: { onPress?: () => void }) {
 
   return (
     <TapGestureHandler
-      onHandlerStateChange={(e) =>
+      onHandlerStateChange={e =>
         e.nativeEvent.oldState === State.ACTIVE && onPress?.()
       }>
       <View style={styles.post}>
@@ -80,7 +80,7 @@ function Post({ onPress }: { onPress?: () => void }) {
 function generatePhotos(
   amount: number,
   width: number,
-  height: number
+  height: number,
 ): JSX.Element[] {
   const startFrom = Math.floor(Math.random() * 20) + 10;
   return Array.from({ length: amount }, (_, index) => {
diff --git a/TestsExample/src/Test1084.tsx b/TestsExample/src/Test1084.tsx
index b0914c303c..00bdf968e5 100644
--- a/TestsExample/src/Test1084.tsx
+++ b/TestsExample/src/Test1084.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -13,7 +16,7 @@ export default function App() {
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{customAnimationOnSwipe: true, stackAnimation: 'fade'}}
+          options={{ customAnimationOnSwipe: true, stackAnimation: 'fade' }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -26,7 +29,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'red'}}>
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.navigate('Second')}
@@ -41,8 +44,11 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'yellow'}}>
-      <Button title="Tap me for first screen" onPress={() => navigation.goBack()} />
+    <View style={{ flex: 1, backgroundColor: 'yellow' }}>
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.goBack()}
+      />
     </View>
   );
 }
diff --git a/TestsExample/src/Test1091.tsx b/TestsExample/src/Test1091.tsx
index 2b1a116559..a0d95f7ed5 100644
--- a/TestsExample/src/Test1091.tsx
+++ b/TestsExample/src/Test1091.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Button, View, Text} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { Button, View, Text } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 
 // swipe gesture works when using react-native-screens/native-stack
 import {
@@ -23,15 +23,15 @@ type StackParams = {
 const Stack = createNativeStackNavigator<StackParams>();
 
 const Screen2 = () => (
-  <View style={{paddingTop: 200}}>
+  <View style={{ paddingTop: 200 }}>
     <Text>
       Swipe gesture doesn't work on iOS 12 in @react-navigation/native-stack
     </Text>
   </View>
 );
 
-const Screen = ({navigation}: NativeStackScreenProps<StackParams>) => (
-  <View style={{paddingTop: 200}}>
+const Screen = ({ navigation }: NativeStackScreenProps<StackParams>) => (
+  <View style={{ paddingTop: 200 }}>
     <Button
       title="Go to Screen2"
       onPress={() => navigation.navigate('Screen2')}
diff --git a/TestsExample/src/Test1096.tsx b/TestsExample/src/Test1096.tsx
index a9a214e575..8f23fd4d76 100644
--- a/TestsExample/src/Test1096.tsx
+++ b/TestsExample/src/Test1096.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Button, StyleSheet, View, Modal } from 'react-native';
-import {FullWindowOverlay} from 'react-native-screens';
+import { FullWindowOverlay } from 'react-native-screens';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -25,8 +25,7 @@ function Home({
       <Modal
         animationType="slide"
         visible={isShowModal}
-        presentationStyle="pageSheet"
-      >
+        presentationStyle="pageSheet">
         <View style={styles.container}>
           <Button
             title="dismiss rn modal"
@@ -35,10 +34,12 @@ function Home({
         </View>
       </Modal>
       <FullWindowOverlay>
-        <View style={{flex: 1, justifyContent: 'center'}} pointerEvents="box-none">
+        <View
+          style={{ flex: 1, justifyContent: 'center' }}
+          pointerEvents="box-none">
           <View style={styles.box} />
           <Button title="click me" onPress={() => console.warn('clicked')} />
-        </View >
+        </View>
       </FullWindowOverlay>
     </View>
   );
diff --git a/TestsExample/src/Test1097.tsx b/TestsExample/src/Test1097.tsx
index 799235897d..a37feda498 100644
--- a/TestsExample/src/Test1097.tsx
+++ b/TestsExample/src/Test1097.tsx
@@ -1,6 +1,6 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {Button, NativeSyntheticEvent, ScrollView} from 'react-native';
+import { Button, NativeSyntheticEvent, ScrollView } from 'react-native';
 import {
   NavigationContainer,
   NavigationProp,
@@ -10,7 +10,7 @@ import {
   createNativeStackNavigator,
   NativeStackScreenProps,
 } from 'react-native-screens/native-stack';
-import {SearchBarProps, SearchBarCommands} from 'react-native-screens';
+import { SearchBarProps, SearchBarCommands } from 'react-native-screens';
 
 const AppStack = createNativeStackNavigator();
 
@@ -30,7 +30,7 @@ export default function App(): JSX.Element {
   );
 }
 
-function First({navigation}: NativeStackScreenProps<ParamListBase>) {
+function First({ navigation }: NativeStackScreenProps<ParamListBase>) {
   const searchBarRef = React.useRef<SearchBarCommands>();
 
   React.useEffect(() => {
@@ -50,7 +50,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
     hideNavigationBar: false,
     autoCapitalize: 'sentences',
     placeholder: 'Some text',
-    onChangeText: (e: NativeSyntheticEvent<{text: string}>) =>
+    onChangeText: (e: NativeSyntheticEvent<{ text: string }>) =>
       setSearch(e.nativeEvent.text),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),
     onSearchButtonPress: () => console.warn('Search button pressed'),
@@ -91,10 +91,8 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
         onPress={() => searchBarRef.current?.focus()}
       />
       {items
-        .filter(
-          (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1,
-        )
-        .map((item) => (
+        .filter(item => item.toLowerCase().indexOf(search.toLowerCase()) !== -1)
+        .map(item => (
           <Button
             title={item}
             key={item}
@@ -119,7 +117,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
   );
 }
 
-function Second({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function Second({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
   return (
     <ScrollView contentInsetAdjustmentBehavior="automatic">
       <Button
@@ -134,7 +132,7 @@ function Second({navigation}: {navigation: NavigationProp<ParamListBase>}) {
   );
 }
 
-function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function Third({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
   const searchBarRef = React.useRef<SearchBarCommands>();
 
   const searchBarProps: SearchBarProps = {
@@ -146,20 +144,20 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
     hideNavigationBar: false,
     autoCapitalize: 'sentences',
     placeholder: 'Some text',
-    onChangeText: (e: NativeSyntheticEvent<{text: string}>) => console.warn(`Text changed to ${e.nativeEvent.text}`),
+    onChangeText: (e: NativeSyntheticEvent<{ text: string }>) =>
+      console.warn(`Text changed to ${e.nativeEvent.text}`),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),
     onSearchButtonPress: () => console.warn('Search button pressed'),
     onFocus: () => console.warn('onFocus event'),
     onBlur: () => console.warn('onBlur event'),
-  }
+  };
 
   React.useEffect(() => {
     navigation.setOptions({
-      searchBar: searchBarProps
-    })
+      searchBar: searchBarProps,
+    });
   }, [navigation]);
 
-
   return (
     <ScrollView
       contentInsetAdjustmentBehavior="automatic"
@@ -172,7 +170,7 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
         title="Focus search bar"
         onPress={() => searchBarRef.current?.focus()}
       />
-      <Button 
+      <Button
         title="Remove focus from search bar"
         onPress={() => searchBarRef.current?.blur()}
       />
@@ -201,5 +199,5 @@ function Third({navigation}: {navigation: NavigationProp<ParamListBase>}) {
         onPress={() => searchBarRef.current?.focus()}
       />
     </ScrollView>
-  )
+  );
 }
diff --git a/TestsExample/src/Test111.js b/TestsExample/src/Test111.js
index 0beaf85d35..0ed234036b 100644
--- a/TestsExample/src/Test111.js
+++ b/TestsExample/src/Test111.js
@@ -1,8 +1,11 @@
 import React from 'react';
-import {View, Text, Button} from 'react-native';
+import { View, Text, Button } from 'react-native';
 
-import {NavigationContainer, useNavigation} from '@react-navigation/native';
-import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from '@react-navigation/stack';
 
 const Screen2 = () => {
   const navigation = useNavigation();
@@ -35,7 +38,8 @@ const Screen1 = () => {
       }}>
       <Button
         title="Go to Screen 2"
-        onPress={() => navigation.navigate('Screen2')} />
+        onPress={() => navigation.navigate('Screen2')}
+      />
     </View>
   );
 };
diff --git a/TestsExample/src/Test1153.tsx b/TestsExample/src/Test1153.tsx
index 478bf1eec3..442ed0e47c 100644
--- a/TestsExample/src/Test1153.tsx
+++ b/TestsExample/src/Test1153.tsx
@@ -1,20 +1,20 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {SafeAreaView} from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { ScrollView } from 'react-native-gesture-handler';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <View style={{flex: 1}}>
+    <View style={{ flex: 1 }}>
       <NavigationContainer>
-        <Stack.Navigator screenOptions={{gestureEnabled: true}}>
+        <Stack.Navigator screenOptions={{ gestureEnabled: true }}>
           <Stack.Screen
             name="First"
             component={First}
@@ -71,7 +71,8 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{backgroundColor: '#777', flex: 1, justifyContent: 'center'}}>
+    <View
+      style={{ backgroundColor: '#777', flex: 1, justifyContent: 'center' }}>
       <Button
         title="Tap me to go back"
         onPress={() => {
diff --git a/TestsExample/src/Test1157.tsx b/TestsExample/src/Test1157.tsx
index 03cd8be4ac..cb69a08fe1 100644
--- a/TestsExample/src/Test1157.tsx
+++ b/TestsExample/src/Test1157.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
-import {Button, View, TouchableOpacity} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View, TouchableOpacity } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -14,7 +14,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'red'}}>
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.navigate('Second')}
@@ -29,7 +29,7 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'yellow'}}>
+    <View style={{ flex: 1, backgroundColor: 'yellow' }}>
       <Button
         title="Tap me for first screen"
         onPress={() => navigation.goBack()}
@@ -45,11 +45,13 @@ function ButtonWithBiggerChild(props: {
   onClickText?: string | undefined;
   backgroundColor?: string | undefined;
 }): JSX.Element {
-  const {onClickText = 'Hello there General Kenobi', backgroundColor = 'red'} =
-    props;
+  const {
+    onClickText = 'Hello there General Kenobi',
+    backgroundColor = 'red',
+  } = props;
   return (
     <TouchableOpacity
-      style={{width: 30, height: 30, backgroundColor: 'red'}}
+      style={{ width: 30, height: 30, backgroundColor: 'red' }}
       onPress={() => console.log(onClickText)}>
       <View
         style={{
@@ -66,7 +68,7 @@ function ButtonWithBiggerChild(props: {
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{stackPresentation: 'modal'}}>
+      <Stack.Navigator screenOptions={{ stackPresentation: 'modal' }}>
         <Stack.Screen
           name="First"
           component={First}
diff --git a/TestsExample/src/Test1162.tsx b/TestsExample/src/Test1162.tsx
index 450b4d7001..33cf2492be 100644
--- a/TestsExample/src/Test1162.tsx
+++ b/TestsExample/src/Test1162.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {Button, View} from 'react-native';
+import { Button, View } from 'react-native';
 import {
   NavigationContainer,
   ParamListBase,
@@ -10,7 +11,7 @@ import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 function isTranslucent(route: Route<string>) {
   const routeName = getFocusedRouteNameFromRoute(route) ?? 'Screen1';
@@ -43,15 +44,15 @@ export default function App() {
         <Stack.Screen
           name="Tab"
           component={TabNavigator}
-          options={({route}) => ({
-            headerStyle: {backgroundColor: 'transparent'},
+          options={({ route }) => ({
+            headerStyle: { backgroundColor: 'transparent' },
             headerTranslucent: isTranslucent(route),
           })}
         />
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{headerStyle: {backgroundColor: 'transparent'}}}
+          options={{ headerStyle: { backgroundColor: 'transparent' } }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -64,7 +65,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{backgroundColor: '#FFF', flex: 1}}>
+    <View style={{ backgroundColor: '#FFF', flex: 1 }}>
       <Button
         title="Tap me for tab navigator"
         onPress={() => navigation.navigate('Tab')}
@@ -79,8 +80,8 @@ function First({
 
 function TabScreen() {
   return (
-    <View style={{backgroundColor: '#CCC', flex: 1, paddingTop: 200}}>
-      <View style={{backgroundColor: '#EEE', flex: 1}}></View>
+    <View style={{ backgroundColor: '#CCC', flex: 1, paddingTop: 200 }}>
+      <View style={{ backgroundColor: '#EEE', flex: 1 }} />
     </View>
   );
 }
@@ -93,15 +94,15 @@ function Second({
   const [isTranslucent, setIsTranslucent] = React.useState(false);
 
   React.useEffect(() => {
-    navigation.setOptions({headerTranslucent: isTranslucent});
+    navigation.setOptions({ headerTranslucent: isTranslucent });
   }, [isTranslucent]);
 
   return (
-    <View style={{backgroundColor: '#DDD', flex: 1, paddingTop: 200}}>
-      <View style={{backgroundColor: '#333', flex: 1}}>
+    <View style={{ backgroundColor: '#DDD', flex: 1, paddingTop: 200 }}>
+      <View style={{ backgroundColor: '#333', flex: 1 }}>
         <Button
           title="Change translucent"
-          onPress={() => setIsTranslucent((prev) => !prev)}
+          onPress={() => setIsTranslucent(prev => !prev)}
         />
       </View>
     </View>
diff --git a/TestsExample/src/Test1166/AndroidDifferentScreenSearch.tsx b/TestsExample/src/Test1166/AndroidDifferentScreenSearch.tsx
index b741b5aaf5..d3c9a61ff7 100644
--- a/TestsExample/src/Test1166/AndroidDifferentScreenSearch.tsx
+++ b/TestsExample/src/Test1166/AndroidDifferentScreenSearch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, Image, Text, TouchableOpacity, View} from 'react-native';
-import {ParamListBase} from '@react-navigation/native';
+import { Button, Image, Text, TouchableOpacity, View } from 'react-native';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -10,14 +10,14 @@ const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <Stack.Navigator screenOptions={{stackAnimation: 'none'}}>
+    <Stack.Navigator screenOptions={{ stackAnimation: 'none' }}>
       <Stack.Screen name="First" component={First} />
-      <Stack.Screen name="Search" component={Second} options={{title: ''}} />
+      <Stack.Screen name="Search" component={Second} options={{ title: '' }} />
     </Stack.Navigator>
   );
 }
 
-function SearchIconButton(props: {onPress: () => void}) {
+function SearchIconButton(props: { onPress: () => void }) {
   return (
     <TouchableOpacity onPress={props.onPress}>
       <Image source={require('../../assets/search_black.png')} />
@@ -41,7 +41,7 @@ function First({
     });
   }, [navigation]);
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF'}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF' }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
     </View>
   );
@@ -61,7 +61,7 @@ function Second({
         autoCapitalize: 'none',
         autoFocus: true,
         onClose: () => navigation.navigate('First'),
-        onChangeText: (e) => setText(e.nativeEvent.text),
+        onChangeText: e => setText(e.nativeEvent.text),
         barTintColor: text,
       },
       stackAnimation: 'none',
@@ -69,8 +69,8 @@ function Second({
   }, [navigation, text]);
 
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
-      <Text style={{fontSize: 24, fontWeight: '600', marginBottom: 12}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 12 }}>
+      <Text style={{ fontSize: 24, fontWeight: '600', marginBottom: 12 }}>
         Search Results
       </Text>
       <Text>{text}</Text>
diff --git a/TestsExample/src/Test1166/AndroidSearchBarCustomization.tsx b/TestsExample/src/Test1166/AndroidSearchBarCustomization.tsx
index 1700051af7..eaf443d2ad 100644
--- a/TestsExample/src/Test1166/AndroidSearchBarCustomization.tsx
+++ b/TestsExample/src/Test1166/AndroidSearchBarCustomization.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -33,7 +33,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF'}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF' }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
     </View>
   );
diff --git a/TestsExample/src/Test1166/AndroidSearchBarEvents.tsx b/TestsExample/src/Test1166/AndroidSearchBarEvents.tsx
index f90c55e376..6019e84551 100644
--- a/TestsExample/src/Test1166/AndroidSearchBarEvents.tsx
+++ b/TestsExample/src/Test1166/AndroidSearchBarEvents.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import {Button, Text, View} from 'react-native';
-import {ParamListBase} from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {SearchBarProps} from 'react-native-screens';
+import { SearchBarProps } from 'react-native-screens';
 
 const Stack = createNativeStackNavigator();
 
@@ -25,11 +25,11 @@ function First({
   const [events, setEvents] = React.useState<string[]>([]);
   React.useLayoutEffect(() => {
     const searchBar: SearchBarProps = {
-      onSearchButtonPress: () => setEvents((prev) => [...prev, 'Search']),
-      onBlur: () => setEvents((prev) => [...prev, 'Blur']),
-      onClose: () => setEvents((prev) => [...prev, 'Close']),
-      onOpen: () => setEvents((prev) => [...prev, 'Open']),
-      onFocus: () => setEvents((prev) => [...prev, 'Focus']),
+      onSearchButtonPress: () => setEvents(prev => [...prev, 'Search']),
+      onBlur: () => setEvents(prev => [...prev, 'Blur']),
+      onClose: () => setEvents(prev => [...prev, 'Close']),
+      onOpen: () => setEvents(prev => [...prev, 'Open']),
+      onFocus: () => setEvents(prev => [...prev, 'Focus']),
     };
     navigation.setOptions({
       searchBar: searchBar,
@@ -37,7 +37,7 @@ function First({
   }, [navigation]);
 
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 12 }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
       {events.map((event, i) => (
         <Text key={i}>{event}</Text>
diff --git a/TestsExample/src/Test1166/AndroidSearchTypes.tsx b/TestsExample/src/Test1166/AndroidSearchTypes.tsx
index 6a566b330c..73be6a6f94 100644
--- a/TestsExample/src/Test1166/AndroidSearchTypes.tsx
+++ b/TestsExample/src/Test1166/AndroidSearchTypes.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -10,22 +10,22 @@ const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <Stack.Navigator screenOptions={{stackAnimation: 'none'}}>
+    <Stack.Navigator screenOptions={{ stackAnimation: 'none' }}>
       <Stack.Screen name="First" component={First} />
       <Stack.Screen
         name="number"
         component={Second}
-        options={{searchBar: {autoFocus: true, inputType: 'number'}}}
+        options={{ searchBar: { autoFocus: true, inputType: 'number' } }}
       />
       <Stack.Screen
         name="email"
         component={Second}
-        options={{searchBar: {autoFocus: true, inputType: 'email'}}}
+        options={{ searchBar: { autoFocus: true, inputType: 'email' } }}
       />
       <Stack.Screen
         name="phone"
         component={Second}
-        options={{searchBar: {autoFocus: true, inputType: 'phone'}}}
+        options={{ searchBar: { autoFocus: true, inputType: 'phone' } }}
       />
     </Stack.Navigator>
   );
@@ -39,7 +39,7 @@ function First({
   React.useLayoutEffect(() => {
     function HeaderSearchButtons() {
       return (
-        <View style={{flexDirection: 'row'}}>
+        <View style={{ flexDirection: 'row' }}>
           <Button title="N" onPress={() => navigation.navigate('number')} />
           <Button title="E" onPress={() => navigation.navigate('email')} />
           <Button title="P" onPress={() => navigation.navigate('phone')} />
@@ -53,7 +53,7 @@ function First({
     });
   }, [navigation]);
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 12 }}>
       <Button title="Number" onPress={() => navigation.navigate('number')} />
       <Button title="Email" onPress={() => navigation.navigate('email')} />
       <Button title="Phone" onPress={() => navigation.navigate('phone')} />
@@ -68,7 +68,7 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+    <View style={{ flex: 1, backgroundColor: '#FFF', padding: 12 }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />
     </View>
   );
diff --git a/TestsExample/src/Test1166/index.tsx b/TestsExample/src/Test1166/index.tsx
index 879172d433..ae0b73e52b 100644
--- a/TestsExample/src/Test1166/index.tsx
+++ b/TestsExample/src/Test1166/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -15,7 +15,7 @@ const Stack = createNativeStackNavigator();
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{headerShown: false}}>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
         <Stack.Screen name="Home" component={Home} />
         <Stack.Screen
           name="Customization"
@@ -45,25 +45,25 @@ function Home({
         justifyContent: 'center',
         padding: 12,
       }}>
-      <View style={{marginBottom: 12}}>
+      <View style={{ marginBottom: 12 }}>
         <Button
           title="Search bar customization"
           onPress={() => navigation.navigate('Customization')}
         />
       </View>
-      <View style={{marginBottom: 12}}>
+      <View style={{ marginBottom: 12 }}>
         <Button
           title="Search bar input types"
           onPress={() => navigation.navigate('InputTypes')}
         />
       </View>
-      <View style={{marginBottom: 12}}>
+      <View style={{ marginBottom: 12 }}>
         <Button
           title="Search bar events"
           onPress={() => navigation.navigate('Events')}
         />
       </View>
-      <View style={{marginBottom: 12}}>
+      <View style={{ marginBottom: 12 }}>
         <Button
           title="Search bar different search results screen"
           onPress={() => navigation.navigate('DifferentSearchScreen')}
diff --git a/TestsExample/src/Test1188.tsx b/TestsExample/src/Test1188.tsx
index c79fb5dc60..ebe011d829 100644
--- a/TestsExample/src/Test1188.tsx
+++ b/TestsExample/src/Test1188.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -12,7 +12,7 @@ const NestedStack = createNativeStackNavigator();
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{headerShown: false}}>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
         <Stack.Screen name="Home" component={Home} />
         <Stack.Screen name="Nested" component={Nested} />
       </Stack.Navigator>
@@ -26,7 +26,7 @@ function Home({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
+    <View style={{ flex: 1, justifyContent: 'center' }}>
       <Button
         title="Go to nested stack"
         onPress={() => navigation.navigate('Nested')}
diff --git a/TestsExample/src/Test1190.tsx b/TestsExample/src/Test1190.tsx
index b29ed56bfb..0d3ebffe6d 100644
--- a/TestsExample/src/Test1190.tsx
+++ b/TestsExample/src/Test1190.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const Stack = createNativeStackNavigator();
 
@@ -13,32 +16,51 @@ export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen name="First" component={First} options={{stackAnimation: 'none'}}/>
+        <Stack.Screen
+          name="First"
+          component={First}
+          options={{ stackAnimation: 'none' }}
+        />
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{stackAnimation: 'slide_from_bottom', replaceAnimation: 'push'}}
+          options={{
+            stackAnimation: 'slide_from_bottom',
+            replaceAnimation: 'push',
+          }}
         />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation} : Props) {
+function First({ navigation }: Props) {
   return (
     <>
-      <Button title="Tap me for push second screen" onPress={() => navigation.push('Second')} />
-      <Button title="Tap me for replace with second screen" onPress={() => navigation.replace('Second')} />
+      <Button
+        title="Tap me for push second screen"
+        onPress={() => navigation.push('Second')}
+      />
+      <Button
+        title="Tap me for replace with second screen"
+        onPress={() => navigation.replace('Second')}
+      />
       <Button title="Tap me for go back" onPress={() => navigation.goBack()} />
     </>
   );
 }
 
-function Second({navigation} : Props) {
+function Second({ navigation }: Props) {
   return (
     <>
-      <Button title="Tap me for push first screen" onPress={() => navigation.push('First')} />
-      <Button title="Tap me for replace with first screen" onPress={() => navigation.replace('First')} />
+      <Button
+        title="Tap me for push first screen"
+        onPress={() => navigation.push('First')}
+      />
+      <Button
+        title="Tap me for replace with first screen"
+        onPress={() => navigation.replace('First')}
+      />
       <Button title="Tap me for go back" onPress={() => navigation.goBack()} />
     </>
   );
diff --git a/TestsExample/src/Test1198.tsx b/TestsExample/src/Test1198.tsx
index f5284029eb..33ed867c6c 100644
--- a/TestsExample/src/Test1198.tsx
+++ b/TestsExample/src/Test1198.tsx
@@ -1,7 +1,7 @@
-import React, {useEffect} from 'react';
-import {NavigationContainer, useIsFocused} from '@react-navigation/native';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {Text, View} from 'react-native';
+import React, { useEffect } from 'react';
+import { NavigationContainer, useIsFocused } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Text, View } from 'react-native';
 
 const BottomTabs = createBottomTabNavigator();
 
@@ -29,7 +29,7 @@ function Settings() {
     }
   }, [isFocused]);
 
-  console.log({isFocused});
+  console.log({ isFocused });
 
   return (
     <View
diff --git a/TestsExample/src/Test1204.tsx b/TestsExample/src/Test1204.tsx
index 6c01125ff8..5df5a1f586 100644
--- a/TestsExample/src/Test1204.tsx
+++ b/TestsExample/src/Test1204.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, Text, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -41,7 +41,7 @@ function Main({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
+    <View style={{ flex: 1, justifyContent: 'center' }}>
       <Text>Example text that could be read out by TalkBack</Text>
       <Button
         title="Open transparent modal"
@@ -76,7 +76,7 @@ function Details({
           justifyContent: 'space-around',
           backgroundColor: 'white',
         }}>
-        <Text style={{padding: 15}}>
+        <Text style={{ padding: 15 }}>
           Buttons beneath the modal shouldn&apos;t be picked up by Android
           TalkBack
         </Text>
diff --git a/TestsExample/src/Test1209.tsx b/TestsExample/src/Test1209.tsx
index 1af9a110bb..8a1898fbe7 100644
--- a/TestsExample/src/Test1209.tsx
+++ b/TestsExample/src/Test1209.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {View, Text, Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { View, Text, Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import {
   createStackNavigator,
   StackNavigationProp,
@@ -22,7 +22,7 @@ function Screen1({
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Text style={{color: 'white'}}>Screen 1</Text>
+      <Text style={{ color: 'white' }}>Screen 1</Text>
       <Button
         onPress={() => navigation.navigate('Screen2')}
         title="Go to Screen 2"
@@ -44,7 +44,7 @@ function Screen2({
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Text style={{color: 'white'}}>Screen 2</Text>
+      <Text style={{ color: 'white' }}>Screen 2</Text>
       <Button
         onPress={() => navigation.navigate('Screen3')}
         title="Go to Screen 3"
@@ -62,14 +62,14 @@ function Screen3() {
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Text style={{color: 'white'}}>Screen 3</Text>
+      <Text style={{ color: 'white' }}>Screen 3</Text>
     </View>
   );
 }
 
 function ScreenB() {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Screen B</Text>
     </View>
   );
@@ -92,11 +92,11 @@ export const maybePopToTop = (
 ) => {
   const state = navigation.dangerouslyGetState().routes;
 
-  const stackWithState = state.filter((stack) => stack.state);
+  const stackWithState = state.filter(stack => stack.state);
 
   if (
     stackWithState.length &&
-    stackWithState.some((route) => route.state?.index !== 0)
+    stackWithState.some(route => route.state?.index !== 0)
   ) {
     navigation.popToTop();
   }
diff --git a/TestsExample/src/Test1213.tsx b/TestsExample/src/Test1213.tsx
index bd7e05277b..6b5fec5736 100644
--- a/TestsExample/src/Test1213.tsx
+++ b/TestsExample/src/Test1213.tsx
@@ -1,10 +1,10 @@
-import React, {useEffect} from 'react';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React, { useEffect } from 'react';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {Text} from 'react-native';
+import { Text } from 'react-native';
 
 const Stack = createNativeStackNavigator();
 const NStack = createNativeStackNavigator();
@@ -21,7 +21,7 @@ type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
 };
 
-const MainScreen = ({navigation}: Props): JSX.Element => {
+const MainScreen = ({ navigation }: Props): JSX.Element => {
   useEffect(() => {
     const unsubscribe = navigation.addListener('transitionStart', () => {
       console.log('1');
diff --git a/TestsExample/src/Test1214.tsx b/TestsExample/src/Test1214.tsx
index 74ba6a09af..07fe3db113 100644
--- a/TestsExample/src/Test1214.tsx
+++ b/TestsExample/src/Test1214.tsx
@@ -1,52 +1,63 @@
 import React from 'react';
-import {Button, SafeAreaView, Text, TextInput, View} from 'react-native';
+import { Button, SafeAreaView, Text, TextInput, View } from 'react-native';
 
-import {createStackNavigator} from '@react-navigation/stack';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const NStack = createNativeStackNavigator();
 const Stack = createStackNavigator();
 
-const Home = ({navigation}: Props) => {
+const Home = ({ navigation }: Props) => {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
+    <View style={{ flex: 1, justifyContent: 'center' }}>
       <Button
         title="Go to details"
         onPress={() => {
           navigation.navigate('DETAILS');
-        }}></Button>
+        }}
+      />
     </View>
   );
 };
 
 const Details = () => {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput style={{backgroundColor: 'lime', height: 40}} autoFocus={true}></TextInput>
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <TextInput
+        style={{ backgroundColor: 'lime', height: 40 }}
+        autoFocus={true}
+      />
     </View>
   );
 };
 
 const App = () => {
   return (
-    <SafeAreaView style={{flex:1, backgroundColor: 'white'}}>
-      <Text style={{textAlign: 'center', fontSize: 20, color:'black'}}>JS Navigation</Text>
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+      <Text style={{ textAlign: 'center', fontSize: 20, color: 'black' }}>
+        JS Navigation
+      </Text>
       <NavigationContainer>
         <Stack.Navigator detachInactiveScreens={true}>
-          <Stack.Screen component={Home} name="HOME"></Stack.Screen>
-          <Stack.Screen component={Details} name="DETAILS"></Stack.Screen>
+          <Stack.Screen component={Home} name="HOME" />
+          <Stack.Screen component={Details} name="DETAILS" />
         </Stack.Navigator>
       </NavigationContainer>
-      <Text style={{textAlign: 'center', fontSize: 20, color:'black'}}>Native Navigation</Text>
+      <Text style={{ textAlign: 'center', fontSize: 20, color: 'black' }}>
+        Native Navigation
+      </Text>
       <NavigationContainer>
-        <NStack.Navigator screenOptions={{stackAnimation: 'fade'}}>
-          <NStack.Screen component={Home} name="HOME"></NStack.Screen>
-          <NStack.Screen component={Details} name="DETAILS"></NStack.Screen>
+        <NStack.Navigator screenOptions={{ stackAnimation: 'fade' }}>
+          <NStack.Screen component={Home} name="HOME" />
+          <NStack.Screen component={Details} name="DETAILS" />
         </NStack.Navigator>
       </NavigationContainer>
     </SafeAreaView>
diff --git a/TestsExample/src/Test1227.tsx b/TestsExample/src/Test1227.tsx
index 98d74bff0b..4e21c9f9e6 100644
--- a/TestsExample/src/Test1227.tsx
+++ b/TestsExample/src/Test1227.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -16,12 +16,12 @@ export default function App() {
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{stackAnimation: 'slide_from_bottom'}}
+          options={{ stackAnimation: 'slide_from_bottom' }}
         />
         <Stack.Screen
           name="Third"
           component={Third}
-          options={{stackAnimation: 'fade_from_bottom'}}
+          options={{ stackAnimation: 'fade_from_bottom' }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -34,7 +34,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'red'}}>
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.navigate('Second')}
@@ -49,7 +49,7 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'yellow'}}>
+    <View style={{ flex: 1, backgroundColor: 'yellow' }}>
       <Button
         title="Tap me for third screen"
         onPress={() => navigation.navigate('Third')}
@@ -64,7 +64,7 @@ function Third({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, backgroundColor: 'blue'}}>
+    <View style={{ flex: 1, backgroundColor: 'blue' }}>
       <Button
         title="Tap me for first screen"
         onPress={() => navigation.navigate('First')}
diff --git a/TestsExample/src/Test1228.tsx b/TestsExample/src/Test1228.tsx
index 298d44bb25..d22747353e 100644
--- a/TestsExample/src/Test1228.tsx
+++ b/TestsExample/src/Test1228.tsx
@@ -9,7 +9,6 @@ import {
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-
 export const FirstScreen = () => {
   const [theme, setTheme] = useState(false);
   const navigation = useNavigation<any>();
@@ -17,7 +16,7 @@ export const FirstScreen = () => {
   useEffect(() => {
     navigation.setOptions({
       headerTitle: theme ? 'red' : 'green',
-    })
+    });
   });
 
   return (
@@ -36,7 +35,7 @@ export const SecondScreen = () => {
   useEffect(() => {
     navigation.setOptions({
       headerTitle: theme ? 'red' : 'green',
-    })
+    });
   });
 
   return (
@@ -57,12 +56,14 @@ export default function App() {
 
   return (
     <SafeAreaProvider>
-      <NavigationContainer
-        theme={theme ? DarkTheme : DefaultTheme}
-      >
+      <NavigationContainer theme={theme ? DarkTheme : DefaultTheme}>
         <Stack.Navigator screenOptions={{ stackPresentation: 'modal' }}>
           <Stack.Screen name="screen1" component={FirstScreen} />
-          <Stack.Screen name="screen2" component={SecondScreen} options={{headerShown: false}}/>
+          <Stack.Screen
+            name="screen2"
+            component={SecondScreen}
+            options={{ headerShown: false }}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaProvider>
diff --git a/TestsExample/src/Test1259.tsx b/TestsExample/src/Test1259.tsx
index ff46b6ab06..6188c21a47 100644
--- a/TestsExample/src/Test1259.tsx
+++ b/TestsExample/src/Test1259.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
diff --git a/TestsExample/src/Test1260.tsx b/TestsExample/src/Test1260.tsx
index a98cc7c965..c96d6928ba 100644
--- a/TestsExample/src/Test1260.tsx
+++ b/TestsExample/src/Test1260.tsx
@@ -1,37 +1,50 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{swipeDirection: 'vertical'}}>
+      <Stack.Navigator screenOptions={{ swipeDirection: 'vertical' }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
-    <View style={{flex: 1, backgroundColor: 'red'}}>
-      <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+    <View style={{ flex: 1, backgroundColor: 'red' }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
     </View>
-
   );
 }
 
-function Second({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Second({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
-    <View style={{flex: 1, backgroundColor: 'blue'}}>
-      <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
+    <View style={{ flex: 1, backgroundColor: 'blue' }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('First')}
+      />
     </View>
   );
 }
diff --git a/TestsExample/src/Test1296.tsx b/TestsExample/src/Test1296.tsx
index da8a9a19cc..c7f8389a61 100644
--- a/TestsExample/src/Test1296.tsx
+++ b/TestsExample/src/Test1296.tsx
@@ -37,13 +37,13 @@ function Second({
   const headerHeight = useHeaderHeight();
   useLayoutEffect(() => {
     navigation.setOptions({
-    gestureResponseDistance: {
-      start: 200,
-      end: 250,
-      top: headerHeight,
-      bottom: headerHeight + 50,
-    }
-  });
+      gestureResponseDistance: {
+        start: 200,
+        end: 250,
+        top: headerHeight,
+        bottom: headerHeight + 50,
+      },
+    });
   });
   return (
     <ScrollView>
@@ -51,7 +51,16 @@ function Second({
         Use swipe back gesture to go back (iOS only)
       </Text>
       <Post />
-    <View style={{position: 'absolute', backgroundColor: 'red', width: 50, height: 50, left: 200, top: 0}}/>
+      <View
+        style={{
+          position: 'absolute',
+          backgroundColor: 'red',
+          width: 50,
+          height: 50,
+          left: 200,
+          top: 0,
+        }}
+      />
     </ScrollView>
   );
 }
@@ -81,7 +90,7 @@ function Post({ onPress }: { onPress?: () => void }) {
 
   return (
     <TapGestureHandler
-      onHandlerStateChange={(e) =>
+      onHandlerStateChange={e =>
         e.nativeEvent.oldState === State.ACTIVE && onPress?.()
       }>
       <View style={styles.post}>
@@ -97,7 +106,7 @@ function Post({ onPress }: { onPress?: () => void }) {
 function generatePhotos(
   amount: number,
   width: number,
-  height: number
+  height: number,
 ): JSX.Element[] {
   const startFrom = Math.floor(Math.random() * 20) + 10;
   return Array.from({ length: amount }, (_, index) => {
diff --git a/TestsExample/src/Test1299.tsx b/TestsExample/src/Test1299.tsx
index 5104f4da86..e38b9d1866 100644
--- a/TestsExample/src/Test1299.tsx
+++ b/TestsExample/src/Test1299.tsx
@@ -17,12 +17,18 @@ export const MainScreen = React.memo(() => {
   return (
     <View
       style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Button title={'Open modal 1'} onPress={() => {
-        navigation.navigate('modalScreen-1')
-      }}/>
-      <Button title={'Open modal 2'} onPress={() => {
-        navigation.navigate('modalScreen-2')
-      }}/>
+      <Button
+        title={'Open modal 1'}
+        onPress={() => {
+          navigation.navigate('modalScreen-1');
+        }}
+      />
+      <Button
+        title={'Open modal 2'}
+        onPress={() => {
+          navigation.navigate('modalScreen-2');
+        }}
+      />
     </View>
   );
 });
diff --git a/TestsExample/src/Test1391.tsx b/TestsExample/src/Test1391.tsx
index 59182116a5..33d20094bc 100644
--- a/TestsExample/src/Test1391.tsx
+++ b/TestsExample/src/Test1391.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { Button, Text, View } from "react-native";
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React from 'react';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import { SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 interface Props {
   navigation: NativeStackNavigationProp<ParamListBase>;
@@ -16,7 +16,10 @@ const Stack = createNativeStackNavigator();
 function Second(props: Props) {
   return (
     <View>
-      <Button title="Navigate to First" onPress={() => props.navigation.navigate('First')} />
+      <Button
+        title="Navigate to First"
+        onPress={() => props.navigation.navigate('First')}
+      />
     </View>
   );
 }
@@ -24,14 +27,17 @@ function Second(props: Props) {
 function First(props: Props) {
   return (
     <View>
-      <Button title="Navigate to Second" onPress={() => props.navigation.navigate('Second')} />
+      <Button
+        title="Navigate to Second"
+        onPress={() => props.navigation.navigate('Second')}
+      />
     </View>
   );
 }
 
 const App = (): JSX.Element => {
   return (
-    <SafeAreaView style={{flex:1, backgroundColor: 'white'}}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
       <NavigationContainer>
         <Stack.Navigator
           screenOptions={{
@@ -39,21 +45,17 @@ const App = (): JSX.Element => {
               backgroundColor: 'pink',
             },
           }}
-          initialRouteName="First"
-        >
+          initialRouteName="First">
           <Stack.Screen
             name="Second"
             component={Second}
             options={{
               stackPresentation: 'modal',
-              // eslint-disable-next-line react/display-name
+
               headerLeft: () => <View />,
             }}
           />
-          <Stack.Screen
-            name="First"
-            component={First}
-          />
+          <Stack.Screen name="First" component={First} />
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaView>
diff --git a/TestsExample/src/Test1419.tsx b/TestsExample/src/Test1419.tsx
index edbc598cd8..b8d7ba059b 100644
--- a/TestsExample/src/Test1419.tsx
+++ b/TestsExample/src/Test1419.tsx
@@ -1,15 +1,33 @@
 import React from 'react';
-import { View, Text, Button, KeyboardAvoidingView, Platform, TouchableWithoutFeedback, Keyboard, Image, TextInput } from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import {
+  View,
+  Text,
+  Button,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  Image,
+  TextInput,
+} from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
-function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
-    <View style={{
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
       <Text>First screen</Text>
       <Button
         title={'Navigate'}
@@ -22,21 +40,21 @@ function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBas
 function Second() {
   return (
     <KeyboardAvoidingView
-    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    style={{ flex: 1 }}
-    >
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        <View style={{
-          flex: 1,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}>
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
           <Image
             source={require('../assets/backButton.png')}
             style={{
               width: 150,
               height: 150,
-              marginBottom: 30
+              marginBottom: 30,
             }}
           />
           <TextInput
@@ -48,7 +66,7 @@ function Second() {
               paddingRight: 15,
               borderWidth: 1,
               borderRadius: 5,
-              borderColor: '#cccccc'
+              borderColor: '#cccccc',
             }}
           />
         </View>
@@ -62,16 +80,10 @@ const { Navigator, Screen } = createNativeStackNavigator();
 export default () => {
   return (
     <NavigationContainer>
-        <Navigator screenOptions={{hideKeyboardOnSwipe: true}}>
-        <Screen
-            name={'First'}
-            component={First}
-        />
-        <Screen
-            name={'Second'}
-            component={Second}
-        />
-        </Navigator>
+      <Navigator screenOptions={{ hideKeyboardOnSwipe: true }}>
+        <Screen name={'First'} component={First} />
+        <Screen name={'Second'} component={Second} />
+      </Navigator>
     </NavigationContainer>
   );
-}
+};
diff --git a/TestsExample/src/Test1473.tsx b/TestsExample/src/Test1473.tsx
index b0fad8a90d..4c689b9b0c 100644
--- a/TestsExample/src/Test1473.tsx
+++ b/TestsExample/src/Test1473.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {StyleSheet, View, Text, Button} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { StyleSheet, View, Text, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -9,7 +9,7 @@ function First(props) {
   return (
     <View style={styles.container}>
       <Text>This is the first screen</Text>
-      <Button 
+      <Button
         onPress={() => props.navigation.navigate('Second')}
         title="Navigate to second screen"
       />
@@ -31,17 +31,18 @@ function Second(props) {
 
 function Modal(props) {
   return (
-    <View style={{
-      ...styles.container,
-      backgroundColor: 'rgba(0, 170, 0, 0.5)',
-    }}>
+    <View
+      style={{
+        ...styles.container,
+        backgroundColor: 'rgba(0, 170, 0, 0.5)',
+      }}>
       <Text>This is the modal</Text>
       <Button
         onPress={() => props.navigation.goBack()}
         title="Close the modal"
       />
     </View>
-  )
+  );
 }
 
 function App() {
@@ -49,9 +50,13 @@ function App() {
     <NavigationContainer>
       <Stack.Navigator initialRouteName="First">
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen name="Second" component={Second} options={{
-          fullScreenSwipeEnabled: true,
-        }}/>
+        <Stack.Screen
+          name="Second"
+          component={Second}
+          options={{
+            fullScreenSwipeEnabled: true,
+          }}
+        />
         <Stack.Screen
           name="Modal"
           component={Modal}
diff --git a/TestsExample/src/Test1476.tsx b/TestsExample/src/Test1476.tsx
index f7527286da..6db58214c1 100644
--- a/TestsExample/src/Test1476.tsx
+++ b/TestsExample/src/Test1476.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {Button, Text, View, StyleSheet, ScrollView} from 'react-native';
-import {NavigationContainer as NavigationContainerNative} from '@react-navigation/native';
+import { Button, Text, View, StyleSheet, ScrollView } from 'react-native';
+import { NavigationContainer as NavigationContainerNative } from '@react-navigation/native';
 
 // remember to change prop names in ScreenGroup && ModalGroup
 // import { createNativeStackNavigator, NativeStackNavigationOptions } from '@react-navigation/native-stack';
@@ -11,7 +11,7 @@ import {
 
 const NativeStack = createNativeStackNavigator();
 
-function ScreenA({navigation}) {
+function ScreenA({ navigation }) {
   return (
     <View
       style={{
@@ -20,7 +20,7 @@ function ScreenA({navigation}) {
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Text style={{color: 'white'}}>
+      <Text style={{ color: 'white' }}>
         ScreenA, with backgroundColor: 'blue'
       </Text>
       <Button
@@ -31,7 +31,7 @@ function ScreenA({navigation}) {
   );
 }
 
-function ScreenB({navigation}) {
+function ScreenB({ navigation }) {
   return (
     <View
       style={{
@@ -60,70 +60,91 @@ function ModalA(props: Props) {
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <View style={{backgroundColor: 'white'}}>
+      <View style={{ backgroundColor: 'white' }}>
         <Text>ModalA, with opacity and backgroundColor</Text>
-          <Text>
-            At ModalA, we still can gesture swipe the screenB back to screenA,{' '}
-          </Text>
+        <Text>
+          At ModalA, we still can gesture swipe the screenB back to screenA,{' '}
+        </Text>
         <Button title={'pop modal'} onPress={() => props.navigation.pop()} />
       </View>
     </View>
   );
 }
 
-const StackBuilder = (configs: any, groupOptions?: NativeStackNavigationOptions) => {
+const StackBuilder = (
+  configs: any,
+  groupOptions?: NativeStackNavigationOptions,
+) => {
   return () => (
     <NativeStack.Group screenOptions={groupOptions}>
       {configs.map(config => {
         const { options, ...anyConfig } = config;
-        const { statusBarStyle, statusBarAnimation, statusBarHidden, ...anyOption } = options || {};
-        return <NativeStack.Screen key={config.name} {...anyConfig} options={anyOption} />;
+        const {
+          statusBarStyle,
+          statusBarAnimation,
+          statusBarHidden,
+          ...anyOption
+        } = options || {};
+        return (
+          <NativeStack.Screen
+            key={config.name}
+            {...anyConfig}
+            options={anyOption}
+          />
+        );
       })}
     </NativeStack.Group>
   );
 };
 
-const ScreenGroup = StackBuilder([
+const ScreenGroup = StackBuilder(
+  [
+    {
+      name: 'screenA',
+      component: ScreenA,
+    },
+    {
+      name: 'screenB',
+      component: ScreenB,
+    },
+  ],
   {
-    name: 'screenA',
-    component: ScreenA,
-  },
-  {
-    name: 'screenB',
-    component: ScreenB,
-  }], {
-  // headerShadowVisible: false,
-  headerTintColor: 'black',
-  headerBackTitleVisible: false,
-  gestureEnabled: true,
-  contentStyle: { backgroundColor: 'white' },
-
-  // prop for @react-navigation/native-stack
-  // fullScreenGestureEnabled: true,
-
-  // prop for react-native-screens/native-stack
-  fullScreenSwipeEnabled: true,
-});
+    // headerShadowVisible: false,
+    headerTintColor: 'black',
+    headerBackTitleVisible: false,
+    gestureEnabled: true,
+    contentStyle: { backgroundColor: 'white' },
 
+    // prop for @react-navigation/native-stack
+    // fullScreenGestureEnabled: true,
 
-const ModalGroup = StackBuilder([
+    // prop for react-native-screens/native-stack
+    fullScreenSwipeEnabled: true,
+  },
+);
+
+const ModalGroup = StackBuilder(
+  [
+    {
+      name: 'modalA',
+      component: ModalA,
+      // options: { stackAnimation: 'fade' },
+    },
+  ],
   {
-    name: 'modalA',
-    component: ModalA,
-    // options: { stackAnimation: 'fade' },
-  }], {
-  headerShown: false,
+    headerShown: false,
 
-  // props for @react-navigation/native-stack
-  // animation: 'fade_from_bottom',
-  // presentation: 'containedTransparentModal',
+    // props for @react-navigation/native-stack
+    // animation: 'fade_from_bottom',
+    // presentation: 'containedTransparentModal',
 
-  // props for react-native-screens/native-stack
-  stackAnimation: 'fade_from_bottom',
-  stackPresentation: 'containedTransparentModal',
-  fullScreenSwipeEnabled: true,
-  customAnimationOnSwipe: true,
-});
+    // props for react-native-screens/native-stack
+    stackAnimation: 'fade_from_bottom',
+    stackPresentation: 'containedTransparentModal',
+    fullScreenSwipeEnabled: true,
+    customAnimationOnSwipe: true,
+  },
+);
 
 export default function TestModalPresentation() {
   return (
diff --git a/TestsExample/src/Test1509.tsx b/TestsExample/src/Test1509.tsx
index 4bef12ae72..60589a0605 100644
--- a/TestsExample/src/Test1509.tsx
+++ b/TestsExample/src/Test1509.tsx
@@ -1,6 +1,6 @@
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import * as React from 'react';
-import {Button, Text, View} from 'react-native';
+import { Button, Text, View } from 'react-native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -12,7 +12,7 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>First Screen</Text>
       <Button
         title="Go to second"
diff --git a/TestsExample/src/Test1539.tsx b/TestsExample/src/Test1539.tsx
index 0902863fb0..332f4a9510 100644
--- a/TestsExample/src/Test1539.tsx
+++ b/TestsExample/src/Test1539.tsx
@@ -1,5 +1,5 @@
-import {NavigationContainer, useNavigation} from '@react-navigation/native';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import * as React from 'react';
 import {
   ReanimatedScreenProvider,
@@ -9,7 +9,7 @@ import Reanimated, {
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
-import {Button} from 'react-native';
+import { Button } from 'react-native';
 
 export default function App() {
   return (
@@ -27,7 +27,7 @@ export default function App() {
 const Stack = createNativeStackNavigator();
 
 function RootScreen() {
-  const {navigate} = useNavigation();
+  const { navigate } = useNavigation();
   const reaProgress = useReanimatedTransitionProgress();
   const sv = useDerivedValue(
     () =>
diff --git a/TestsExample/src/Test1646.tsx b/TestsExample/src/Test1646.tsx
index e9e24d8feb..228fc5b4ce 100644
--- a/TestsExample/src/Test1646.tsx
+++ b/TestsExample/src/Test1646.tsx
@@ -1,8 +1,8 @@
-import {NavigationContainer, useRoute} from '@react-navigation/native';
+import { NavigationContainer, useRoute } from '@react-navigation/native';
 // import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 import * as React from 'react';
-import {Button, View} from 'react-native';
+import { Button, View } from 'react-native';
 
 const Stack = createNativeStackNavigator();
 
@@ -18,14 +18,16 @@ export default function App() {
         <Stack.Screen
           name="Screen"
           component={Screen}
-          options={({route}: any) => ({title: route.params?.title ?? 'Hello'})}
+          options={({ route }: any) => ({
+            title: route.params?.title ?? 'Hello',
+          })}
         />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function Screen({navigation}: any) {
+function Screen({ navigation }: any) {
   const route = useRoute<any>();
   const count = route.params?.count ?? 0;
 
diff --git a/TestsExample/src/Test1649.tsx b/TestsExample/src/Test1649.tsx
index 252237dac7..2822c809ee 100644
--- a/TestsExample/src/Test1649.tsx
+++ b/TestsExample/src/Test1649.tsx
@@ -1,11 +1,10 @@
-/* eslint-disable react/display-name */
 import * as React from 'react';
-import {Button, StyleSheet, View, Text, ScrollView} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, StyleSheet, View, Text, ScrollView } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
-  NativeStackNavigationOptions
+  NativeStackNavigationOptions,
 } from 'react-native-screens/native-stack';
 import { SheetDetentTypes } from 'react-native-screens';
 
@@ -18,8 +17,8 @@ export default function App(): JSX.Element {
     sheetLargestUndimmedDetent: 'medium',
     sheetGrabberVisible: false,
     sheetCornerRadius: -1,
-    sheetExpandsWhenScrolledToEdge: true
-  }
+    sheetExpandsWhenScrolledToEdge: true,
+  };
 
   return (
     <NavigationContainer>
@@ -30,18 +29,30 @@ export default function App(): JSX.Element {
             color: 'cyan',
           },
           headerShown: true,
-          headerHideBackButton: false
+          headerHideBackButton: false,
         }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen name="Second" component={Second} options={{
-          fullScreenSwipeEnabled: true,
-        }} />
-        <Stack.Screen name="SheetScreen" component={SheetScreen} options={{
-          ...initialScreenOptions
-        }}/>
-        <Stack.Screen name="SheetScreenWithScrollView" component={SheetScreenWithScrollView} options={{
-          ...initialScreenOptions
-        }}/>
+        <Stack.Screen
+          name="Second"
+          component={Second}
+          options={{
+            fullScreenSwipeEnabled: true,
+          }}
+        />
+        <Stack.Screen
+          name="SheetScreen"
+          component={SheetScreen}
+          options={{
+            ...initialScreenOptions,
+          }}
+        />
+        <Stack.Screen
+          name="SheetScreenWithScrollView"
+          component={SheetScreenWithScrollView}
+          options={{
+            ...initialScreenOptions,
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
@@ -69,17 +80,16 @@ function Second({
     <>
       <Button
         title="Open the sheet"
-        onPress={() => navigation.navigate("SheetScreen")}
+        onPress={() => navigation.navigate('SheetScreen')}
       />
       <Button
         title="Open the sheet with ScrollView"
-        onPress={() => navigation.navigate("SheetScreenWithScrollView")}
+        onPress={() => navigation.navigate('SheetScreenWithScrollView')}
       />
     </>
-  )
+  );
 }
 
-
 function SheetScreen({
   navigation,
 }: {
@@ -87,101 +97,112 @@ function SheetScreen({
 }) {
   const [radius, setRadius] = React.useState(-1);
   const [detent, setDetent] = React.useState<SheetDetentTypes>('all');
-  const [largestUndimmedDetent, sheetLargestUndimmedDetent] = React.useState<SheetDetentTypes>('all');
+  const [largestUndimmedDetent, sheetLargestUndimmedDetent] =
+    React.useState<SheetDetentTypes>('all');
   const [isGrabberVisible, setIsGrabberVisible] = React.useState(false);
   // navigation
-  const [shouldExpand, setShouldExpand] = React.useState(true)
+  const [shouldExpand, setShouldExpand] = React.useState(true);
 
   function nextDetentLevel(currDetent: SheetDetentTypes): SheetDetentTypes {
-    if (currDetent === "all") {
-      return "medium";
-    } else if (currDetent === "medium") {
-      return "large";
-    } else if (currDetent === "large") {
-      return "all";
+    if (currDetent === 'all') {
+      return 'medium';
+    } else if (currDetent === 'medium') {
+      return 'large';
+    } else if (currDetent === 'large') {
+      return 'all';
     } else {
-      console.warn("Unhandled sheetDetent type")
-      return "all";
+      console.warn('Unhandled sheetDetent type');
+      return 'all';
     }
   }
 
   return (
     <View style={styles.centeredView}>
       <Button
-      title="Tap me for the first screen"
-      onPress={() => navigation.navigate('First')} />
+        title="Tap me for the first screen"
+        onPress={() => navigation.navigate('First')}
+      />
       <Button
-      title="Tap me for the second screen"
-      onPress={() => navigation.navigate('Second')} />
+        title="Tap me for the second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
       <Button
-      title="Change the corner radius"
-      onPress={() => {
-        const newRadius = radius >= 150 ? -1.0 : radius + 50;
-        setRadius(newRadius)
-        navigation.setOptions({
-          sheetCornerRadius: newRadius
-        })
-      }}/>
+        title="Change the corner radius"
+        onPress={() => {
+          const newRadius = radius >= 150 ? -1.0 : radius + 50;
+          setRadius(newRadius);
+          navigation.setOptions({
+            sheetCornerRadius: newRadius,
+          });
+        }}
+      />
       <Text>radius: {radius}</Text>
-      <Button 
+      <Button
         title="Change detent level"
         onPress={() => {
           const newDetentLevel = nextDetentLevel(detent);
-          setDetent(newDetentLevel)
+          setDetent(newDetentLevel);
           navigation.setOptions({
-            sheetAllowedDetents: newDetentLevel
-          })
-        }} 
+            sheetAllowedDetents: newDetentLevel,
+          });
+        }}
       />
       <Text>detent: {detent}</Text>
-      <Button 
+      <Button
         title="Change largest undimmed detent"
         onPress={() => {
           const newDetentLevel = nextDetentLevel(largestUndimmedDetent);
           sheetLargestUndimmedDetent(newDetentLevel);
           navigation.setOptions({
-            sheetLargestUndimmedDetent: newDetentLevel
-          })
+            sheetLargestUndimmedDetent: newDetentLevel,
+          });
         }}
       />
       <Text>largestUndimmedDetent: {largestUndimmedDetent}</Text>
-      <Button 
+      <Button
         title="Toggle sheetExpandsWhenScrolledToEdge"
         onPress={() => {
           setShouldExpand(!shouldExpand);
           navigation.setOptions({
-            sheetExpandsWhenScrolledToEdge: !shouldExpand
-          })
+            sheetExpandsWhenScrolledToEdge: !shouldExpand,
+          });
         }}
       />
-      <Text>sheetExpandsWhenScrolledToEdge: {shouldExpand ? "true" : "false"}</Text>
-      <Button 
+      <Text>
+        sheetExpandsWhenScrolledToEdge: {shouldExpand ? 'true' : 'false'}
+      </Text>
+      <Button
         title="Toggle grabber visibility"
         onPress={() => {
           setIsGrabberVisible(!isGrabberVisible);
           navigation.setOptions({
-            sheetGrabberVisible: !isGrabberVisible
-          })
+            sheetGrabberVisible: !isGrabberVisible,
+          });
         }}
       />
     </View>
   );
 }
 
-function SheetScreenWithScrollView({ navigation }: { navigation: NativeStackNavigationProp<ParamListBase> }) {
+function SheetScreenWithScrollView({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
     <>
-    <View style={styles.centeredView}>
-      <ScrollView>
-        <SheetScreen navigation={navigation} />
-        {[...Array(40).keys()].map((val) => <Text key={`${val}`}>Some component {val}</Text>)}
-      </ScrollView>
-    </View>
+      <View style={styles.centeredView}>
+        <ScrollView>
+          <SheetScreen navigation={navigation} />
+          {[...Array(40).keys()].map(val => (
+            <Text key={`${val}`}>Some component {val}</Text>
+          ))}
+        </ScrollView>
+      </View>
     </>
-  )
+  );
 }
 
-
 const styles = StyleSheet.create({
   headerView: {
     height: 20,
@@ -190,6 +211,6 @@ const styles = StyleSheet.create({
   },
   centeredView: {
     justifyContent: 'center',
-    alignItems: 'center'
-  }
+    alignItems: 'center',
+  },
 });
diff --git a/TestsExample/src/Test1683.tsx b/TestsExample/src/Test1683.tsx
index ae939f6a28..7a8f20b2a3 100644
--- a/TestsExample/src/Test1683.tsx
+++ b/TestsExample/src/Test1683.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import {View, StyleSheet, Button, useColorScheme} from 'react-native';
+import { View, StyleSheet, Button, useColorScheme } from 'react-native';
 import {
   NavigationContainer,
   DarkTheme,
@@ -7,8 +7,8 @@ import {
   Theme,
 } from '@react-navigation/native';
 // import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import React, {createContext, useContext, useState} from 'react';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import React, { createContext, useContext, useState } from 'react';
 
 const RootStack = createNativeStackNavigator();
 
@@ -19,7 +19,7 @@ const ThemeContext = createContext({
 });
 
 const HomeScreen = () => {
-  const {theme, setTheme} = useContext(ThemeContext);
+  const { theme, setTheme } = useContext(ThemeContext);
   return (
     <View style={styles.container}>
       <Button
@@ -34,7 +34,7 @@ const HomeScreen = () => {
 };
 
 const Navigator = () => {
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   // const scheme = useColorScheme();
   return (
     <NavigationContainer
@@ -60,7 +60,7 @@ const Navigator = () => {
 export default function App() {
   const [theme, setTheme] = useState(DefaultTheme);
   return (
-    <ThemeContext.Provider value={{theme: theme, setTheme: setTheme}}>
+    <ThemeContext.Provider value={{ theme: theme, setTheme: setTheme }}>
       <Navigator />
     </ThemeContext.Provider>
   );
diff --git a/TestsExample/src/Test1726.tsx b/TestsExample/src/Test1726.tsx
index fdb225c7fa..bb8267a208 100644
--- a/TestsExample/src/Test1726.tsx
+++ b/TestsExample/src/Test1726.tsx
@@ -1,23 +1,23 @@
-import { NavigationContainer } from "@react-navigation/native";
-import React from "react";
-import { Button, View } from "react-native";
-import { createNativeStackNavigator } from "react-native-screens/native-stack";
+import { NavigationContainer } from '@react-navigation/native';
+import React from 'react';
+import { Button, View } from 'react-native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const RootStack = createNativeStackNavigator();
 
-const Screen1 = ({navigation: {navigate}}) => (
-  <View style={{flex: 1}}>
+const Screen1 = ({ navigation: { navigate } }) => (
+  <View style={{ flex: 1 }}>
     <Button onPress={() => navigate('Screen2')} title="Screen 2" />
   </View>
 );
 
-const Screen2 = ({navigation: {navigate}}) => (
-  <View style={{flex: 1}}>
+const Screen2 = ({ navigation: { navigate } }) => (
+  <View style={{ flex: 1 }}>
     <Button onPress={() => navigate('Screen3')} title="Screen 3" />
   </View>
 );
 
-const Screen3 = () => <View style={{flex: 1}} />;
+const Screen3 = () => <View style={{ flex: 1 }} />;
 
 const App = () => {
   return (
@@ -36,7 +36,7 @@ const App = () => {
           name="Screen3"
           options={{
             headerBackTitle: 'Small title',
-            headerBackTitleStyle: {fontSize: 8},
+            headerBackTitleStyle: { fontSize: 8 },
           }}
         />
       </RootStack.Navigator>
diff --git a/TestsExample/src/Test1791.tsx b/TestsExample/src/Test1791.tsx
index 0efbf58036..8eb0971ce5 100644
--- a/TestsExample/src/Test1791.tsx
+++ b/TestsExample/src/Test1791.tsx
@@ -1,31 +1,31 @@
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import React from 'react';
-import {Button, View} from 'react-native';
+import { Button, View } from 'react-native';
 
 const Stack = createNativeStackNavigator();
 
-const Screen1 = ({navigation}) => (
-  <View style={{flex: 1}}>
+const Screen1 = ({ navigation }) => (
+  <View style={{ flex: 1 }}>
     <Button onPress={() => navigation.navigate('Screen2')} title="Next" />
   </View>
 );
 
-const Screen2 = ({navigation}) => (
-  <View style={{flex: 1}}>
+const Screen2 = ({ navigation }) => (
+  <View style={{ flex: 1 }}>
     <Button onPress={() => navigation.navigate('Screen3')} title="Next" />
   </View>
 );
 
-const Screen3 = ({navigation}) => (
-  <View style={{flex: 1}}>
+const Screen3 = ({ navigation }) => (
+  <View style={{ flex: 1 }}>
     <Button onPress={() => navigation.navigate('Screen4')} title="Next" />
   </View>
 );
 
-const Screen4 = () => <View style={{flex: 1}} />;
+const Screen4 = () => <View style={{ flex: 1 }} />;
 
 const App = () => {
   return (
@@ -45,7 +45,7 @@ const App = () => {
           name="Screen3"
           options={{
             headerBackTitle: 'Small title',
-            headerBackTitleStyle: {fontSize: 8},
+            headerBackTitleStyle: { fontSize: 8 },
           }}
         />
         <Stack.Screen
diff --git a/TestsExample/src/Test263.js b/TestsExample/src/Test263.js
index ebefc95651..c49980f8a6 100644
--- a/TestsExample/src/Test263.js
+++ b/TestsExample/src/Test263.js
@@ -1,13 +1,13 @@
-import React, {Component} from 'react';
-import {StyleSheet, Animated, Button} from 'react-native';
+import React, { Component } from 'react';
+import { StyleSheet, Animated, Button } from 'react-native';
 
 import {
   PanGestureHandler,
   ScrollView,
   State,
 } from 'react-native-gesture-handler';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 function Example() {
   return (
@@ -24,7 +24,7 @@ class DraggableBox extends Component {
     super(props);
     this._translateX = new Animated.Value(0);
     this._translateY = new Animated.Value(0);
-    this._lastOffset = {x: 0, y: 0};
+    this._lastOffset = { x: 0, y: 0 };
     this._onGestureEvent = Animated.event(
       [
         {
@@ -34,11 +34,11 @@ class DraggableBox extends Component {
           },
         },
       ],
-      {useNativeDriver: true},
+      { useNativeDriver: true },
     );
   }
 
-  _onHandlerStateChange = (event) => {
+  _onHandlerStateChange = event => {
     if (event.nativeEvent.oldState === State.ACTIVE) {
       this._lastOffset.x += event.nativeEvent.translationX;
       this._lastOffset.y += event.nativeEvent.translationY;
@@ -60,8 +60,8 @@ class DraggableBox extends Component {
             styles.box,
             {
               transform: [
-                {translateX: this._translateX},
-                {translateY: this._translateY},
+                { translateX: this._translateX },
+                { translateY: this._translateY },
               ],
             },
             this.props.boxStyle,
@@ -74,7 +74,7 @@ class DraggableBox extends Component {
 
 const NativeStack = createNativeStackNavigator();
 
-const HomeScreen = ({navigation}) => {
+const HomeScreen = ({ navigation }) => {
   return (
     <ScrollView
       style={{}}
@@ -94,12 +94,12 @@ export default function ReactNativeScreensBugs() {
           stackPresentation: 'modal',
         }}>
         <NativeStack.Screen
-          options={{headerLargeTitle: true}}
+          options={{ headerLargeTitle: true }}
           name="StickyHeader"
           component={HomeScreen}
         />
         <NativeStack.Screen
-          options={{headerLargeTitle: true, gestureEnabled: true}}
+          options={{ headerLargeTitle: true, gestureEnabled: true }}
           name="Second"
           component={Example}
         />
diff --git a/TestsExample/src/Test349.js b/TestsExample/src/Test349.js
index af64c6d075..6e12baec33 100644
--- a/TestsExample/src/Test349.js
+++ b/TestsExample/src/Test349.js
@@ -1,28 +1,22 @@
 import React from 'react';
-import {
-  StyleSheet,
-  ScrollView,
-  TextInput,
-  View,
-  Text,
-} from 'react-native';
+import { StyleSheet, ScrollView, TextInput, View, Text } from 'react-native';
 
-import {Colors} from 'react-native/Libraries/NewAppScreen';
-import {NavigationContainer} from '@react-navigation/native';
-import {createStackNavigator} from '@react-navigation/stack';
-import {TouchableOpacity} from 'react-native-gesture-handler';
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 
-const LoginScreen = (props) => {
+const LoginScreen = props => {
   return (
     <>
       <TextInput
-        style={{fontSize: 20}}
+        style={{ fontSize: 20 }}
         autoCompleteType={'username'}
         importantForAutofill={'yes'}
         placeholder={'Username'}
       />
       <TextInput
-        style={{fontSize: 20}}
+        style={{ fontSize: 20 }}
         autoCompleteType={'password'}
         importantForAutofill={'yes'}
         placeholder={'Password'}
@@ -41,13 +35,13 @@ const LoginScreen = (props) => {
       </TouchableOpacity>
       <ScrollView>
         <TextInput
-          style={{fontSize: 20}}
+          style={{ fontSize: 20 }}
           autoCompleteType={'username'}
           importantForAutofill={'yes'}
           placeholder={'Username'}
         />
         <TextInput
-          style={{fontSize: 20}}
+          style={{ fontSize: 20 }}
           autoCompleteType={'password'}
           importantForAutofill={'yes'}
           placeholder={'Password'}
@@ -58,7 +52,7 @@ const LoginScreen = (props) => {
   );
 };
 
-const HomeScreen = (props) => {
+const HomeScreen = props => {
   return (
     <View
       style={{
diff --git a/TestsExample/src/Test364.js b/TestsExample/src/Test364.js
index fc99705770..82b4bd6363 100644
--- a/TestsExample/src/Test364.js
+++ b/TestsExample/src/Test364.js
@@ -1,7 +1,10 @@
 // fixed by #712
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';
+import {
+  NavigationContainer,
+  getFocusedRouteNameFromRoute,
+} from '@react-navigation/native';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { enableScreens } from 'react-native-screens';
@@ -80,4 +83,4 @@ export default function App() {
       </Tab.Navigator>
     </NavigationContainer>
   );
-};
+}
diff --git a/TestsExample/src/Test42.tsx b/TestsExample/src/Test42.tsx
index 344b96a8ab..db74a01e9b 100644
--- a/TestsExample/src/Test42.tsx
+++ b/TestsExample/src/Test42.tsx
@@ -1,9 +1,12 @@
 // connected PRs: #679, #675
 import React from 'react';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {ScrollView, Button, Text} from 'react-native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { ScrollView, Button, Text } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 // import {createStackNavigator} from '@react-navigation/stack';
 
 const Stack = createNativeStackNavigator();
@@ -38,14 +41,17 @@ export default function NativeNavigation() {
 const Tab = createBottomTabNavigator();
 
 const NestedNavigator = () => (
-  <Tab.Navigator 
-    screenOptions={{
-      // screenOrientation: 'landscape_left',
-    }}
-  >
+  <Tab.Navigator
+    screenOptions={
+      {
+        // screenOrientation: 'landscape_left',
+      }
+    }>
     <Tab.Screen name="Screen1" component={Home} />
     <Tab.Screen name="Screen2" component={Inner} />
-    <Tab.Screen name="Screen3" component={Home} 
+    <Tab.Screen
+      name="Screen3"
+      component={Home}
       // options={{screenOrientation: 'landscape_right'}}
     />
   </Tab.Navigator>
@@ -62,13 +68,16 @@ const Inner = () => (
   </InnerStack.Navigator>
 );
 
-function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Home({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   const [yes, setYes] = React.useState(true);
   return (
     <ScrollView
-      style={{backgroundColor: 'yellow'}}
-      contentInsetAdjustmentBehavior="automatic"
-      >
+      style={{ backgroundColor: 'yellow' }}
+      contentInsetAdjustmentBehavior="automatic">
       <Button
         title="NestedNavigator"
         onPress={() => {
@@ -96,7 +105,11 @@ function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase
           setYes(!yes);
         }}
       />
-      <Text>Go to `TabNavigator` and then go to second tab there. Spot the difference between dismissing modal with a swipe and with a `Pop to top` button. </Text> 
+      <Text>
+        Go to `TabNavigator` and then go to second tab there. Spot the
+        difference between dismissing modal with a swipe and with a `Pop to top`
+        button.{' '}
+      </Text>
     </ScrollView>
   );
 }
diff --git a/TestsExample/src/Test528.js b/TestsExample/src/Test528.js
index 02bf6a1a4e..2c5ab47324 100644
--- a/TestsExample/src/Test528.js
+++ b/TestsExample/src/Test528.js
@@ -1,23 +1,18 @@
-import React, {useLayoutEffect} from 'react';
-import {
-  View,
-  Text,
-  Pressable,
-  Alert,
-} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import React, { useLayoutEffect } from 'react';
+import { View, Text, Pressable, Alert } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const CustomHeaderRight = () => {
   return (
     <Pressable
       onPress={() => Alert.alert('hi')}
-      style={{backgroundColor: 'orange'}}>
+      style={{ backgroundColor: 'orange' }}>
       <Text>Custom Button</Text>
     </Pressable>
   );
 };
-const Screen1 = (props) => {
+const Screen1 = props => {
   useLayoutEffect(() => {
     props.navigation.setOptions({
       headerRight: () => <CustomHeaderRight />,
@@ -56,14 +51,8 @@ const Stack = createNativeStackNavigator();
 const Router = () => {
   return (
     <Stack.Navigator>
-      <Stack.Screen
-        name="Screen1"
-        component={Screen1}
-      />
-      <Stack.Screen
-        name="Screen2"
-        component={Screen2}
-      />
+      <Stack.Screen name="Screen1" component={Screen1} />
+      <Stack.Screen name="Screen2" component={Screen2} />
     </Stack.Navigator>
   );
 };
diff --git a/TestsExample/src/Test550.js b/TestsExample/src/Test550.js
index 6ec353655b..ed413f92cc 100644
--- a/TestsExample/src/Test550.js
+++ b/TestsExample/src/Test550.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import {Button, ScrollView, StyleSheet} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, ScrollView, StyleSheet } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
     <ScrollView contentContainerStyle={styles.contentContainer}>
       <Button
@@ -31,7 +31,7 @@ function RootStackScreen() {
       <RootStack.Screen
         name="Home"
         component={HomeScreen}
-        options={{headerShown: false}}
+        options={{ headerShown: false }}
       />
       <RootStack.Screen name="Details" component={DetailsScreen} />
     </RootStack.Navigator>
diff --git a/TestsExample/src/Test556.js b/TestsExample/src/Test556.js
index 3987b5d3af..afe262e11b 100644
--- a/TestsExample/src/Test556.js
+++ b/TestsExample/src/Test556.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -10,24 +10,26 @@ export default function App() {
     <NavigationContainer>
       <Stack.Navigator>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
-
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.navigate('Second')}
+    />
   );
 }
 
-function Second({navigation}) {
+function Second({ navigation }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.navigate('First')}
+    />
   );
 }
diff --git a/TestsExample/src/Test564.js b/TestsExample/src/Test564.js
index 4d7ed5dd1a..13437943f3 100644
--- a/TestsExample/src/Test564.js
+++ b/TestsExample/src/Test564.js
@@ -1,24 +1,22 @@
 import React from 'react';
 import { ScrollView, Button } from 'react-native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {NavigationContainer} from '@react-navigation/native';
-
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
 
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
-    <ScrollView
-      contentInsetAdjustmentBehavior="automatic">
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
       <Button
         title="TabNavigator"
         onPress={() => navigation.navigate('TabNavigator')}
       />
     </ScrollView>
   );
-};
+}
 
 const TabNavigator = () => (
   <Tab.Navigator>
@@ -31,7 +29,7 @@ const TabNavigator = () => (
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{headerTranslucent: true}}>
+      <Stack.Navigator screenOptions={{ headerTranslucent: true }}>
         <Stack.Screen name="Home1" component={HomeScreen} />
         <Stack.Screen name="TabNavigator" component={TabNavigator} />
       </Stack.Navigator>
diff --git a/TestsExample/src/Test577.js b/TestsExample/src/Test577.js
index bd8288ca3f..c187cf0ab8 100644
--- a/TestsExample/src/Test577.js
+++ b/TestsExample/src/Test577.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import {StyleSheet, View, Text, Button} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { StyleSheet, View, Text, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 function Home(props) {
   return (
diff --git a/TestsExample/src/Test593.tsx b/TestsExample/src/Test593.tsx
index 7518dd36b7..95a08a150e 100644
--- a/TestsExample/src/Test593.tsx
+++ b/TestsExample/src/Test593.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { createContext, useState, useContext, useEffect } from 'react';
 import {
   ScrollView,
@@ -12,11 +13,14 @@ import {
 } from 'react-native';
 import { nanoid } from 'nanoid/non-secure';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
-import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const Stack = createNativeStackNavigator();
 const NestedStack = createNativeStackNavigator();
@@ -34,7 +38,7 @@ function Deeper({ navigation }: Props) {
           }`,
           backgroundColor: 'orange',
         });
-      }
+      },
     );
 
     return unsubscribe;
@@ -60,9 +64,9 @@ function Deeper({ navigation }: Props) {
         console.warn(
           Platform.OS +
             ' Deeper transitionStart ' +
-            (data.closing ? 'closing' : 'opening')
+            (data.closing ? 'closing' : 'opening'),
         );
-      }
+      },
     );
 
     return unsubscribe;
@@ -73,7 +77,7 @@ function Deeper({ navigation }: Props) {
       console.warn(
         Platform.OS +
           ' Deeper transitionEnd ' +
-          (data.closing ? 'closing' : 'opening')
+          (data.closing ? 'closing' : 'opening'),
       );
     });
 
@@ -81,7 +85,12 @@ function Deeper({ navigation }: Props) {
   }, [navigation]);
 
   return (
-    <NestedStack.Navigator screenOptions={{ headerShown: true, stackAnimation: 'slide_from_right', nativeBackButtonDismissalEnabled: true }}>
+    <NestedStack.Navigator
+      screenOptions={{
+        headerShown: true,
+        stackAnimation: 'slide_from_right',
+        nativeBackButtonDismissalEnabled: true,
+      }}>
       <NestedStack.Screen name="Privacy" component={Privacy} />
       <NestedStack.Screen name="Another" component={Another} />
     </NestedStack.Navigator>
@@ -92,10 +101,14 @@ export default function NativeNavigation() {
   return (
     <NavigationContainer>
       <ToastProvider>
-      <Stack.Navigator screenOptions={{stackAnimation: 'slide_from_bottom',  nativeBackButtonDismissalEnabled: true}}>
-        <Stack.Screen name="Status" component={Status} />
-        <Stack.Screen name="Deeper" component={Deeper} />
-      </Stack.Navigator>
+        <Stack.Navigator
+          screenOptions={{
+            stackAnimation: 'slide_from_bottom',
+            nativeBackButtonDismissalEnabled: true,
+          }}>
+          <Stack.Screen name="Status" component={Status} />
+          <Stack.Screen name="Deeper" component={Deeper} />
+        </Stack.Navigator>
       </ToastProvider>
     </NavigationContainer>
   );
@@ -114,7 +127,7 @@ function Status({ navigation }: Props) {
           }`,
           backgroundColor: 'orange',
         });
-      }
+      },
     );
 
     return unsubscribe;
@@ -132,7 +145,7 @@ function Status({ navigation }: Props) {
 
     return unsubscribe;
   }, [navigation]);
-  
+
   React.useEffect(() => {
     const unsubscribe = navigation.addListener(
       'transitionStart',
@@ -140,9 +153,9 @@ function Status({ navigation }: Props) {
         console.warn(
           Platform.OS +
             ' Status transitionStart ' +
-            (data.closing ? 'closing' : 'opening')
+            (data.closing ? 'closing' : 'opening'),
         );
-      }
+      },
     );
 
     return unsubscribe;
@@ -153,7 +166,7 @@ function Status({ navigation }: Props) {
       console.warn(
         Platform.OS +
           ' Status transitionEnd ' +
-          (data.closing ? 'closing' : 'opening')
+          (data.closing ? 'closing' : 'opening'),
       );
     });
 
@@ -180,7 +193,7 @@ function Privacy({ navigation }: Props) {
           }`,
           backgroundColor: 'orange',
         });
-      }
+      },
     );
 
     return unsubscribe;
@@ -206,9 +219,9 @@ function Privacy({ navigation }: Props) {
         console.warn(
           Platform.OS +
             ' Privacy transitionStart ' +
-            (data.closing ? 'closing' : 'opening')
+            (data.closing ? 'closing' : 'opening'),
         );
-      }
+      },
     );
 
     return unsubscribe;
@@ -219,7 +232,7 @@ function Privacy({ navigation }: Props) {
       console.warn(
         Platform.OS +
           ' Privacy transitionEnd ' +
-          (data.closing ? 'closing' : 'opening')
+          (data.closing ? 'closing' : 'opening'),
       );
     });
 
@@ -246,7 +259,7 @@ function Another({ navigation }: Props) {
           }`,
           backgroundColor: 'orange',
         });
-      }
+      },
     );
 
     return unsubscribe;
@@ -272,9 +285,9 @@ function Another({ navigation }: Props) {
         console.warn(
           Platform.OS +
             ' Another transitionStart ' +
-            (data.closing ? 'closing' : 'opening')
+            (data.closing ? 'closing' : 'opening'),
         );
-      }
+      },
     );
 
     return unsubscribe;
@@ -285,7 +298,7 @@ function Another({ navigation }: Props) {
       console.warn(
         Platform.OS +
           ' Another transitionEnd ' +
-          (data.closing ? 'closing' : 'opening')
+          (data.closing ? 'closing' : 'opening'),
       );
     });
 
@@ -361,15 +374,12 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
   const [toasts, setToasts] = useState(initialState);
 
   const remove = (id: string) => {
-    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+    setToasts(prevToasts => prevToasts.filter(toast => toast.id !== id));
   };
 
   const push = ({ backgroundColor, message }: Omit<IToast, 'id'>): void => {
     const id = nanoid();
-    setToasts((prevToasts) => [
-      ...prevToasts,
-      { id, backgroundColor, message },
-    ]);
+    setToasts(prevToasts => [...prevToasts, { id, backgroundColor, message }]);
   };
 
   return (
diff --git a/TestsExample/src/Test619.js b/TestsExample/src/Test619.js
index 93cd87c665..d66ce94aea 100644
--- a/TestsExample/src/Test619.js
+++ b/TestsExample/src/Test619.js
@@ -1,62 +1,96 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native'
-import { createNativeStackNavigator } from "react-native-screens/native-stack"
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import { createStackNavigator } from '@react-navigation/stack'
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStackNavigator } from '@react-navigation/stack';
 import { View, Text, Button } from 'react-native';
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation } from '@react-navigation/native';
 
-const ParentStack = createNativeStackNavigator()
-const BottomTab = createBottomTabNavigator()
-const ChildStack = createNativeStackNavigator()
-const Tab1Stack = createNativeStackNavigator()
+const ParentStack = createNativeStackNavigator();
+const BottomTab = createBottomTabNavigator();
+const ChildStack = createNativeStackNavigator();
+const Tab1Stack = createNativeStackNavigator();
 
 const DummyContent = () => {
   const navigation = useNavigation();
 
-  return <View style={{flex:1,justifyContent:"center",alignItems:"center", backgroundColor: 'red'}}>
-    <Text style={{marginBottom:20, textAlign:"center"}}>Child Stack</Text>
-    <Button title="Go Back" onPress={() => navigation.goBack()}/>
-  </View>
-}
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'red',
+      }}>
+      <Text style={{ marginBottom: 20, textAlign: 'center' }}>Child Stack</Text>
+      <Button title="Go Back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+};
 
 const ChildStackScreen = () => (
-  <ChildStack.Navigator screenOptions={{headerShown: false, headerLargeTitle: false}}>
+  <ChildStack.Navigator
+    screenOptions={{ headerShown: false, headerLargeTitle: false }}>
     <Tab1Stack.Screen name="ChildStack" component={BottomStackScreen} />
   </ChildStack.Navigator>
-)
+);
 
 const Another = () => (
-  <ChildStack.Navigator screenOptions={{headerShown: true, headerLargeTitle: false}}>
+  <ChildStack.Navigator
+    screenOptions={{ headerShown: true, headerLargeTitle: false }}>
     <Tab1Stack.Screen name="ChildStack1" component={InitialScreen} />
   </ChildStack.Navigator>
-)
+);
 
 const AnotherBottomTabs = () => (
-  <BottomTab.Navigator screenOptions={{headerShown: false}} detachInactiveScreens={true}>
-  <BottomTab.Screen name="Tab2" component={ChildStackScreen} />
-</BottomTab.Navigator>
-)
+  <BottomTab.Navigator
+    screenOptions={{ headerShown: false }}
+    detachInactiveScreens={true}>
+    <BottomTab.Screen name="Tab2" component={ChildStackScreen} />
+  </BottomTab.Navigator>
+);
 
 const BottomStackScreen = () => (
-  <BottomTab.Navigator screenOptions={{headerShown: false}} detachInactiveScreens={true}>
+  <BottomTab.Navigator
+    screenOptions={{ headerShown: false }}
+    detachInactiveScreens={true}>
     <BottomTab.Screen name="Tab1" component={Another} />
   </BottomTab.Navigator>
-)
+);
 
 const InitialScreen = () => {
   const navigation = useNavigation();
 
-  return <View style={{flex:1,justifyContent:"center",alignItems:"center", backgroundColor: 'red'}}><Button title="Click" onPress={() => navigation.navigate('Bottom')}/></View>
-}
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'red',
+      }}>
+      <Button title="Click" onPress={() => navigation.navigate('Bottom')} />
+    </View>
+  );
+};
 
 const App = () => (
   <NavigationContainer>
     <ParentStack.Navigator>
-    <ParentStack.Screen name="Initial" component={BottomStackScreen} options={{ headerShown: false, stackAnimation: 'default' /** set none to fix */ }} />
-    <ParentStack.Screen name="Bottom" component={ChildStackScreen} options={{ headerShown: false }}></ParentStack.Screen>
+      <ParentStack.Screen
+        name="Initial"
+        component={BottomStackScreen}
+        options={{
+          headerShown: false,
+          stackAnimation: 'default' /** set none to fix */,
+        }}
+      />
+      <ParentStack.Screen
+        name="Bottom"
+        component={ChildStackScreen}
+        options={{ headerShown: false }}></ParentStack.Screen>
     </ParentStack.Navigator>
   </NavigationContainer>
 );
 
- export default App;
+export default App;
diff --git a/TestsExample/src/Test624.js b/TestsExample/src/Test624.js
index 2ad4aaca43..44df280d8c 100644
--- a/TestsExample/src/Test624.js
+++ b/TestsExample/src/Test624.js
@@ -6,12 +6,12 @@ import {
   TouchableOpacity,
   TextInput,
 } from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import {
   createStackNavigator,
   CardStyleInterpolators,
 } from '@react-navigation/stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 function First() {
   const NestedStack = createBottomTabNavigator();
@@ -24,7 +24,7 @@ function First() {
   );
 }
 
-function SecondScreen({navigation}) {
+function SecondScreen({ navigation }) {
   return (
     <View style={styles.verticalContainer}>
       <View style={styles.centeredContainer}>
@@ -61,7 +61,7 @@ function SecondScreen({navigation}) {
   );
 }
 
-function ThirdScreen({navigation}) {
+function ThirdScreen({ navigation }) {
   return (
     <View style={styles.verticalContainer}>
       <View style={styles.centeredContainer}>
@@ -79,7 +79,7 @@ function ThirdScreen({navigation}) {
   );
 }
 
-function NestedFirst({navigation}) {
+function NestedFirst({ navigation }) {
   return (
     <View style={styles.verticalContainer}>
       <View style={styles.centeredContainer}>
@@ -116,7 +116,7 @@ function NestedFirst({navigation}) {
   );
 }
 
-function NestedSecond({navigation}) {
+function NestedSecond({ navigation }) {
   return (
     <View style={styles.verticalContainer}>
       <View style={styles.centeredContainer}>
@@ -161,11 +161,11 @@ export default function App() {
       <Stack.Navigator
         detachInactiveScreens={true}
         screenOptions={{
-          presentation: "modal",
+          presentation: 'modal',
           animationEnabled: true,
           transparentCard: true,
           cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
-          headerStyle: {backgroundColor: 'red'},
+          headerStyle: { backgroundColor: 'red' },
           gestureEnabled: true,
           // cardOverlayEnabled: true,
         }}>
diff --git a/TestsExample/src/Test640.js b/TestsExample/src/Test640.js
index f1875f6231..f34c1da112 100644
--- a/TestsExample/src/Test640.js
+++ b/TestsExample/src/Test640.js
@@ -8,25 +8,23 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {NavigationContainer} from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
 
 function wait(timeout) {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     setTimeout(resolve, timeout);
   });
 }
 
-function HomeScreen({navigation}) {
-  return(
-    <Button
-      title="Navigate"
-      onPress={() => navigation.navigate('Modal')} />
+function HomeScreen({ navigation }) {
+  return (
+    <Button title="Navigate" onPress={() => navigation.navigate('Modal')} />
   );
 }
 
-function Modal({navigation}) {
-  const someContent = Array.from({length: 50}, (v, i) => i);
+function Modal({ navigation }) {
+  const someContent = Array.from({ length: 50 }, (v, i) => i);
   const [refreshing, setRefreshing] = React.useState(false);
 
   const onRefresh = React.useCallback(() => {
@@ -42,7 +40,7 @@ function Modal({navigation}) {
       contentInsetAdjustmentBehavior="automatic"
       scrollToOverflowEnabled
       stickyHeaderIndices={[0, 5]}>
-      {someContent.map((x) => (
+      {someContent.map(x => (
         <TouchableOpacity key={x} style={styles.button}>
           <Text>Scroll to {x}</Text>
         </TouchableOpacity>
@@ -56,20 +54,13 @@ export default function App() {
 
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{stackPresentation: 'modal'}}>
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-        />
-        <Stack.Screen
-          name="Modal"
-          component={Modal}
-          options={{}}
-        />
+      <Stack.Navigator screenOptions={{ stackPresentation: 'modal' }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Modal" component={Modal} options={{}} />
       </Stack.Navigator>
     </NavigationContainer>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {
diff --git a/TestsExample/src/Test642.tsx b/TestsExample/src/Test642.tsx
index a1da5e49c2..d92e178309 100644
--- a/TestsExample/src/Test642.tsx
+++ b/TestsExample/src/Test642.tsx
@@ -1,13 +1,16 @@
 // connected PRs: #679, #675
 import React from 'react';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {ScrollView, View, Button} from 'react-native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { ScrollView, View, Button } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const Stack = createNativeStackNavigator();
 
@@ -16,7 +19,7 @@ export default function App(): JSX.Element {
     <NavigationContainer>
       <Stack.Navigator
         screenOptions={{
-          stackPresentation: "modal",
+          stackPresentation: 'modal',
         }}>
         <Stack.Screen
           name="Home"
@@ -38,7 +41,7 @@ export default function App(): JSX.Element {
           component={Home}
           options={{
             statusBarStyle: 'light',
-            stackPresentation: "fullScreenModal",
+            stackPresentation: 'fullScreenModal',
             homeIndicatorHidden: true,
           }}
         />
@@ -69,15 +72,14 @@ const Inner = () => (
   </InnerStack.Navigator>
 );
 
-function Home({navigation}: Props) {
+function Home({ navigation }: Props) {
   const [yes, setYes] = React.useState(true);
   const [hidden, setHidden] = React.useState(true);
   const [animation, setAnimation] = React.useState(true);
   return (
     <ScrollView
-      style={{backgroundColor: 'rgba(255,255,0,0.5)'}}
-      contentInsetAdjustmentBehavior="automatic"
-      >
+      style={{ backgroundColor: 'rgba(255,255,0,0.5)' }}
+      contentInsetAdjustmentBehavior="automatic">
       <View />
       <Button
         title="TabNavigator"
diff --git a/TestsExample/src/Test645.js b/TestsExample/src/Test645.js
index fc09b873c5..b4244a6d81 100644
--- a/TestsExample/src/Test645.js
+++ b/TestsExample/src/Test645.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import {Button, Text, View} from 'react-native';
-import {createStackNavigator} from '@react-navigation/stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, Text, View } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is the home screen!</Text>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
       <Button
         onPress={() => navigation.navigate('Details')}
         title="Go to Details"
@@ -21,9 +21,9 @@ function HomeScreen({navigation}) {
   );
 }
 
-function DetailsScreen({navigation}) {
+function DetailsScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
         onPress={() => navigation.navigate('Settings')}
         title="Go to Settings"
@@ -33,20 +33,20 @@ function DetailsScreen({navigation}) {
   );
 }
 
-function SettingsScreen({navigation}) {
+function SettingsScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.navigate('Home')} title="Go to Home" />
       <Text>Details</Text>
     </View>
   );
 }
 
-function SecondScreen({navigation}) {
+function SecondScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a second screen!</Text>
-      <Button onPress={() => navigation.goBack()} title="go back"/>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a second screen!</Text>
+      <Button onPress={() => navigation.goBack()} title="go back" />
     </View>
   );
 }
@@ -56,7 +56,7 @@ const Tabs = createBottomTabNavigator();
 
 function MainStackScreen() {
   return (
-    <MainStack.Navigator screenOptions={{headerLargeTitle: true}}>
+    <MainStack.Navigator screenOptions={{ headerLargeTitle: true }}>
       <MainStack.Screen name="Main" component={TabsScreen} />
       <MainStack.Screen name="Details" component={DetailsScreen} />
       <MainStack.Screen name="Settings" component={SettingsScreen} />
@@ -68,11 +68,8 @@ function TabsScreen() {
   return (
     <Tabs.Navigator
       detachInactiveScreens={true}
-      screenOptions={{detachPreviousScreen: false}}>
-      <Tabs.Screen
-        name="Home"
-        component={HomeScreen}
-      />
+      screenOptions={{ detachPreviousScreen: false }}>
+      <Tabs.Screen name="Home" component={HomeScreen} />
       <Tabs.Screen name="Second" component={SecondScreen} />
     </Tabs.Navigator>
   );
diff --git a/TestsExample/src/Test648.js b/TestsExample/src/Test648.js
index c8def65002..e84591e81d 100644
--- a/TestsExample/src/Test648.js
+++ b/TestsExample/src/Test648.js
@@ -11,19 +11,16 @@ export default function App() {
       <AppStack.Navigator
         screenOptions={{
           headerLargeTitle: true,
-          stackAnimation: 'slide_from_right'
+          stackAnimation: 'slide_from_right',
         }}>
         <AppStack.Screen name="First" component={First} />
-        <AppStack.Screen
-          name="Second"
-          component={Second}
-        />
+        <AppStack.Screen name="Second" component={Second} />
       </AppStack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
     <ScrollView>
       <Button
@@ -34,7 +31,7 @@ function First({navigation}) {
   );
 }
 
-function Second({navigation}) {
+function Second({ navigation }) {
   return (
     <ScrollView>
       <Button
diff --git a/TestsExample/src/Test649.js b/TestsExample/src/Test649.js
index 8446cba101..0e4454e9ef 100644
--- a/TestsExample/src/Test649.js
+++ b/TestsExample/src/Test649.js
@@ -1,10 +1,7 @@
 import * as React from 'react';
-import {
-  Button,
-  ScrollView,
-} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, ScrollView } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -16,16 +13,13 @@ export default function App() {
           headerLargeTitle: true,
         }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
     <ScrollView>
       <Button
@@ -36,7 +30,7 @@ function First({navigation}) {
   );
 }
 
-function Second({navigation}) {
+function Second({ navigation }) {
   return (
     <ScrollView>
       <Button
diff --git a/TestsExample/src/Test654.js b/TestsExample/src/Test654.js
index f465528d87..94aa5b95d3 100644
--- a/TestsExample/src/Test654.js
+++ b/TestsExample/src/Test654.js
@@ -1,34 +1,35 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{direction: 'rtl'}}>
+      <Stack.Navigator screenOptions={{ direction: 'rtl' }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
-
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.navigate('Second')}
+    />
   );
 }
 
-function Second({navigation}) {
+function Second({ navigation }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.navigate('First')} />
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.navigate('First')}
+    />
   );
 }
-
diff --git a/TestsExample/src/Test658.js b/TestsExample/src/Test658.js
index 41a949384f..9c825a0982 100644
--- a/TestsExample/src/Test658.js
+++ b/TestsExample/src/Test658.js
@@ -1,7 +1,7 @@
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import * as React from 'react';
-import {Button, Dimensions, Text, View} from 'react-native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, Dimensions, Text, View } from 'react-native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -33,7 +33,7 @@ export default function App() {
   );
 }
 
-function Screen({navigation}) {
+function Screen({ navigation }) {
   const addedRoutes = navigation.dangerouslyGetState().routes.length - 1;
   const margin = addedRoutes * 20;
   const width = Dimensions.get('screen').width - addedRoutes * 40;
@@ -41,7 +41,7 @@ function Screen({navigation}) {
   return (
     <View
       style={[
-        {width, margin, backgroundColor, height: '100%', borderWidth: 2},
+        { width, margin, backgroundColor, height: '100%', borderWidth: 2 },
       ]}>
       <Button
         title="Open transparent modal"
@@ -51,11 +51,11 @@ function Screen({navigation}) {
       {addedRoutes > 0 && (
         <Button title="Back" onPress={() => navigation.goBack()} />
       )}
-      <Text style={{padding: 10}}>
+      <Text style={{ padding: 10 }}>
         For each transparent modal you open, all previously visible screens
         should be visible underneath.
       </Text>
-      <Text style={{padding: 10}}>
+      <Text style={{ padding: 10 }}>
         For each new (non-transparent) modal you open, all previously visible
         screens should be hidden.
       </Text>
diff --git a/TestsExample/src/Test662.tsx b/TestsExample/src/Test662.tsx
index 2df94d3e89..046922339e 100644
--- a/TestsExample/src/Test662.tsx
+++ b/TestsExample/src/Test662.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -21,9 +21,13 @@ export default function App(): JSX.Element {
           // stackAnimation: 'slide_from_bottom',
         }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen name="Second" component={Second} options={{
-          replaceAnimation: 'push',
-        }}/>
+        <Stack.Screen
+          name="Second"
+          component={Second}
+          options={{
+            replaceAnimation: 'push',
+          }}
+        />
         <Stack.Screen name="Third" component={Third} />
         <Stack.Screen name="Fourth" component={Fourth} />
       </Stack.Navigator>
@@ -31,8 +35,8 @@ export default function App(): JSX.Element {
   );
 }
 
-const First = ({navigation}: Props): JSX.Element => (
-  <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'blue'}}>
+const First = ({ navigation }: Props): JSX.Element => (
+  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: 'blue' }}>
     <Button
       title="Tap me for the second screen"
       onPress={() => navigation.navigate('Second')}
@@ -44,16 +48,13 @@ const First = ({navigation}: Props): JSX.Element => (
   </View>
 );
 
-const Second = ({navigation}: Props): JSX.Element => (
-  <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'red'}}>
+const Second = ({ navigation }: Props): JSX.Element => (
+  <View style={{ flex: 1, justifyContent: 'center', backgroundColor: 'red' }}>
     <Button
       title="Tap me for the third screen"
       onPress={() => navigation.navigate('Third')}
     />
-    <Button
-      title="Tap me to go back"
-      onPress={() => navigation.goBack()}
-    />
+    <Button title="Tap me to go back" onPress={() => navigation.goBack()} />
     <Button
       title="Replace with first screen"
       onPress={() => navigation.replace('First')}
@@ -61,28 +62,24 @@ const Second = ({navigation}: Props): JSX.Element => (
   </View>
 );
 
-const Third = ({navigation}: Props): JSX.Element => (
-  <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'purple'}}>
+const Third = ({ navigation }: Props): JSX.Element => (
+  <View
+    style={{ flex: 1, justifyContent: 'center', backgroundColor: 'purple' }}>
     <Button
       title="Tap me for fourth screen"
       onPress={() => navigation.navigate('Fourth')}
     />
-    <Button
-      title="Tap me to go back"
-      onPress={() => navigation.goBack()}
-    />
+    <Button title="Tap me to go back" onPress={() => navigation.goBack()} />
   </View>
 );
 
-const Fourth = ({navigation}: Props): JSX.Element => (
-  <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'orange'}}>
+const Fourth = ({ navigation }: Props): JSX.Element => (
+  <View
+    style={{ flex: 1, justifyContent: 'center', backgroundColor: 'orange' }}>
     <Button
       title="Tap me for first screen"
       onPress={() => navigation.navigate('First')}
     />
-    <Button
-      title="Tap me to go back"
-      onPress={() => navigation.goBack()}
-    />
+    <Button title="Tap me to go back" onPress={() => navigation.goBack()} />
   </View>
 );
diff --git a/TestsExample/src/Test691.js b/TestsExample/src/Test691.js
index aac9bb57a1..9b9211387f 100644
--- a/TestsExample/src/Test691.js
+++ b/TestsExample/src/Test691.js
@@ -1,39 +1,35 @@
 import * as React from 'react';
-import {
-  View,
-  Text,
-  Button,
-} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { View, Text, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
-function First({navigation}) {
+function First({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a first screen!</Text>
-      <Button onPress={() => navigation.navigate('Modal')} title="Modal"/>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a first screen!</Text>
+      <Button onPress={() => navigation.navigate('Modal')} title="Modal" />
     </View>
   );
 }
 
-function Modal({navigation}) {
+function Modal({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a modal screen!</Text>
-      <Button onPress={() => navigation.navigate('Tab2')} title="Tab2"/>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a modal screen!</Text>
+      <Button onPress={() => navigation.navigate('Tab2')} title="Tab2" />
     </View>
   );
 }
 
 function Second() {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a second screen!</Text>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a second screen!</Text>
     </View>
   );
 }
@@ -41,24 +37,22 @@ function Second() {
 function ModalStack() {
   return (
     <Stack.Navigator
-    screenOptions={{
-      stackPresentation: 'modal',
-    }}>
-    <Stack.Screen name="First" component={First} />
-    <Stack.Screen name="Modal" component={Modal} />
-  </Stack.Navigator>
-  )
+      screenOptions={{
+        stackPresentation: 'modal',
+      }}>
+      <Stack.Screen name="First" component={First} />
+      <Stack.Screen name="Modal" component={Modal} />
+    </Stack.Navigator>
+  );
 }
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Tab.Navigator screenOptions={{unmountOnBlur: false}}>
+      <Tab.Navigator screenOptions={{ unmountOnBlur: false }}>
         <Tab.Screen name="Tab1" component={ModalStack} />
         <Tab.Screen name="Tab2" component={Second} />
       </Tab.Navigator>
     </NavigationContainer>
   );
 }
-
-
diff --git a/TestsExample/src/Test702.js b/TestsExample/src/Test702.js
index 28f9af504e..56db3253f8 100644
--- a/TestsExample/src/Test702.js
+++ b/TestsExample/src/Test702.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import {Button, Text, View} from 'react-native';
-import {createStackNavigator} from '@react-navigation/stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, Text, View } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is the home screen!</Text>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
       <Button
         onPress={() => navigation.navigate('Details')}
         title="Go to Details"
@@ -30,10 +29,10 @@ function DetailsScreen() {
   );
 }
 
-function ModalScreen({navigation}) {
+function ModalScreen({ navigation }) {
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 30}}>This is a modal!</Text>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
       <Button onPress={() => navigation.goBack()} title="Dismiss" />
     </View>
   );
@@ -57,7 +56,7 @@ function RootStackScreen() {
       <RootStack.Screen
         name="Main"
         component={MainStackScreen}
-        options={{headerShown: false}}
+        options={{ headerShown: false }}
       />
       <RootStack.Screen name="MyModal" component={ModalScreen} />
     </RootStack.Navigator>
diff --git a/TestsExample/src/Test706.js b/TestsExample/src/Test706.js
index 8c673371dc..4534eeb42d 100644
--- a/TestsExample/src/Test706.js
+++ b/TestsExample/src/Test706.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import {Button, Text, ScrollView, View} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, Text, ScrollView, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}) {
+function HomeScreen({ navigation }) {
   return (
     <ScrollView>
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-        <Text style={{fontSize: 24}}>Home screen with a 'bold' title</Text>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text style={{ fontSize: 24 }}>Home screen with a 'bold' title</Text>
         <Button
           onPress={() => navigation.navigate('Details')}
           title="Go to Details"
@@ -33,7 +33,7 @@ function RootStackScreen() {
   return (
     <RootStack.Navigator
       screenOptions={{
-        headerTitleStyle: {fontWeight: '900'},
+        headerTitleStyle: { fontWeight: '900' },
         headerLargeTitle: true,
         headerLargeTitleStyle: {
           fontWeight: '900',
@@ -44,7 +44,7 @@ function RootStackScreen() {
         name="Details"
         component={DetailsScreen}
         options={{
-          headerTitleStyle: {fontWeight: '100'},
+          headerTitleStyle: { fontWeight: '100' },
           headerLargeTitleStyle: {
             fontWeight: '100',
           },
diff --git a/TestsExample/src/Test713.js b/TestsExample/src/Test713.js
index 0c03a4a0f0..001f965671 100644
--- a/TestsExample/src/Test713.js
+++ b/TestsExample/src/Test713.js
@@ -1,70 +1,107 @@
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import React, { useState } from 'react';
 import { Modal, Text, TouchableWithoutFeedback, View } from 'react-native';
-import { createNativeStackNavigator } from "react-native-screens/native-stack"
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 const App = () => {
- return <NavigationContainer>
-    <MyStack />
-  </NavigationContainer>
-}
-export default App
+  return (
+    <NavigationContainer>
+      <MyStack />
+    </NavigationContainer>
+  );
+};
+export default App;
 
-  const Home = () => {
-    const navigation = useNavigation()
-    const [open, setOpen] = useState(false)
+const Home = () => {
+  const navigation = useNavigation();
+  const [open, setOpen] = useState(false);
 
-    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Modal presentationStyle="pageSheet" animationType="slide" visible={open} >
-        <PinnedModalStack/>
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Modal presentationStyle="pageSheet" animationType="slide" visible={open}>
+        <PinnedModalStack />
       </Modal>
-      <TouchableWithoutFeedback onPress={() => navigation.navigate("PinnedModal")}>
+      <TouchableWithoutFeedback
+        onPress={() => navigation.navigate('PinnedModal')}>
         <Text>Go to pinned modal</Text>
       </TouchableWithoutFeedback>
       <TouchableWithoutFeedback onPress={() => setOpen(true)}>
         <Text>open react native modal</Text>
       </TouchableWithoutFeedback>
-     
     </View>
-  }
+  );
+};
 
-  const {Navigator: PinnedModalNavigator, Screen: PinnedModalScreen} = createNativeStackNavigator();
+const { Navigator: PinnedModalNavigator, Screen: PinnedModalScreen } =
+  createNativeStackNavigator();
 
- const PinnedModalStack = ({navigation}) => {
-   return <PinnedModalNavigator>
-   <PinnedModalScreen listeners={{
-     transitionStart: () => console.log("START"),
-     transitionEnd: () => console.log("END"),
-     dismiss:() => console.log("DISMISS")
-   }} name="PinnedModalScreen" component={ScreenWithPinnedBottom} options={{headerLeft: () => {
-     return <TouchableWithoutFeedback onPress={() => navigation.goBack()}><Text>close</Text></TouchableWithoutFeedback>
-    }}}/>
- </PinnedModalNavigator>
-  }
+const PinnedModalStack = ({ navigation }) => {
+  return (
+    <PinnedModalNavigator>
+      <PinnedModalScreen
+        listeners={{
+          transitionStart: () => console.log('START'),
+          transitionEnd: () => console.log('END'),
+          dismiss: () => console.log('DISMISS'),
+        }}
+        name="PinnedModalScreen"
+        component={ScreenWithPinnedBottom}
+        options={{
+          headerLeft: () => {
+            return (
+              <TouchableWithoutFeedback onPress={() => navigation.goBack()}>
+                <Text>close</Text>
+              </TouchableWithoutFeedback>
+            );
+          },
+        }}
+      />
+    </PinnedModalNavigator>
+  );
+};
 
-  const ScreenWithPinnedBottom = () => {
-    const navigation = useNavigation();
+const ScreenWithPinnedBottom = () => {
+  const navigation = useNavigation();
 
-    return <View style={{flex:1, alignItems:"center", top: 10}}>
+  return (
+    <View style={{ flex: 1, alignItems: 'center', top: 10 }}>
       <Text>Pull header upwards on iOS 13 device or higher</Text>
-      <Text>observe wobble and frame getting bigger (text is not longer centered) </Text>
-      <TouchableWithoutFeedback onPress={() => navigation.push("PinnedModal")}>
+      <Text>
+        observe wobble and frame getting bigger (text is not longer centered){' '}
+      </Text>
+      <TouchableWithoutFeedback onPress={() => navigation.push('PinnedModal')}>
         <Text>push another modal</Text>
       </TouchableWithoutFeedback>
 
-      <View style={{position: "absolute", height: 500, bottom:0, left:0, right:0, backgroundColor: "blue", alignItems:"center", justifyContent:"center"}}>
+      <View
+        style={{
+          position: 'absolute',
+          height: 500,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          backgroundColor: 'blue',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
         <Text>Wobble</Text>
       </View>
     </View>
-  }
-  
-  const {Navigator: MainNavigator, Screen: MainScreen} = createNativeStackNavigator();
+  );
+};
+
+const { Navigator: MainNavigator, Screen: MainScreen } =
+  createNativeStackNavigator();
 
-  function MyStack() {
-    return (
-      <MainNavigator initialRouteName={"Home"}>
-        <MainScreen name="Home" component={Home} />
-        <MainScreen name="PinnedModal" component={PinnedModalStack} options={{stackPresentation:"modal"}} />
-      </MainNavigator>
-    );
-  }
+function MyStack() {
+  return (
+    <MainNavigator initialRouteName={'Home'}>
+      <MainScreen name="Home" component={Home} />
+      <MainScreen
+        name="PinnedModal"
+        component={PinnedModalStack}
+        options={{ stackPresentation: 'modal' }}
+      />
+    </MainNavigator>
+  );
+}
diff --git a/TestsExample/src/Test726.js b/TestsExample/src/Test726.js
index 7f43990cde..f11b13695c 100644
--- a/TestsExample/src/Test726.js
+++ b/TestsExample/src/Test726.js
@@ -9,7 +9,8 @@ function TestScreen({ navigation }) {
       <Button
         title="PUSH ME"
         onPress={() => navigation.push('Test')}
-        style={styles.button} />
+        style={styles.button}
+      />
     </View>
   );
 }
@@ -29,15 +30,9 @@ export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator keyboardHandlingEnabled={false}>
-        <Stack.Screen
-          name="Home"
-          component={TestScreen}
-        />
-        <Stack.Screen
-          name="Test"
-          component={TestScreen2}
-        />
-    </Stack.Navigator>
+        <Stack.Screen name="Home" component={TestScreen} />
+        <Stack.Screen name="Test" component={TestScreen2} />
+      </Stack.Navigator>
     </NavigationContainer>
   );
 }
diff --git a/TestsExample/src/Test748.tsx b/TestsExample/src/Test748.tsx
index b4887c471a..350b1fbddf 100644
--- a/TestsExample/src/Test748.tsx
+++ b/TestsExample/src/Test748.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
-import {Button, ScrollView, View} from 'react-native';
-import {NavigationContainer, NavigationProp, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, ScrollView, View } from 'react-native';
+import {
+  NavigationContainer,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function HomeScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   return (
     <Button
       onPress={() => {
@@ -14,16 +22,27 @@ function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
   );
 }
 
-function DetailsScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
-
+function DetailsScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   const [visible, setVisible] = React.useState(true);
 
   return (
     <ScrollView>
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Button
           onPress={() => {
-            navigation.setOptions({headerRight: visible ? () => <View style={{width: 40, height: 40, backgroundColor: 'red'}} /> : () => null})
+            navigation.setOptions({
+              headerRight: visible
+                ? () => (
+                    <View
+                      style={{ width: 40, height: 40, backgroundColor: 'red' }}
+                    />
+                  )
+                : () => null,
+            });
             setVisible(!visible);
           }}
           title="Swap headerRight"
@@ -38,7 +57,7 @@ const RootStack = createNativeStackNavigator();
 function RootStackScreen() {
   return (
     <RootStack.Navigator>
-      <RootStack.Screen name="Home" component={HomeScreen}/>
+      <RootStack.Screen name="Home" component={HomeScreen} />
       <RootStack.Screen name="Details" component={DetailsScreen} />
     </RootStack.Navigator>
   );
diff --git a/TestsExample/src/Test750.js b/TestsExample/src/Test750.js
index 6e57e50ae7..c9dc1b705c 100644
--- a/TestsExample/src/Test750.js
+++ b/TestsExample/src/Test750.js
@@ -23,7 +23,11 @@ const Stack = createNativeStackNavigator();
 function StackNav() {
   return (
     <Stack.Navigator>
-      <Stack.Screen name="Screen1" component={Screen1} options={{ headerShown: true }} />
+      <Stack.Screen
+        name="Screen1"
+        component={Screen1}
+        options={{ headerShown: true }}
+      />
       <Stack.Screen name="Screen2" component={Screen2} />
     </Stack.Navigator>
   );
diff --git a/TestsExample/src/Test758.tsx b/TestsExample/src/Test758.tsx
index dd1f971df2..27516fde5d 100644
--- a/TestsExample/src/Test758.tsx
+++ b/TestsExample/src/Test758.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
-import {Button, NativeSyntheticEvent, ScrollView} from 'react-native';
+import { Button, NativeSyntheticEvent, ScrollView } from 'react-native';
 import {
   NavigationContainer,
   NavigationProp,
@@ -9,7 +10,7 @@ import {
   createNativeStackNavigator,
   NativeStackScreenProps,
 } from 'react-native-screens/native-stack';
-import {SearchBarProps} from 'react-native-screens';
+import { SearchBarProps } from 'react-native-screens';
 
 const AppStack = createNativeStackNavigator();
 
@@ -28,7 +29,7 @@ export default function App(): JSX.Element {
   );
 }
 
-function First({navigation}: NativeStackScreenProps<ParamListBase>) {
+function First({ navigation }: NativeStackScreenProps<ParamListBase>) {
   React.useLayoutEffect(() => {
     navigation.setOptions({
       searchBar: searchBarOptions,
@@ -47,7 +48,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
     autoCapitalize: 'sentences',
     placeholder: 'Some text',
     cancelButtonText: 'Some text',
-    onChangeText: (e: NativeSyntheticEvent<{text: string}>) =>
+    onChangeText: (e: NativeSyntheticEvent<{ text: string }>) =>
       setSearch(e.nativeEvent.text),
     onCancelButtonPress: () => console.warn('Cancel button pressed'),
     onSearchButtonPress: () => console.warn('Search button pressed'),
@@ -80,10 +81,8 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
         onPress={() => navigation.navigate('Second')}
       />
       {items
-        .filter(
-          (item) => item.toLowerCase().indexOf(search.toLowerCase()) !== -1,
-        )
-        .map((item) => (
+        .filter(item => item.toLowerCase().indexOf(search.toLowerCase()) !== -1)
+        .map(item => (
           <Button
             title={item}
             key={item}
@@ -96,7 +95,7 @@ function First({navigation}: NativeStackScreenProps<ParamListBase>) {
   );
 }
 
-function Second({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function Second({ navigation }: { navigation: NavigationProp<ParamListBase> }) {
   return (
     <ScrollView contentInsetAdjustmentBehavior="automatic">
       <Button
diff --git a/TestsExample/src/Test761.tsx b/TestsExample/src/Test761.tsx
index 18ab6dceb9..4a01719922 100644
--- a/TestsExample/src/Test761.tsx
+++ b/TestsExample/src/Test761.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 // import {createStackNavigator} from '@react-navigation/stack';
 
 const Stack = createNativeStackNavigator();
@@ -14,35 +17,44 @@ type SimpleStackParams = {
 export default function App(): JSX.Element {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions=
-      {{
-        stackAnimation: 'simple_push',
-        direction: 'ltr',
+      <Stack.Navigator
+        screenOptions={{
+          stackAnimation: 'simple_push',
+          direction: 'ltr',
         }}>
-        <Stack.Screen name="First" component={First}/>
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="First" component={First} />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}: {navigation: NativeStackNavigationProp<SimpleStackParams, 'First'>}) {
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<SimpleStackParams, 'First'>;
+}) {
   return (
-    <View style={{backgroundColor: 'red', flex: 1}}>
-      <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+    <View style={{ backgroundColor: 'red', flex: 1 }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
     </View>
   );
 }
 
-function Second({navigation}: {navigation: NativeStackNavigationProp<SimpleStackParams, 'Second'>}) {
-
+function Second({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<SimpleStackParams, 'Second'>;
+}) {
   return (
-    <View style={{backgroundColor: 'yellow', flex: 1}}>
-      <Button title="Tap me for first screen" onPress={() => navigation.navigate('First')} />
+    <View style={{ backgroundColor: 'yellow', flex: 1 }}>
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.navigate('First')}
+      />
     </View>
   );
 }
-
diff --git a/TestsExample/src/Test779.tsx b/TestsExample/src/Test779.tsx
index e5f4ba4aa8..230112fff2 100644
--- a/TestsExample/src/Test779.tsx
+++ b/TestsExample/src/Test779.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
-import {Button, ScrollView, View, SafeAreaView} from 'react-native';
-import {NavigationContainer, NavigationProp, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { Button, ScrollView, View, SafeAreaView } from 'react-native';
+import {
+  NavigationContainer,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
-function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function HomeScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   return (
     <SafeAreaView>
       <Button
@@ -16,13 +24,17 @@ function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
   );
 }
 
-function DetailsScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function DetailsScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   return (
-    <ScrollView style={{backgroundColor: 'red'}}>
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <ScrollView style={{ backgroundColor: 'red' }}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Button
           onPress={() => {
-            navigation.goBack()
+            navigation.goBack();
           }}
           title="Go back"
         />
@@ -37,13 +49,17 @@ function DetailsScreen({navigation}: {navigation: NavigationProp<ParamListBase>}
   );
 }
 
-function ProfileScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
+function ProfileScreen({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) {
   return (
-    <ScrollView style={{backgroundColor: 'blue'}}>
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <ScrollView style={{ backgroundColor: 'blue' }}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Button
           onPress={() => {
-            navigation.goBack()
+            navigation.goBack();
           }}
           title="Go back"
         />
@@ -56,11 +72,18 @@ const RootStack = createNativeStackNavigator();
 
 function RootStackScreen() {
   return (
-    <RootStack.Navigator 
-      screenOptions={{stackAnimation: "slide_from_bottom", gestureEnabled: false, headerShown: false}}
-    >
-      <RootStack.Screen name="Home" component={HomeScreen}/>
-      <RootStack.Screen name="Details" component={DetailsScreen} options={{headerShown: true}}/>
+    <RootStack.Navigator
+      screenOptions={{
+        stackAnimation: 'slide_from_bottom',
+        gestureEnabled: false,
+        headerShown: false,
+      }}>
+      <RootStack.Screen name="Home" component={HomeScreen} />
+      <RootStack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{ headerShown: true }}
+      />
       <RootStack.Screen name="Profile" component={ProfileScreen} />
     </RootStack.Navigator>
   );
diff --git a/TestsExample/src/Test780.tsx b/TestsExample/src/Test780.tsx
index 265e6568f5..d55c780071 100644
--- a/TestsExample/src/Test780.tsx
+++ b/TestsExample/src/Test780.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Button,
@@ -7,11 +7,19 @@ import {
   StyleSheet,
   TouchableHighlight,
 } from 'react-native';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 // import {createStackNavigator} from '@react-navigation/stack';
-import {NavigationContainer, NavigationProp, ParamListBase} from '@react-navigation/native';
+import {
+  NavigationContainer,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/native';
 
-const HomeScreen = ({navigation}: {navigation: NavigationProp<ParamListBase>}) => (
+const HomeScreen = ({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) => (
   <ScrollView>
     <View style={styles.screen}>
       <Button
@@ -26,7 +34,11 @@ const HomeScreen = ({navigation}: {navigation: NavigationProp<ParamListBase>}) =
   </ScrollView>
 );
 
-const ModalScreen = ({navigation}: {navigation: NavigationProp<ParamListBase>}) => (
+const ModalScreen = ({
+  navigation,
+}: {
+  navigation: NavigationProp<ParamListBase>;
+}) => (
   <View style={styles.screen}>
     <Button
       onPress={() => navigation.navigate('modalNestedScreen')}
@@ -45,7 +57,10 @@ const NestedScreen = () => {
         onPress={() => setCount(count + 1)}>
         <Text>{`Press count: ${count}`}</Text>
       </TouchableHighlight>
-      <Text>Change nested stacks to "normal" stack navigators to spot buggy behavior in native-stack's modal if fix in RNGH (#1323) not applied</Text>
+      <Text>
+        Change nested stacks to "normal" stack navigators to spot buggy behavior
+        in native-stack's modal if fix in RNGH (#1323) not applied
+      </Text>
     </View>
   );
 };
@@ -54,27 +69,15 @@ const NestedStack = createNativeStackNavigator();
 
 const HomeStack = () => (
   <NestedStack.Navigator>
-    <NestedStack.Screen
-      name="home"
-      component={HomeScreen}
-    />
-    <NestedStack.Screen
-      name="nestedScreen"
-      component={NestedScreen}
-    />
+    <NestedStack.Screen name="home" component={HomeScreen} />
+    <NestedStack.Screen name="nestedScreen" component={NestedScreen} />
   </NestedStack.Navigator>
 );
 
 const ModalStack = () => (
   <NestedStack.Navigator>
-    <NestedStack.Screen
-      name="modalScreen"
-      component={ModalScreen}
-    />
-    <NestedStack.Screen
-      name="modalNestedScreen"
-      component={NestedScreen}
-    />
+    <NestedStack.Screen name="modalScreen" component={ModalScreen} />
+    <NestedStack.Screen name="modalNestedScreen" component={NestedScreen} />
   </NestedStack.Navigator>
 );
 
@@ -87,10 +90,7 @@ const App = () => {
         screenOptions={{
           stackPresentation: 'modal',
         }}>
-        <MainStack.Screen
-          name="home"
-          component={HomeStack}
-        />
+        <MainStack.Screen name="home" component={HomeStack} />
         <MainStack.Screen name="modalScreen" component={ModalStack} />
       </MainStack.Navigator>
     </NavigationContainer>
diff --git a/TestsExample/src/Test791.tsx b/TestsExample/src/Test791.tsx
index d9e7cd7345..f5f504fd08 100644
--- a/TestsExample/src/Test791.tsx
+++ b/TestsExample/src/Test791.tsx
@@ -1,41 +1,55 @@
 import React from 'react';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
-import {StyleSheet, Button, View, Text} from 'react-native';
-import {createNativeStackNavigator, NativeStackScreenProps} from 'react-native-screens/native-stack';
-
-const MainScreen = ({navigation}: NativeStackScreenProps<ParamListBase>) => {
+import { StyleSheet, Button, View, Text } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from 'react-native-screens/native-stack';
 
+const MainScreen = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
   return (
     <View style={styles.screen}>
-      <Button onPress={() => {
-      navigation.push('Push');
-      setTimeout(() => navigation.push('Push'), 10);
-      setTimeout(() => navigation.push('Push'), 20);
-      setTimeout(() => navigation.push('Push'), 30);
-      setTimeout(() => navigation.push('Push'), 40);
-      }} title="Click this button to see the crash if native changes not applied" />
-            <Button onPress={() => {
-      navigation.push('Modal');
-      }} title="Push modal" />
+      <Button
+        onPress={() => {
+          navigation.push('Push');
+          setTimeout(() => navigation.push('Push'), 10);
+          setTimeout(() => navigation.push('Push'), 20);
+          setTimeout(() => navigation.push('Push'), 30);
+          setTimeout(() => navigation.push('Push'), 40);
+        }}
+        title="Click this button to see the crash if native changes not applied"
+      />
+      <Button
+        onPress={() => {
+          navigation.push('Modal');
+        }}
+        title="Push modal"
+      />
       <Text>Issue 791</Text>
     </View>
-  )
-}
+  );
+};
 
-const PushScreen = ({navigation}: NativeStackScreenProps<ParamListBase>) => (
+const PushScreen = ({ navigation }: NativeStackScreenProps<ParamListBase>) => (
   <View style={styles.screen}>
-    <Button onPress={() => {
-      navigation.push('Push');
-      setTimeout(() => navigation.push('Push'), 10);
-      setTimeout(() => navigation.push('Push'), 20);
-      setTimeout(() => navigation.push('Push'), 30);
-      setTimeout(() => navigation.push('Push'), 40);
-      }} title="Click this button to see the crash if native changes not applied" />
-      <Button onPress={() => {
-      navigation.pop();
-      setTimeout(() => navigation.pop(), 10);
-      setTimeout(() => navigation.pop(), 20);
-      }} title="Click this button to pop" />
+    <Button
+      onPress={() => {
+        navigation.push('Push');
+        setTimeout(() => navigation.push('Push'), 10);
+        setTimeout(() => navigation.push('Push'), 20);
+        setTimeout(() => navigation.push('Push'), 30);
+        setTimeout(() => navigation.push('Push'), 40);
+      }}
+      title="Click this button to see the crash if native changes not applied"
+    />
+    <Button
+      onPress={() => {
+        navigation.pop();
+        setTimeout(() => navigation.pop(), 10);
+        setTimeout(() => navigation.pop(), 20);
+      }}
+      title="Click this button to pop"
+    />
   </View>
 );
 
@@ -44,18 +58,12 @@ const Stack = createNativeStackNavigator();
 const App = () => (
   <NavigationContainer>
     <Stack.Navigator>
-      <Stack.Screen
-        name="Main"
-        component={MainScreen}
-      />
-      <Stack.Screen
-        name="Push"
-        component={PushScreen}
-      />
+      <Stack.Screen name="Main" component={MainScreen} />
+      <Stack.Screen name="Push" component={PushScreen} />
       <Stack.Screen
         name="Modal"
         component={PushScreen}
-        options={{ stackPresentation: 'modal'}}
+        options={{ stackPresentation: 'modal' }}
       />
     </Stack.Navigator>
   </NavigationContainer>
diff --git a/TestsExample/src/Test800.tsx b/TestsExample/src/Test800.tsx
index 9fdd3aad5c..dcffcad1a9 100644
--- a/TestsExample/src/Test800.tsx
+++ b/TestsExample/src/Test800.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import * as React from 'react';
-import {Button, StyleSheet, View, Text} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, StyleSheet, View, Text } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -51,18 +51,21 @@ function Second({
   return (
     <>
       <Button
-      title="Tap me for the first screen"
-      onPress={() => navigation.navigate('First')} />
+        title="Tap me for the first screen"
+        onPress={() => navigation.navigate('First')}
+      />
       <Text>{text}</Text>
       <Button
         title="Change text"
-        onPress={() => setText(Math.random().toString())} />
+        onPress={() => setText(Math.random().toString())}
+      />
       <Button
         title="Hide header"
         onPress={() => {
-          navigation.setOptions({headerShown: hidden});
+          navigation.setOptions({ headerShown: hidden });
           setHidden(!hidden);
-      }}/>
+        }}
+      />
     </>
   );
 }
diff --git a/TestsExample/src/Test817.tsx b/TestsExample/src/Test817.tsx
index a352ad59a8..5d4931a6dd 100644
--- a/TestsExample/src/Test817.tsx
+++ b/TestsExample/src/Test817.tsx
@@ -1,9 +1,12 @@
 /* eslint-disable react/display-name */
-import React from "react";
-import { View, Text, Button } from "react-native";
+import React from 'react';
+import { View, Text, Button } from 'react-native';
 
-import { NavigationContainer, ParamListBase } from "@react-navigation/native";
-import { createNativeStackNavigator, NativeStackNavigationProp } from "react-native-screens/native-stack";
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -12,13 +15,9 @@ const App = (): JSX.Element => {
     <NavigationContainer>
       <Stack.Navigator
         screenOptions={{
-          stackAnimation: "slide_from_right",
-        }}
-      >
-        <Stack.Screen
-          name="Home"
-          component={Home}
-        />
+          stackAnimation: 'slide_from_right',
+        }}>
+        <Stack.Screen name="Home" component={Home} />
         <Stack.Screen
           name="Notifications"
           component={Notifications}
@@ -32,15 +31,19 @@ const App = (): JSX.Element => {
   );
 };
 
-function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Home({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   return (
     <View>
       <Button
         title="Navigate"
-        onPress={() => navigation.navigate("Notifications")}
+        onPress={() => navigation.navigate('Notifications')}
       />
     </View>
-  )
+  );
 }
 
 function Notifications() {
diff --git a/TestsExample/src/Test830.tsx b/TestsExample/src/Test830.tsx
index 767d593cc3..bca964e5c9 100644
--- a/TestsExample/src/Test830.tsx
+++ b/TestsExample/src/Test830.tsx
@@ -1,13 +1,14 @@
-import React, {useLayoutEffect} from 'react';
-import {Button, View} from 'react-native';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useLayoutEffect } from 'react';
+import { Button, View } from 'react-native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {NavigationContainer, RouteProp} from '@react-navigation/native';
+import { NavigationContainer, RouteProp } from '@react-navigation/native';
 
 type StackParamList = {
-  Details: {index: number};
+  Details: { index: number };
 };
 interface DetailsScreenProps {
   navigation: NativeStackNavigationProp<StackParamList, 'Details'>;
@@ -30,7 +31,7 @@ const DetailsScreen = ({
     <View>
       <Button
         title={`More details ${index}`}
-        onPress={() => navigation.push('Details', {index: index + 1})}
+        onPress={() => navigation.push('Details', { index: index + 1 })}
       />
     </View>
   );
diff --git a/TestsExample/src/Test831.tsx b/TestsExample/src/Test831.tsx
index 948c6d695b..b833c299e6 100644
--- a/TestsExample/src/Test831.tsx
+++ b/TestsExample/src/Test831.tsx
@@ -1,41 +1,46 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const Stack = createNativeStackNavigator();
 
 export default function App(): JSX.Element {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{direction: 'rtl', headerShown: false}}>
+      <Stack.Navigator screenOptions={{ direction: 'rtl', headerShown: false }}>
         <Stack.Screen name="First" component={First} />
-        <Stack.Screen
-          name="Second"
-          component={Second}
-        />
+        <Stack.Screen name="Second" component={Second} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 }
 
-function First({navigation}: Props) {
+function First({ navigation }: Props) {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}} >
-      <Button title="Tap me for second screen" onPress={() => navigation.navigate('Second')} />
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <Button
+        title="Tap me for second screen"
+        onPress={() => navigation.navigate('Second')}
+      />
     </View>
   );
 }
 
-function Second({navigation}: Props) {
+function Second({ navigation }: Props) {
   return (
-    <View style={{flex: 1, justifyContent: 'center'}} >
-      <Button title="Tap me for first screen" onPress={() => navigation.navigate('First')} />
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.navigate('First')}
+      />
     </View>
   );
 }
-
diff --git a/TestsExample/src/Test844.tsx b/TestsExample/src/Test844.tsx
index 875e7b4fa5..9f96529a3a 100644
--- a/TestsExample/src/Test844.tsx
+++ b/TestsExample/src/Test844.tsx
@@ -1,6 +1,6 @@
-import React, {useEffect, useRef} from 'react';
-import {Text, View, Button, StyleSheet} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React, { useEffect, useRef } from 'react';
+import { Text, View, Button, StyleSheet } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -21,7 +21,7 @@ type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
 };
 
-function Main({navigation}: Props) {
+function Main({ navigation }: Props) {
   const times = useRef(8);
   const id = useRef<any>(0);
 
@@ -48,7 +48,7 @@ function Main({navigation}: Props) {
   );
 }
 
-const Modal = ({navigation}: Props) => (
+const Modal = ({ navigation }: Props) => (
   <View style={styles.container}>
     <Button title="back" onPress={() => navigation.goBack()} />
   </View>
@@ -58,7 +58,7 @@ const ModalStack = createNativeStackNavigator();
 
 const ModalNavigator = () => (
   <ModalStack.Navigator
-    screenOptions={{...defaultOptions, headerTitle: 'modal'}}>
+    screenOptions={{ ...defaultOptions, headerTitle: 'modal' }}>
     <ModalStack.Screen
       name="modal"
       component={Modal}
diff --git a/TestsExample/src/Test852.tsx b/TestsExample/src/Test852.tsx
index 8bc52cc0d8..b8358e520a 100644
--- a/TestsExample/src/Test852.tsx
+++ b/TestsExample/src/Test852.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {Button, View} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { Button, View } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -48,8 +48,8 @@ export default function App(): JSX.Element {
   );
 }
 
-const First = ({navigation}: Props) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
+const First = ({ navigation }: Props) => (
+  <View style={{ flex: 1, justifyContent: 'center' }}>
     <Button
       title="Tap me for second screen"
       onPress={() => navigation.navigate('Second')}
@@ -57,8 +57,8 @@ const First = ({navigation}: Props) => (
   </View>
 );
 
-const Second = ({navigation}: Props) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
+const Second = ({ navigation }: Props) => (
+  <View style={{ flex: 1, justifyContent: 'center' }}>
     <Button
       title="Tap me for third screen"
       onPress={() => navigation.navigate('Third')}
@@ -66,8 +66,8 @@ const Second = ({navigation}: Props) => (
   </View>
 );
 
-const Third = ({navigation}: Props) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
+const Third = ({ navigation }: Props) => (
+  <View style={{ flex: 1, justifyContent: 'center' }}>
     <Button
       title="Tap me for first screen"
       onPress={() => navigation.navigate('First')}
diff --git a/TestsExample/src/Test860.tsx b/TestsExample/src/Test860.tsx
index 6aafb00021..38e9d69c79 100644
--- a/TestsExample/src/Test860.tsx
+++ b/TestsExample/src/Test860.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {ScrollView, Button, Text} from 'react-native';
-import {createNativeStackNavigator, NativeStackNavigationProp, NativeStackNavigationOptions} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { ScrollView, Button, Text } from 'react-native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+  NativeStackNavigationOptions,
+} from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 // import {createStackNavigator} from '@react-navigation/stack';
 
 const Stack = createNativeStackNavigator();
@@ -51,18 +55,25 @@ export default function NativeNavigation() {
 const Tab = createBottomTabNavigator();
 
 const NestedNavigator = () => (
-  <Tab.Navigator screenOptions={{           
-    //  statusBarColor: 'purple',
-    //  statusBarStyle: 'light',
-  }}>
+  <Tab.Navigator
+    screenOptions={
+      {
+        //  statusBarColor: 'purple',
+        //  statusBarStyle: 'light',
+      }
+    }>
     <Tab.Screen name="Screen1" component={Home} />
     <Tab.Screen name="Screen2" component={Inner} />
-    <Tab.Screen name="Screen3" component={Home}
-      options={{
-        // statusBarColor: 'powderblue', 
-        // statusBarStyle: 'dark',
-      }}
-      />
+    <Tab.Screen
+      name="Screen3"
+      component={Home}
+      options={
+        {
+          // statusBarColor: 'powderblue',
+          // statusBarStyle: 'dark',
+        }
+      }
+    />
   </Tab.Navigator>
 );
 
@@ -82,21 +93,27 @@ const Inner = () => (
   </InnerStack.Navigator>
 );
 
-function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+function Home({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
   const [statusBarColor, setStatusBarColor] = React.useState('mediumseagreen');
-  const [statusBarStyle, setStatusBarStyle] = React.useState<NativeStackNavigationOptions['statusBarStyle']>('dark');
+  const [statusBarStyle, setStatusBarStyle] =
+    React.useState<NativeStackNavigationOptions['statusBarStyle']>('dark');
   const [statusBarHidden, setStatusBarHidden] = React.useState(false);
   const [statusBarTranslucent, setStatusBarTranslucent] = React.useState(true);
-  const [statusBarAnimation, setStatusBarAnimation] = React.useState<NativeStackNavigationOptions['statusBarAnimation']>('slide');
+  const [statusBarAnimation, setStatusBarAnimation] =
+    React.useState<NativeStackNavigationOptions['statusBarAnimation']>('slide');
   const [navigationBarColor, setNavigationBarColor] = React.useState('green');
   const [navigationBarHidden, setNavigationBarHidden] = React.useState(false);
-  const [headerTopInsetEnabled, setHeaderTopInsetEnabled] = React.useState(false);
+  const [headerTopInsetEnabled, setHeaderTopInsetEnabled] =
+    React.useState(false);
 
   return (
     <ScrollView
-      style={{backgroundColor: 'yellow'}}
-      contentInsetAdjustmentBehavior="automatic"
-      >
+      style={{ backgroundColor: 'yellow' }}
+      contentInsetAdjustmentBehavior="automatic">
       <Button
         title="NestedNavigator"
         onPress={() => {
@@ -121,16 +138,25 @@ function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase
           navigation.setOptions({
             statusBarColor,
           });
-          setStatusBarColor(statusBarColor === 'mediumseagreen' ? 'rgba(255,128,128,0.5)' : 'mediumseagreen');
+          setStatusBarColor(
+            statusBarColor === 'mediumseagreen'
+              ? 'rgba(255,128,128,0.5)'
+              : 'mediumseagreen',
+          );
         }}
       />
       <Button
         title="Change status bar color in parent native-stack"
         onPress={() => {
-          navigation.dangerouslyGetParent()?.dangerouslyGetParent()?.setOptions({
-            statusBarColor,
-          });
-          setStatusBarColor(statusBarColor === 'mediumseagreen' ? 'orange' : 'mediumseagreen');
+          navigation
+            .dangerouslyGetParent()
+            ?.dangerouslyGetParent()
+            ?.setOptions({
+              statusBarColor,
+            });
+          setStatusBarColor(
+            statusBarColor === 'mediumseagreen' ? 'orange' : 'mediumseagreen',
+          );
         }}
       />
       <Button
@@ -160,7 +186,7 @@ function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase
           setHeaderTopInsetEnabled(!headerTopInsetEnabled);
         }}
       />
-            <Button
+      <Button
         title="Change status bar translucent"
         onPress={() => {
           navigation.setOptions({
@@ -169,13 +195,15 @@ function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase
           setStatusBarTranslucent(!statusBarTranslucent);
         }}
       />
-            <Button
+      <Button
         title="Change status bar animation"
         onPress={() => {
           navigation.setOptions({
             statusBarAnimation,
           });
-          setStatusBarAnimation(statusBarAnimation === 'none' ? 'slide' : 'none');
+          setStatusBarAnimation(
+            statusBarAnimation === 'none' ? 'slide' : 'none',
+          );
         }}
       />
       <Button
@@ -184,7 +212,9 @@ function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase
           navigation.setOptions({
             navigationBarColor,
           });
-          setNavigationBarColor(navigationBarColor === 'green' ? 'powderblue' : 'green');
+          setNavigationBarColor(
+            navigationBarColor === 'green' ? 'powderblue' : 'green',
+          );
         }}
       />
       <Button
@@ -196,7 +226,11 @@ function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase
           setNavigationBarHidden(!navigationBarHidden);
         }}
       />
-      <Text>Go to `TabNavigator` and then go to second tab there. Spot the difference between dismissing modal with a swipe and with a `Pop to top` button. </Text> 
+      <Text>
+        Go to `TabNavigator` and then go to second tab there. Spot the
+        difference between dismissing modal with a swipe and with a `Pop to top`
+        button.{' '}
+      </Text>
     </ScrollView>
   );
 }
diff --git a/TestsExample/src/Test861.tsx b/TestsExample/src/Test861.tsx
index af699d2c89..0b637b566e 100644
--- a/TestsExample/src/Test861.tsx
+++ b/TestsExample/src/Test861.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {Button, SafeAreaView} from 'react-native';
+import { Button, SafeAreaView } from 'react-native';
 
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -31,7 +31,7 @@ const App = (): JSX.Element => {
   );
 };
 
-const First = ({navigation}: Props) => (
+const First = ({ navigation }: Props) => (
   <SafeAreaView>
     <Button
       title="Go to second screen"
@@ -40,8 +40,8 @@ const First = ({navigation}: Props) => (
   </SafeAreaView>
 );
 
-const Second = ({navigation}: Props) => (
-  <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
+const Second = ({ navigation }: Props) => (
+  <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
     <Button title="Go back" onPress={() => navigation.goBack()} />
   </SafeAreaView>
 );
diff --git a/TestsExample/src/Test865.tsx b/TestsExample/src/Test865.tsx
index 93e375623d..67545d8517 100644
--- a/TestsExample/src/Test865.tsx
+++ b/TestsExample/src/Test865.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {View, Text, Button} from 'react-native';
+import { View, Text, Button } from 'react-native';
 
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -14,8 +14,8 @@ const First = ({
 }: {
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
-    <Text style={{paddingBottom: 24, textAlign: 'center'}}>Screen 1</Text>
+  <View style={{ flex: 1, justifyContent: 'center' }}>
+    <Text style={{ paddingBottom: 24, textAlign: 'center' }}>Screen 1</Text>
     <Button
       title="PUSH TO SCREEN 2"
       onPress={() => navigation.push('Screen2')}
@@ -28,8 +28,8 @@ const Second = ({
 }: {
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
-    <Text style={{paddingBottom: 24, textAlign: 'center'}}>Screen 2</Text>
+  <View style={{ flex: 1, justifyContent: 'center' }}>
+    <Text style={{ paddingBottom: 24, textAlign: 'center' }}>Screen 2</Text>
     <Button
       title="PUSH TO SCREEN 3"
       onPress={() => navigation.push('Screen3')}
@@ -42,13 +42,13 @@ const Third = ({
 }: {
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) => (
-  <View style={{flex: 1, justifyContent: 'center'}}>
-    <Text style={{paddingBottom: 24, textAlign: 'center'}}>Screen 3</Text>
+  <View style={{ flex: 1, justifyContent: 'center' }}>
+    <Text style={{ paddingBottom: 24, textAlign: 'center' }}>Screen 3</Text>
     <Button
       title="RESET TO SCREEN 1 WITH INDEX OF 0"
       onPress={() =>
         navigation.reset({
-          routes: [{name: 'Screen1'}],
+          routes: [{ name: 'Screen1' }],
           index: 0,
         })
       }
diff --git a/TestsExample/src/Test881.tsx b/TestsExample/src/Test881.tsx
index fe4146d787..9bd01569a2 100644
--- a/TestsExample/src/Test881.tsx
+++ b/TestsExample/src/Test881.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {View} from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
 
-const View1 = () => <View style={{flex: 1, backgroundColor: 'red'}} />;
-const View2 = () => <View style={{flex: 1, backgroundColor: 'blue'}} />;
-const View3 = () => <View style={{flex: 1, backgroundColor: 'yellow'}} />;
+const View1 = () => <View style={{ flex: 1, backgroundColor: 'red' }} />;
+const View2 = () => <View style={{ flex: 1, backgroundColor: 'blue' }} />;
+const View3 = () => <View style={{ flex: 1, backgroundColor: 'yellow' }} />;
 
 const Stack1 = createNativeStackNavigator();
 const Stack2 = createNativeStackNavigator();
diff --git a/TestsExample/src/Test887.tsx b/TestsExample/src/Test887.tsx
index 79f774d3d8..961af35de6 100644
--- a/TestsExample/src/Test887.tsx
+++ b/TestsExample/src/Test887.tsx
@@ -9,12 +9,12 @@ import {
   Dimensions,
   SafeAreaView,
 } from 'react-native';
-import {NavigationContainer} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import {useTransitionProgress} from 'react-native-screens';
+import { useTransitionProgress } from 'react-native-screens';
 import {
   useReanimatedTransitionProgress,
   ReanimatedScreenProvider,
@@ -23,7 +23,7 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
-import {createStackNavigator} from '@react-navigation/stack';
+import { createStackNavigator } from '@react-navigation/stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -57,7 +57,7 @@ export default function App(): JSX.Element {
           <Stack.Screen
             name="Third"
             component={Dialog}
-            options={{stackPresentation: 'modal'}}
+            options={{ stackPresentation: 'modal' }}
           />
         </Stack.Navigator>
       </NavigationContainer>
@@ -82,7 +82,7 @@ function SiblingView() {
     };
   });
 
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
 
   const opacity = progress.interpolate({
     inputRange: [0, 0.5, 1],
@@ -94,7 +94,7 @@ function SiblingView() {
     <>
       <Animated.View style={reaStyle} />
       <RNAnimated.View
-        style={{opacity, height: 50, width: '100%', backgroundColor: 'green'}}
+        style={{ opacity, height: 50, width: '100%', backgroundColor: 'green' }}
       />
     </>
   );
@@ -121,7 +121,7 @@ function First({
     };
   });
 
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
 
   const opacity = progress.interpolate({
     inputRange: [0, 0.5, 1],
@@ -130,7 +130,7 @@ function First({
   });
 
   return (
-    <View style={{backgroundColor: 'red', flex: 1}}>
+    <View style={{ backgroundColor: 'red', flex: 1 }}>
       <Button
         title="Tap me for second screen"
         onPress={() => navigation.navigate('Second')}
@@ -143,7 +143,7 @@ function First({
       <SiblingView />
       <SiblingView />
       <RNAnimated.View
-        style={{opacity, height: 50, width: '100%', backgroundColor: 'green'}}
+        style={{ opacity, height: 50, width: '100%', backgroundColor: 'green' }}
       />
     </View>
   );
@@ -155,7 +155,7 @@ function Second({
   navigation: NativeStackNavigationProp<SimpleStackParams, 'Second'>;
 }) {
   // using Animated.Value with the progress from context
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
 
   const opacity = progress.interpolate({
     inputRange: [0, 0.5, 1],
@@ -175,7 +175,7 @@ function Second({
   // })
 
   return (
-    <View style={{backgroundColor: 'yellow', flex: 1}}>
+    <View style={{ backgroundColor: 'yellow', flex: 1 }}>
       <Button
         title="Tap me for first screen"
         onPress={() => navigation.navigate('First')}
@@ -189,7 +189,7 @@ function Second({
         onPress={() => navigation.push('Third')}
       />
       <RNAnimated.View
-        style={{opacity, height: 50, backgroundColor: 'green'}}
+        style={{ opacity, height: 50, backgroundColor: 'green' }}
       />
     </View>
   );
@@ -201,7 +201,7 @@ const Dialog = ({
   navigation: NativeStackNavigationProp<SimpleStackParams, 'Third'>;
 }): JSX.Element => {
   // using Animated with the progress
-  const {progress} = useTransitionProgress();
+  const { progress } = useTransitionProgress();
   const reaProgress = useReanimatedTransitionProgress();
   const sv = useDerivedValue(
     () =>
@@ -237,7 +237,7 @@ const Dialog = ({
         />
         <Animated.View style={reaStyle} />
         <TouchableOpacity
-          style={{...styles.button}}
+          style={{ ...styles.button }}
           onPress={() => navigation.goBack()}>
           <Text style={styles.buttonText}>Please no.</Text>
         </TouchableOpacity>
diff --git a/TestsExample/src/Test898.tsx b/TestsExample/src/Test898.tsx
index 1db1b428ab..b2e01e1b2a 100644
--- a/TestsExample/src/Test898.tsx
+++ b/TestsExample/src/Test898.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useEffect, RefObject } from 'react';
 import Animated, {
   useSharedValue,
@@ -11,23 +12,19 @@ import Animated, {
   measure,
   runOnJS,
 } from 'react-native-reanimated';
-import {
-  Dimensions,
-  StyleSheet,
-  View,
-  Image,
-  Platform,
-} from 'react-native';
+import { Dimensions, StyleSheet, View, Image, Platform } from 'react-native';
 import {
   ScrollView,
   PanGestureHandler,
   TapGestureHandler,
   TapGestureHandlerGestureEvent,
 } from 'react-native-gesture-handler';
-import {createNativeStackNavigator} from 'react-native-screens/native-stack';
-import {NavigationContainer} from '@react-navigation/native';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
-
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 const AnimatedImage = Animated.createAnimatedComponent(Image);
 
@@ -58,7 +55,7 @@ type ActiveExampleImage = ActiveExampleImageProperties & {
 type onItemPressFn = <T>(
   animatedRef: RefObject<T>,
   item: ExampleImage,
-  svs: ActiveExampleImageProperties
+  svs: ActiveExampleImageProperties,
 ) => void;
 function ImageList({
   images,
@@ -167,14 +164,14 @@ function ImageTransition({
 
   const targetX = useSharedValue(0);
   const targetY = useSharedValue(
-    (dimensions.height - targetHeight) / 2 - headerHeight
+    (dimensions.height - targetHeight) / 2 - headerHeight,
   );
 
   const translateX = useSharedValue(0);
   const translateY = useSharedValue(0);
 
   const onPan = useAnimatedGestureHandler({
-    onActive: (event) => {
+    onActive: event => {
       translateX.value = event.translationX;
       translateY.value = event.translationY;
 
@@ -182,14 +179,14 @@ function ImageTransition({
         translateY.value,
         [-200, 0, 200],
         [0.65, 1, 0.65],
-        Extrapolate.CLAMP
+        Extrapolate.CLAMP,
       );
 
       backdropOpacity.value = interpolate(
         translateY.value,
         [-100, 0, 100],
         [0, 1, 0],
-        Extrapolate.CLAMP
+        Extrapolate.CLAMP,
       );
     },
 
@@ -209,7 +206,7 @@ function ImageTransition({
             },
             () => {
               runOnJS(onClose)();
-            }
+            },
           );
         });
 
@@ -286,14 +283,14 @@ const images: ExampleImage[] = Array.from({ length: 30 }, (_, index) => {
 
 function LightboxExample(): React.ReactElement {
   const [activeImage, setActiveImage] = useState<ActiveExampleImage | null>(
-    null
+    null,
   );
 
   function onItemPress(
     // @ts-ignore: FIXME AnimatedImage type
     animatedRef: RefObject<AnimatedImage>,
     item: ExampleImage,
-    svs: ActiveExampleImageProperties
+    svs: ActiveExampleImageProperties,
   ) {
     setActiveImage({
       animatedRef,
@@ -341,7 +338,7 @@ const styles = StyleSheet.create({
 const Stack = createNativeStackNavigator();
 
 export default function App() {
-  return(
+  return (
     <SafeAreaProvider>
       <NavigationContainer>
         <Stack.Navigator>
@@ -349,5 +346,5 @@ export default function App() {
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaProvider>
-  )
+  );
 }
diff --git a/TestsExample/src/Test913.tsx b/TestsExample/src/Test913.tsx
index 036555dc42..8945c8b751 100644
--- a/TestsExample/src/Test913.tsx
+++ b/TestsExample/src/Test913.tsx
@@ -1,28 +1,31 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { View, Text } from 'react-native';
 
-const BottomTab = createBottomTabNavigator()
-const Tab1Stack = createStackNavigator()
+const BottomTab = createBottomTabNavigator();
+const Tab1Stack = createStackNavigator();
 
 const CastScreen = () => (
-  <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
-    <Text style={{marginBottom:20, textAlign:"center"}}>Add logging in `onDetachedFromWindow` in child Screen to see that method triggered twice without the changes</Text>
-    <Text style={{position:"absolute", bottom:0, alignSelf:"flex-end"}}>↓touch Tab2↓</Text>
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Text style={{ marginBottom: 20, textAlign: 'center' }}>
+      Add logging in `onDetachedFromWindow` in child Screen to see that method
+      triggered twice without the changes
+    </Text>
+    <Text style={{ position: 'absolute', bottom: 0, alignSelf: 'flex-end' }}>
+      ↓touch Tab2↓
+    </Text>
   </View>
-)
+);
 
-const Tab2Screen = () => (
-  <View />
-)
+const Tab2Screen = () => <View />;
 
 const Tab1StackNavigator = () => (
   <Tab1Stack.Navigator initialRouteName="CastScreen">
     <Tab1Stack.Screen name="CastScreen" component={CastScreen} />
   </Tab1Stack.Navigator>
-)
+);
 
 const App = () => (
   <NavigationContainer>
@@ -33,4 +36,4 @@ const App = () => (
   </NavigationContainer>
 );
 
- export default App;
+export default App;
diff --git a/TestsExample/src/Test999.tsx b/TestsExample/src/Test999.tsx
index b1378ab120..e4f7f44350 100644
--- a/TestsExample/src/Test999.tsx
+++ b/TestsExample/src/Test999.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
-import {Button} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
-import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+import { Button } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -9,11 +12,15 @@ export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator>
-        <Stack.Screen name="First" component={First} options={{replaceAnimation: 'push'}}/>
+        <Stack.Screen
+          name="First"
+          component={First}
+          options={{ replaceAnimation: 'push' }}
+        />
         <Stack.Screen
           name="Second"
           component={Second}
-          options={{replaceAnimation: 'pop'}}
+          options={{ replaceAnimation: 'pop' }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -26,8 +33,10 @@ function First({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.replace('Second')} />
-
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.replace('Second')}
+    />
   );
 }
 
@@ -37,7 +46,9 @@ function Second({
   navigation: NativeStackNavigationProp<ParamListBase>;
 }) {
   return (
-    <Button title="Tap me for second screen" onPress={() => navigation.replace('First')} />
+    <Button
+      title="Tap me for second screen"
+      onPress={() => navigation.replace('First')}
+    />
   );
 }
-
diff --git a/TestsExample/src/TestFreeze.tsx b/TestsExample/src/TestFreeze.tsx
index 1ebca32564..ec52710dde 100644
--- a/TestsExample/src/TestFreeze.tsx
+++ b/TestsExample/src/TestFreeze.tsx
@@ -1,6 +1,6 @@
-import React, {useState, useEffect} from 'react';
-import {View, Text, Button, ScrollView} from 'react-native';
-import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import React, { useState, useEffect } from 'react';
+import { View, Text, Button, ScrollView } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 // import {createStackNavigator} from '@react-navigation/stack';
 // import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {
@@ -33,7 +33,7 @@ function HomeScreen({
 }) {
   const value = useValue();
   return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen {value}</Text>
       <Button
         title="Go to Details"
@@ -53,13 +53,13 @@ function DetailsScreen({
   console.log('render', value);
   return (
     <ScrollView>
-      <View style={{height: 400}} />
-      <Text style={{alignSelf: 'center'}}>Details Screen {value}</Text>
+      <View style={{ height: 400 }} />
+      <Text style={{ alignSelf: 'center' }}>Details Screen {value}</Text>
       <Button
         title="Go to Details"
         onPress={() => navigation.push('Details')}
       />
-      <View style={{height: 800}} />
+      <View style={{ height: 800 }} />
     </ScrollView>
   );
 }
@@ -71,7 +71,7 @@ function App() {
     let timer = 0;
     const interval = setInterval(() => {
       timer = timer + 1;
-      store.forEach((dispatch) => dispatch(timer));
+      store.forEach(dispatch => dispatch(timer));
     }, 3000);
     return () => clearInterval(interval);
   }, []);
diff --git a/TestsExample/tsconfig.json b/TestsExample/tsconfig.json
index b5426ba39e..7b91fe07ca 100644
--- a/TestsExample/tsconfig.json
+++ b/TestsExample/tsconfig.json
@@ -2,6 +2,6 @@
   "extends": "@tsconfig/react-native/tsconfig.json",
   "include": ["**/*.ts", "**/*.tsx", "**/*.js"],
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "."
   }
 }