fix: fix prettier not working correctly with lint --fix ( fix #410)

Author: yjose

.eslintrc.js

@@ -3,6 +3,7 @@ const path = require('path');
 module.exports = {
   extends: ['expo', 'plugin:tailwindcss/recommended', 'prettier'],
   plugins: [
+    'prettier',
     'unicorn',
     '@typescript-eslint',
     'unused-imports',
@@ -14,6 +15,7 @@ module.exports = {
     project: './tsconfig.json',
   },
   rules: {
+    'prettier/prettier': 'warn',
     'unicorn/filename-case': [
       'error',
       {

.prettierrc.js

@@ -1,4 +1,8 @@
-module.exports = {
+/** @type {import('prettier').Config} */
+const config = {
   singleQuote: true,
   endOfLine: 'auto',
-};
+  trailingComma: 'es5',
+};
+
+module.exports = config;

app.config.ts

@@ -72,7 +72,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     'expo-localization',
     'expo-router',
     ['app-icon-badge', appIconBadgeConfig],
-    ["react-native-edge-to-edge"]
+    ['react-native-edge-to-edge'],
   ],
   extra: {
     ...ClientEnv,

src/app/(app)/index.tsx

@@ -10,7 +10,7 @@ export default function Feed() {
   const { data, isPending, isError } = usePosts();
   const renderItem = React.useCallback(
     ({ item }: { item: Post }) => <Card {...item} />,
-    [],
+    []
   );
 
   if (isError) {

src/app/feed/add-post.tsx

@@ -42,7 +42,7 @@ export default function AddPost() {
         onError: () => {
           showErrorMessage('Error adding post');
         },
-      },
+      }
     );
   };
   return (

src/components/login-form.test.tsx

@@ -59,7 +59,7 @@ describe('LoginForm Form ', () => {
         email: 'youssef@gmail.com',
         password: 'password',
       },
-      expect.objectContaining({}),
+      expect.objectContaining({})
     );
   });
 });

src/components/settings/language-item.tsx

@@ -16,20 +16,20 @@ export const LanguageItem = () => {
       setLanguage(option.value as Language);
       modal.dismiss();
     },
-    [setLanguage, modal],
+    [setLanguage, modal]
   );
 
   const langs = React.useMemo(
     () => [
       { label: translate('settings.english'), value: 'en' },
       { label: translate('settings.arabic'), value: 'ar' },
     ],
-    [],
+    []
   );
 
   const selectedLanguage = React.useMemo(
     () => langs.find((lang) => lang.value === language),
-    [language, langs],
+    [language, langs]
   );
 
   return (

src/components/settings/theme-item.tsx

@@ -16,7 +16,7 @@ export const ThemeItem = () => {
       setSelectedTheme(option.value as ColorSchemeType);
       modal.dismiss();
     },
-    [setSelectedTheme, modal],
+    [setSelectedTheme, modal]
   );
 
   const themes = React.useMemo(
@@ -25,12 +25,12 @@ export const ThemeItem = () => {
       { label: `${translate('settings.theme.light')} 🌞`, value: 'light' },
       { label: `${translate('settings.theme.system')} ⚙️`, value: 'system' },
     ],
-    [],
+    []
   );
 
   const theme = React.useMemo(
     () => themes.find((t) => t.value === selectedTheme),
-    [selectedTheme, themes],
+    [selectedTheme, themes]
   );
 
   return (

src/components/ui/button.test.tsx

@@ -17,7 +17,7 @@ describe('Button component ', () => {
     render(
       <Button testID="button">
         <Text> Custom child </Text>
-      </Button>,
+      </Button>
     );
     expect(screen.getByText('Custom child')).toBeOnTheScreen();
   });
@@ -34,7 +34,7 @@ describe('Button component ', () => {
   it('should call onClick handler when clicked', async () => {
     const onClick = jest.fn();
     const { user } = setup(
-      <Button testID="button" label="Click the button" onPress={onClick} />,
+      <Button testID="button" label="Click the button" onPress={onClick} />
     );
     expect(screen.getByTestId('button')).toBeOnTheScreen();
     await user.press(screen.getByTestId('button'));
@@ -48,7 +48,7 @@ describe('Button component ', () => {
         loading={true}
         label="Click the button"
         onPress={onClick}
-      />,
+      />
     );
     expect(screen.getByTestId('button')).toBeOnTheScreen();
     expect(screen.getByTestId('button-activity-indicator')).toBeOnTheScreen();
@@ -69,7 +69,7 @@ describe('Button component ', () => {
         disabled={true}
         onPress={onClick}
         variant="secondary"
-      />,
+      />
     );
     expect(screen.getByTestId('button')).toBeOnTheScreen();
     await user.press(screen.getByTestId('button'));

src/components/ui/button.tsx

@@ -105,11 +105,11 @@ export const Button = React.forwardRef<View, Props>(
       textClassName = '',
       ...props
     },
-    ref,
+    ref
   ) => {
     const styles = React.useMemo(
       () => button({ variant, disabled, size }),
-      [variant, disabled, size],
+      [variant, disabled, size]
     );
 
     return (
@@ -142,5 +142,5 @@ export const Button = React.forwardRef<View, Props>(
         )}
       </Pressable>
     );
-  },
+  }
 );