chore: format code in test examples

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',
+      },
+    },
+  ],
 };

FabricTestExample/.prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   arrowParens: 'avoid',
   bracketSameLine: true,
-  bracketSpacing: false,
+  bracketSpacing: true,
   singleQuote: true,
   trailingComma: 'all',
 };

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';

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);

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))}\\/.*$`),
       ),
     ),
 

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,15 +36,15 @@ 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,
 }));
 
 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>

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')}
+    />
   );
 }
-

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>
   );
 }

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} />

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 }} />;
   });
 }
 

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>
   );
 }

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')}