From b643c2f8d2f8c9612ee014ecb266799295b55df8 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 7 Jul 2023 09:32:07 +0200
Subject: [PATCH] Reformat part of test examples in TestsExample app

---
 TestsExample/src/Test1031.tsx |  38 ++++++++----
 TestsExample/src/Test1032.tsx |   5 +-
 TestsExample/src/Test1036.tsx |   6 +-
 TestsExample/src/Test1072.tsx |  18 +++---
 TestsExample/src/Test1084.tsx |  10 +++-
 TestsExample/src/Test1096.tsx |  15 ++---
 TestsExample/src/Test1097.tsx |  22 ++++---
 TestsExample/src/Test111.js   |   3 +-
 TestsExample/src/Test1153.tsx |   2 +-
 TestsExample/src/Test1162.tsx |   5 +-
 TestsExample/src/Test1190.tsx |  42 ++++++++++----
 TestsExample/src/Test1214.tsx |  33 +++++++----
 TestsExample/src/Test1228.tsx |  25 ++++----
 TestsExample/src/Test1260.tsx |  33 +++++++----
 TestsExample/src/Test1296.tsx |  43 ++++++++------
 TestsExample/src/Test1299.tsx |  37 ++++++------
 TestsExample/src/Test1391.tsx |  28 ++++-----
 TestsExample/src/Test1419.tsx |  72 +++++++++++++----------
 TestsExample/src/Test1473.tsx |  23 +++++---
 TestsExample/src/Test1476.tsx | 105 ++++++++++++++++++++--------------
 20 files changed, 344 insertions(+), 221 deletions(-)

diff --git a/TestsExample/src/Test1031.tsx b/TestsExample/src/Test1031.tsx
index 74a874dfc0..c74b5a6567 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 {
+  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..7857679c9e 100644
--- a/TestsExample/src/Test1032.tsx
+++ b/TestsExample/src/Test1032.tsx
@@ -44,7 +44,10 @@ function First({
 function Second() {
   return (
     <View style={{backgroundColor: '#FFF'}}>
-      <Button title="Swipe back to see if button click triggers" onPress={() => Alert.alert('Click detected')} />
+      <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..080e438cc1 100644
--- a/TestsExample/src/Test1036.tsx
+++ b/TestsExample/src/Test1036.tsx
@@ -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..750cafa8d2 100644
--- a/TestsExample/src/Test1072.tsx
+++ b/TestsExample/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}>
@@ -80,14 +80,14 @@ 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) => {
+  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/TestsExample/src/Test1084.tsx b/TestsExample/src/Test1084.tsx
index b0914c303c..27c4ed3934 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 {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -42,7 +45,10 @@ function Second({
 }) {
   return (
     <View style={{flex: 1, backgroundColor: 'yellow'}}>
-      <Button title="Tap me for first screen" onPress={() => navigation.goBack()} />
+      <Button
+        title="Tap me for first screen"
+        onPress={() => navigation.goBack()}
+      />
     </View>
   );
 }
diff --git a/TestsExample/src/Test1096.tsx b/TestsExample/src/Test1096.tsx
index a9a214e575..88ec279d7e 100644
--- a/TestsExample/src/Test1096.tsx
+++ b/TestsExample/src/Test1096.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-import { Button, StyleSheet, View, Modal } from 'react-native';
+import {Button, StyleSheet, View, Modal} from 'react-native';
 import {FullWindowOverlay} from 'react-native-screens';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
-import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
 
 function Home({
   navigation,
@@ -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>
   );
@@ -66,7 +67,7 @@ export default function App() {
         <NativeStack.Screen
           name="Modal"
           component={ModalScreen}
-          options={{ stackPresentation: 'modal' }}
+          options={{stackPresentation: 'modal'}}
         />
       </NativeStack.Navigator>
     </NavigationContainer>
diff --git a/TestsExample/src/Test1097.tsx b/TestsExample/src/Test1097.tsx
index 799235897d..fe6d9c4000 100644
--- a/TestsExample/src/Test1097.tsx
+++ b/TestsExample/src/Test1097.tsx
@@ -1,4 +1,4 @@
-/* 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 {
@@ -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}
@@ -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..a6ee742c28 100644
--- a/TestsExample/src/Test111.js
+++ b/TestsExample/src/Test111.js
@@ -35,7 +35,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..efd50bdf4a 100644
--- a/TestsExample/src/Test1153.tsx
+++ b/TestsExample/src/Test1153.tsx
@@ -6,7 +6,7 @@ import {
   NativeStackNavigationProp,
 } from 'react-native-screens/native-stack';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import { ScrollView } from 'react-native-gesture-handler';
+import {ScrollView} from 'react-native-gesture-handler';
 
 const Stack = createNativeStackNavigator();
 
diff --git a/TestsExample/src/Test1162.tsx b/TestsExample/src/Test1162.tsx
index 450b4d7001..d09e58b6c3 100644
--- a/TestsExample/src/Test1162.tsx
+++ b/TestsExample/src/Test1162.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
 import {Button, View} from 'react-native';
 import {
@@ -80,7 +81,7 @@ function First({
 function TabScreen() {
   return (
     <View style={{backgroundColor: '#CCC', flex: 1, paddingTop: 200}}>
-      <View style={{backgroundColor: '#EEE', flex: 1}}></View>
+      <View style={{backgroundColor: '#EEE', flex: 1}} />
     </View>
   );
 }
@@ -101,7 +102,7 @@ function Second({
       <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/Test1190.tsx b/TestsExample/src/Test1190.tsx
index b29ed56bfb..0ce418f241 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 {
+  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/Test1214.tsx b/TestsExample/src/Test1214.tsx
index 74ba6a09af..2e2b68d99a 100644
--- a/TestsExample/src/Test1214.tsx
+++ b/TestsExample/src/Test1214.tsx
@@ -3,11 +3,14 @@ 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 {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 type Props = {
   navigation: NativeStackNavigationProp<ParamListBase>;
-}
+};
 
 const NStack = createNativeStackNavigator();
 const Stack = createStackNavigator();
@@ -19,7 +22,8 @@ const Home = ({navigation}: Props) => {
         title="Go to details"
         onPress={() => {
           navigation.navigate('DETAILS');
-        }}></Button>
+        }}
+      />
     </View>
   );
 };
@@ -27,26 +31,33 @@ const Home = ({navigation}: Props) => {
 const Details = () => {
   return (
     <View style={{flex: 1, justifyContent: 'center'}}>
-      <TextInput style={{backgroundColor: 'lime', height: 40}} autoFocus={true}></TextInput>
+      <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.Screen component={Home} name="HOME" />
+          <NStack.Screen component={Details} name="DETAILS" />
         </NStack.Navigator>
       </NavigationContainer>
     </SafeAreaView>
diff --git a/TestsExample/src/Test1228.tsx b/TestsExample/src/Test1228.tsx
index 298d44bb25..898a116018 100644
--- a/TestsExample/src/Test1228.tsx
+++ b/TestsExample/src/Test1228.tsx
@@ -1,14 +1,13 @@
-import React, { useState, useEffect } from 'react';
-import { Text, View, StyleSheet, Button } from 'react-native';
+import React, {useState, useEffect} from 'react';
+import {Text, View, StyleSheet, Button} from 'react-native';
 import {
   useNavigation,
   NavigationContainer,
   DefaultTheme,
   DarkTheme,
 } from '@react-navigation/native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { createNativeStackNavigator } from 'react-native-screens/native-stack';
-
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
 
 export const FirstScreen = () => {
   const [theme, setTheme] = useState(false);
@@ -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}
-      >
-        <Stack.Navigator screenOptions={{ stackPresentation: 'modal' }}>
+      <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/Test1260.tsx b/TestsExample/src/Test1260.tsx
index a98cc7c965..bd6a2a26e3 100644
--- a/TestsExample/src/Test1260.tsx
+++ b/TestsExample/src/Test1260.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 {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
@@ -10,28 +13,38 @@ export default function App() {
     <NavigationContainer>
       <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')} />
+      <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')} />
+      <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..ec583971ae 100644
--- a/TestsExample/src/Test1296.tsx
+++ b/TestsExample/src/Test1296.tsx
@@ -1,6 +1,6 @@
-import React, { useLayoutEffect, useState } from 'react';
-import { Dimensions, Image, StyleSheet, Text, View } from 'react-native';
-import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import React, {useLayoutEffect, useState} from 'react';
+import {Dimensions, Image, StyleSheet, Text, View} from 'react-native';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -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,14 +51,23 @@ 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>
   );
 }
 
 export default function App() {
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={{flex: 1}}>
       <NavigationContainer>
         <Stack.Navigator
           screenOptions={{
@@ -76,12 +85,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}>
@@ -97,14 +106,14 @@ 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) => {
+  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/TestsExample/src/Test1299.tsx b/TestsExample/src/Test1299.tsx
index 5104f4da86..842210eefa 100644
--- a/TestsExample/src/Test1299.tsx
+++ b/TestsExample/src/Test1299.tsx
@@ -1,28 +1,31 @@
 import * as React from 'react';
-import { View, StyleSheet, Button } from 'react-native';
-import { createNativeStackNavigator } from 'react-native-screens/native-stack';
-import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import {View, StyleSheet, Button} from 'react-native';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import {NavigationContainer, useNavigation} from '@react-navigation/native';
 
 export const Modal1 = React.memo(() => {
-  return <View style={{ flexGrow: 1, backgroundColor: 'red', opacity: 0.7 }} />;
+  return <View style={{flexGrow: 1, backgroundColor: 'red', opacity: 0.7}} />;
 });
 
 export const Modal2 = React.memo(() => {
-  return (
-    <View style={{ flexGrow: 1, backgroundColor: 'blue', opacity: 0.7 }} />
-  );
+  return <View style={{flexGrow: 1, backgroundColor: 'blue', opacity: 0.7}} />;
 });
 export const MainScreen = React.memo(() => {
   const navigation = useNavigation();
   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')
-      }}/>
+    <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');
+        }}
+      />
     </View>
   );
 });
@@ -39,13 +42,13 @@ export default function App() {
             key={'modalScreen-1'}
             name={'modalScreen-1'}
             component={Modal1}
-            options={{ stackPresentation: 'modal', headerShown: false }}
+            options={{stackPresentation: 'modal', headerShown: false}}
           />
           <Stack.Screen
             key={'modalScreen-2'}
             name={'modalScreen-2'}
             component={Modal2}
-            options={{ stackPresentation: 'modal', headerShown: false }}
+            options={{stackPresentation: 'modal', headerShown: false}}
           />
         </Stack.Navigator>
       </NavigationContainer>
diff --git a/TestsExample/src/Test1391.tsx b/TestsExample/src/Test1391.tsx
index 59182116a5..11201251e2 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 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..8f4b1e8ad6 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 {
+  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 {
+  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>
@@ -57,21 +75,15 @@ function Second() {
   );
 }
 
-const { Navigator, Screen } = createNativeStackNavigator();
+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..f9a36cebb2 100644
--- a/TestsExample/src/Test1473.tsx
+++ b/TestsExample/src/Test1473.tsx
@@ -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..2a4173d48d 100644
--- a/TestsExample/src/Test1476.tsx
+++ b/TestsExample/src/Test1476.tsx
@@ -62,68 +62,89 @@ function ModalA(props: Props) {
       }}>
       <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 {options, ...anyConfig} = config;
+        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 (