refact: unified prettier config across repository (#2250)

## Description

This PR intents to unify prettier config across example apps. Inititally
I wanted to copy the configuration but It's more convenient to just use
the one from the root (by not overriding it).

## Changes

- removed per project `.prettierrc` files
- fixed eslint export syntax in Example
- formatted affected files

<!--

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before

### After

-->

<!--
## Test code and steps to reproduce

Please include code that can be used to test this change and short
description how this example should work.
This snippet should be as minimal as possible and ready to be pasted
into editor (don't exclude exports or remove "not important" parts of
reproduction example)
-->

## Checklist

- [x] Ensured that CI passes

.eslintrc.js

@@ -21,9 +21,9 @@ module.exports = {
       'react-native-screens/gesture-handler',
     ],
     'import/ignore': [
-      'node_modules/react-native/index\\.js$', 
+      'node_modules/react-native/index\\.js$',
       'react-native/Libraries/Utilities/codegenNativeComponent.*',
-      'react-native/Libraries/Types/CodegenTypes.*'
+      'react-native/Libraries/Types/CodegenTypes.*',
     ],
     'import/resolver': {
       node: {

.github/workflows/check-archs-consistency.yml

@@ -1,9 +1,9 @@
 name: Test consistency between Paper & Fabric
-on: 
+on:
   pull_request:
     branches:
       - main
-    paths: 
+    paths:
       - src/fabric/**
       - android/src/paper/java/com/facebook/react/viewmanagers/**
 jobs:

.prettierrc.js

@@ -3,5 +3,5 @@ module.exports = {
   bracketSameLine: true,
   bracketSpacing: true,
   singleQuote: true,
-  trailingComma: 'es5',
+  trailingComma: 'all',
 };

.watchmanconfig

@@ -1 +1 @@
-{}
+{}

Example/.eslintrc.js

@@ -1,4 +1,4 @@
-module.export = {
+module.exports = {
   root: true,
   extends: '@react-native',
 };

Example/.watchmanconfig

@@ -1 +1 @@
-{}
+{}

Example/app.json

@@ -2,4 +2,3 @@
   "name": "ScreensExample",
   "displayName": "ScreensExample"
 }
-

Example/e2e/examplesTests/bottomTabs.e2e.ts

@@ -7,36 +7,36 @@ describe('Bottom tabs and native stack', () => {
 
   it('should go to main screen and back', async () => {
     await expect(
-      element(by.id('root-screen-example-BottomTabsAndStack'))
+      element(by.id('root-screen-example-BottomTabsAndStack')),
     ).toBeVisible();
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
 
     await expect(
-      element(by.id('bottom-tabs-A-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button')),
     ).toBeVisible();
   });
 
   it('should go to details screen', async () => {
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
     await element(by.id('bottom-tabs-A-more-details-button')).tap();
     await expect(
-      element(by.id('bottom-tabs-A-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button')),
     ).toHaveLabel('More details 1');
   });
 
   it('should go to details screen and back', async () => {
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
     await element(by.id('bottom-tabs-A-more-details-button')).tap();
     await expect(
-      element(by.id('bottom-tabs-A-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button')),
     ).toHaveLabel('More details 1');
     if (device.getPlatform() === 'ios') {
       await element(by.type('_UIButtonBarButton')).tap();
     } else {
       await device.pressBack();
     }
     await expect(
-      element(by.id('bottom-tabs-A-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button')),
     ).toHaveLabel('More details 0');
   });
 
@@ -45,12 +45,12 @@ describe('Bottom tabs and native stack', () => {
 
     await element(by.id('bottom-tabs-B-tab')).tap();
     await expect(element(by.id('bottom-tabs-B-header-right-id'))).toHaveText(
-      'B'
+      'B',
     );
 
     await element(by.id('bottom-tabs-A-tab')).tap();
     await expect(element(by.id('bottom-tabs-A-header-right-id'))).toHaveText(
-      'A'
+      'A',
     );
   });
 
@@ -59,12 +59,12 @@ describe('Bottom tabs and native stack', () => {
 
     await element(by.id('bottom-tabs-A-more-details-button')).tap();
     await expect(
-      element(by.id('bottom-tabs-A-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button')),
     ).toHaveLabel('More details 1');
 
     await element(by.id('bottom-tabs-A-tab')).multiTap(2);
     await expect(
-      element(by.id('bottom-tabs-A-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button')),
     ).toHaveLabel('More details 0');
   });
 
@@ -74,17 +74,17 @@ describe('Bottom tabs and native stack', () => {
     await element(by.id('bottom-tabs-A-more-details-button')).tap();
     await element(by.id('bottom-tabs-A-more-details-button')).tap();
     await expect(
-      element(by.id('bottom-tabs-A-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button')),
     ).toHaveLabel('More details 2');
 
     await element(by.id('bottom-tabs-B-tab')).tap();
     await expect(
-      element(by.id('bottom-tabs-B-more-details-button'))
+      element(by.id('bottom-tabs-B-more-details-button')),
     ).toHaveLabel('More details 0');
     await element(by.id('bottom-tabs-A-tab')).tap();
 
     await expect(
-      element(by.id('bottom-tabs-A-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button')),
     ).toHaveLabel('More details 2');
   });
 });

Example/e2e/examplesTests/events.e2e.ts

@@ -13,33 +13,33 @@ const pressBack = async () => {
 const awaitClassicalEventBehavior = async () => {
   if (device.getPlatform() === 'ios') {
     await expect(
-      element(by.text('9. Chats | transitionStart | closing'))
+      element(by.text('9. Chats | transitionStart | closing')),
     ).toExist();
     await expect(
-      element(by.text('10. Privacy | transitionStart | closing'))
+      element(by.text('10. Privacy | transitionStart | closing')),
     ).toExist();
     await expect(
-      element(by.text('11. Main | transitionStart | opening'))
+      element(by.text('11. Main | transitionStart | opening')),
     ).toExist();
     await expect(
-      element(by.text('12. Chats | transitionEnd | closing'))
+      element(by.text('12. Chats | transitionEnd | closing')),
     ).toExist();
     await expect(
-      element(by.text('13. Privacy | transitionEnd | closing'))
+      element(by.text('13. Privacy | transitionEnd | closing')),
     ).toExist();
     await expect(element(by.text('14. Privacy | beforeRemove'))).toExist();
     await expect(element(by.text('15. Chats | beforeRemove'))).toExist();
     await expect(
-      element(by.text('16. Main | transitionEnd | opening'))
+      element(by.text('16. Main | transitionEnd | opening')),
     ).toExist();
   } else {
     await expect(element(by.text('9. Privacy | beforeRemove'))).toExist();
     await expect(element(by.text('10. Chats | beforeRemove'))).toExist();
     await expect(
-      element(by.text('11. Main | transitionStart | opening'))
+      element(by.text('11. Main | transitionStart | opening')),
     ).toExist();
     await expect(
-      element(by.text('12. Main | transitionEnd | opening'))
+      element(by.text('12. Main | transitionEnd | opening')),
     ).toExist();
   }
 };
@@ -64,10 +64,10 @@ describe('Events', () => {
     await element(by.id('root-screen-playground-Events')).tap();
 
     await expect(
-      element(by.text('1. Main | transitionStart | opening'))
+      element(by.text('1. Main | transitionStart | opening')),
     ).toExist();
     await expect(
-      element(by.text('2. Main | transitionEnd | opening'))
+      element(by.text('2. Main | transitionEnd | opening')),
     ).toExist();
   });
 
@@ -79,7 +79,7 @@ describe('Events', () => {
       await element(by.type('_UIButtonBarButton')).tap();
     } else {
       await element(
-        by.type('androidx.appcompat.widget.AppCompatImageButton')
+        by.type('androidx.appcompat.widget.AppCompatImageButton'),
       ).tap();
     }
 
@@ -98,7 +98,7 @@ describe('Events', () => {
       await element(by.type('_UIButtonBarButton')).tap();
     } else {
       await element(
-        by.type('androidx.appcompat.widget.AppCompatImageButton')
+        by.type('androidx.appcompat.widget.AppCompatImageButton'),
       ).tap();
     }
 
@@ -114,22 +114,22 @@ describe('Events', () => {
     await element(by.id('events-go-to-chats')).tap();
 
     await expect(
-      element(by.text('3. Main | transitionStart | closing'))
+      element(by.text('3. Main | transitionStart | closing')),
     ).toExist();
     await expect(
-      element(by.text('4. Chats | transitionStart | opening'))
+      element(by.text('4. Chats | transitionStart | opening')),
     ).toExist();
     await expect(
-      element(by.text('5. Privacy | transitionStart | opening'))
+      element(by.text('5. Privacy | transitionStart | opening')),
     ).toExist();
     await expect(
-      element(by.text('6. Main | transitionEnd | closing'))
+      element(by.text('6. Main | transitionEnd | closing')),
     ).toExist();
     await expect(
-      element(by.text('7. Chats | transitionEnd | opening'))
+      element(by.text('7. Chats | transitionEnd | opening')),
     ).toExist();
     await expect(
-      element(by.text('8. Privacy | transitionEnd | opening'))
+      element(by.text('8. Privacy | transitionEnd | opening')),
     ).toExist();
   });
 
@@ -145,7 +145,7 @@ describe('Events', () => {
       await element(by.type('_UIButtonBarButton')).tap();
     } else {
       await element(
-        by.type('androidx.appcompat.widget.AppCompatImageButton')
+        by.type('androidx.appcompat.widget.AppCompatImageButton'),
       ).tap();
     }
 

Example/e2e/examplesTests/simpleNativeStack.e2e.ts

@@ -7,25 +7,25 @@ describe('Simple Native Stack', () => {
 
   it('should go to main screen', async () => {
     await expect(
-      element(by.id('root-screen-example-SimpleNativeStack'))
+      element(by.id('root-screen-example-SimpleNativeStack')),
     ).toBeVisible();
     await element(by.id('root-screen-example-SimpleNativeStack')).tap();
     await expect(
-      element(by.id('simple-native-stack-go-to-detail'))
+      element(by.id('simple-native-stack-go-to-detail')),
     ).toBeVisible();
   });
 
   it('should go to detail screen', async () => {
     await element(by.id('simple-native-stack-go-to-detail')).tap();
     await expect(
-      element(by.id('simple-native-stack-detail-go-back'))
+      element(by.id('simple-native-stack-detail-go-back')),
     ).toBeVisible();
   });
 
   it('should go back to main screen', async () => {
     await element(by.id('simple-native-stack-detail-go-back')).tap();
     await expect(
-      element(by.id('simple-native-stack-go-to-detail'))
+      element(by.id('simple-native-stack-go-to-detail')),
     ).toBeVisible();
   });
 });

Example/e2e/examplesTests/stackPresentation.e2e.ts

@@ -7,35 +7,35 @@ describe('Simple Stack Presentation', () => {
 
   it('should go to main screen', async () => {
     await expect(
-      element(by.id('root-screen-example-StackPresentation'))
+      element(by.id('root-screen-example-StackPresentation')),
     ).toBeVisible();
     await element(by.id('root-screen-example-StackPresentation')).tap();
     await expect(
-      element(by.id('stack-presentation-root-scroll-view'))
+      element(by.id('stack-presentation-root-scroll-view')),
     ).toBeVisible();
   });
 
   it('should push form screen', async () => {
     await element(by.id('stack-presentation-push-button')).tap();
     await expect(
-      element(by.id('stack-presentation-form-screen-go-back-button'))
+      element(by.id('stack-presentation-form-screen-go-back-button')),
     ).toBeVisible();
     await element(by.id('stack-presentation-form-screen-go-back-button')).tap();
     await expect(
-      element(by.id('stack-presentation-root-scroll-view'))
+      element(by.id('stack-presentation-root-scroll-view')),
     ).toBeVisible();
   });
 
   it('should open modal', async () => {
     await element(by.id('stack-presentation-modal-button')).tap();
     await expect(
-      element(by.id('stack-presentation-modal-screen-go-back-button'))
+      element(by.id('stack-presentation-modal-screen-go-back-button')),
     ).toBeVisible();
     await element(
-      by.id('stack-presentation-modal-screen-go-back-button')
+      by.id('stack-presentation-modal-screen-go-back-button'),
     ).tap();
     await expect(
-      element(by.id('stack-presentation-root-scroll-view'))
+      element(by.id('stack-presentation-root-scroll-view')),
     ).toBeVisible();
   });
 });

Example/e2e/firstTest.e2e.ts

@@ -56,7 +56,7 @@ describe('Example', () => {
 
   it('should have examples buttons', async () => {
     const exampleNames = Object.keys(SCREENS).filter(
-      name => SCREENS[name].type === 'example'
+      name => SCREENS[name].type === 'example',
     );
     for (const name of exampleNames) {
       await expect(element(by.id(`root-screen-example-${name}`))).toBeVisible();

Example/metro.config.js

@@ -35,8 +35,8 @@ const config = {
     blockList: exclusionList(
       modules.map(
         m =>
-          new RegExp(`^${escape(path.join(rnsRoot, 'node_modules', m))}\\/.*$`)
-      )
+          new RegExp(`^${escape(path.join(rnsRoot, 'node_modules', m))}\\/.*$`),
+      ),
     ),
 
     extraNodeModules: modules.reduce((acc, name) => {
@@ -65,15 +65,15 @@ const config = {
             __dirname,
             'node_modules',
             moduleName,
-            `index${ext}`
+            `index${ext}`,
           );
 
           const possibleSrcPath = path.join(
             __dirname,
             'node_modules',
             moduleName,
             'src',
-            `index${ext}`
+            `index${ext}`,
           );
 
           if (fs.existsSync(possiblePath)) {

FabricExample/README.md

@@ -3,6 +3,7 @@
 ## Installing & running application
 
 Before running application you need to install all dependencies. To do that:
+
 - In project's root directory run `yarn install`
 - In FabricExample directory run `yarn install`
 

FabricExample/__tests__/App.test.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import App from '../App';
 
 // Note: import explicitly to use the types shipped 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';