fix: update eslint-config and lint apps/mobile

apps/mobile/app.json

@@ -1,47 +1,41 @@
 {
   "expo": {
-    "name": "nativewind-expo-router",
-    "slug": "nativewind-expo-router",
+    "name": "expo-monorepo",
+    "slug": "expo-monorepo",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "nativewind-expo-router",
-    "userInterfaceStyle": "automatic",
+    "icon": "./assets/icon.png",
     "splash": {
-      "image": "./assets/images/splash.png",
+      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["**/*"],
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
-      "supportsTablet": true,
-      "userInterfaceStyle": "automatic",
-      "requireFullScreen": true
+      "bundleIdentifier": "com.bycedric.expomonorepo",
+      "buildNumber": "1.0.0",
+      "supportsTablet": true
     },
     "android": {
-      "userInterfaceStyle": "automatic",
+      "package": "com.bycedric.expomonorepo",
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
       }
     },
     "web": {
       "bundler": "metro",
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": [
-      "expo-router",
-      [
-        "expo-screen-orientation",
-        {
-          "initialOrientation": "DEFAULT"
-        }
-      ]
-    ],
     "experiments": {
       "tsconfigPaths": true,
       "typedRoutes": true
     }
   }
-}
+}

apps/mobile/app/(tabs)/_layout.tsx

@@ -1,21 +1,21 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { Link, Tabs } from "expo-router";
-import { Pressable, useColorScheme } from "react-native";
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Link, Tabs } from 'expo-router';
+import { Pressable } from 'react-native';
 
 // import Colors from "@/constants/Colors";
 
 /**
  * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
  */
 function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>["name"];
+  name: React.ComponentProps<typeof FontAwesome>['name'];
   color: string;
 }) {
   return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
 }
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  //const colorScheme = useColorScheme();
 
   return (
     <Tabs
@@ -28,7 +28,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: "Home",
+          title: 'Home',
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
           headerRight: () => (
             <Link href="/modal" asChild>
@@ -48,7 +48,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="two"
         options={{
-          title: "Tab Two",
+          title: 'Tab Two',
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
         }}
       />

apps/mobile/app/(tabs)/index.tsx

@@ -1,8 +1,8 @@
-import { vars } from "nativewind";
-import { Text, View } from "react-native";
+import { vars } from 'nativewind';
+import { Text, View } from 'react-native';
 
 const theme = vars({
-  "--theme-fg": "blue",
+  '--theme-fg': 'blue',
 });
 
 const App = () => {
@@ -14,9 +14,7 @@ const App = () => {
       <Text className="text-base font-bold active:scale-150 active:text-[--theme-fg] transition duration-[500ms]">
         Transitions
       </Text>
-      <Text className="text-[14px] font-bold animate-none active:animate-bounce">
-        Animations
-      </Text>
+      <Text className="text-[14px] font-bold animate-none active:animate-bounce">Animations</Text>
     </View>
   );
 };

apps/mobile/app/(tabs)/two.tsx

@@ -1,4 +1,4 @@
-import { Text, View } from "react-native";
+import { Text, View } from 'react-native';
 
 export default function TabTwoScreen() {
   return (

apps/mobile/app/[...missing].tsx

@@ -1,12 +1,10 @@
-import { Link, Stack } from "expo-router";
-import { StyleSheet } from "react-native";
-
-import { Text, View } from "react-native";
+import { Link, Stack } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
 
 export default function NotFoundScreen() {
   return (
     <>
-      <Stack.Screen options={{ title: "Oops!" }} />
+      <Stack.Screen options={{ title: 'Oops!' }} />
       <View style={styles.container}>
         <Text style={styles.title}>This screen doesn't exist.</Text>
 
@@ -21,20 +19,20 @@ export default function NotFoundScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: 'center',
+    justifyContent: 'center',
     padding: 20,
   },
   title: {
     fontSize: 20,
-    fontWeight: "bold",
+    fontWeight: 'bold',
   },
   link: {
     marginTop: 15,
     paddingVertical: 15,
   },
   linkText: {
     fontSize: 14,
-    color: "#2e78b7",
+    color: '#2e78b7',
   },
 });

apps/mobile/app/_layout.tsx

@@ -1,27 +1,26 @@
-import "../global.css";
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { useFonts } from "expo-font";
-import { SplashScreen, Stack } from "expo-router";
-import { vars } from "nativewind";
-import { memo, useEffect } from "react";
-import { View, StyleSheet } from "react-native";
+import '../global.css';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { useFonts } from 'expo-font';
+import { SplashScreen, Stack } from 'expo-router';
+import { memo, useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
 
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary,
-} from "expo-router";
+} from 'expo-router';
 
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: "(tabs)",
+  initialRouteName: '(tabs)',
 };
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default memo(function RootLayout() {
   const [loaded, error] = useFonts({
-    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
+    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
     ...FontAwesome.font,
   });
 
@@ -48,7 +47,7 @@ function RootLayoutNav() {
     <View style={StyleSheet.absoluteFill}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
       </Stack>
     </View>
   );

apps/mobile/app/modal.tsx

@@ -1,4 +1,4 @@
-import { Text, View } from "react-native";
+import { Text, View } from 'react-native';
 
 export default function Modal() {
   return (

apps/mobile/babel.config.js

@@ -3,17 +3,17 @@ module.exports = function (api) {
   return {
     presets: [
       [
-        "babel-preset-expo",
+        'babel-preset-expo',
         {
-          jsxImportSource: "nativewind",
+          jsxImportSource: 'nativewind',
         },
       ],
-      "nativewind/babel",
+      'nativewind/babel',
     ],
     plugins: [
       // Required for expo-router
-      "expo-router/babel",
-      "react-native-reanimated/plugin",
+      'expo-router/babel',
+      'react-native-reanimated/plugin',
     ],
   };
 };

apps/mobile/eas.json

@@ -33,4 +33,4 @@
       }
     }
   }
-}
+}

apps/mobile/index.js

@@ -1,11 +1,11 @@
-import ReactNativeFeatureFlags from "react-native/Libraries/ReactNative/ReactNativeFeatureFlags";
+// eslint-disable-next-line
+import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
+
+import 'expo-router/entry';
 
 // enable the JS-side of the w3c PointerEvent implementation
 ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;
 
 // enable hover events in Pressibility to be backed by the PointerEvent implementation.
 // shouldEmitW3CPointerEvents should also be true
-ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover = () =>
-  true;
-
-import "expo-router/entry";
+ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover = () => true;

apps/mobile/metro.config.js

@@ -1,5 +1,6 @@
-const path = require("path");
-const { getDefaultConfig } = require("expo/metro-config");
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+const path = require('path');
 
 // 1. Enable CSS for Expo.
 const config = getDefaultConfig(__dirname, {
@@ -8,19 +9,18 @@ const config = getDefaultConfig(__dirname, {
 
 // This is not needed for NativeWind, it is configuration for Metro to understand monorepos
 const projectRoot = __dirname;
-const workspaceRoot = path.resolve(projectRoot, "../..");
+const workspaceRoot = path.resolve(projectRoot, '../..');
 config.watchFolders = [workspaceRoot];
 config.resolver.disableHierarchicalLookup = true;
 config.resolver.nodeModulesPaths = [
-  path.resolve(projectRoot, "node_modules"),
-  path.resolve(workspaceRoot, "node_modules"),
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
 ];
 
 // 2. Enable NativeWind
-const { withNativeWind } = require("nativewind/metro");
 module.exports = withNativeWind(config, {
   // 3. Set `input` to your CSS file with the Tailwind at-rules
-  input: "global.css",
+  input: 'global.css',
   // This is optional
   projectRoot,
 });

apps/mobile/package.json

@@ -1,14 +1,21 @@
 {
   "name": "@acme/app-mobile",
   "main": "index",
-  "version": "1.0.2-alpha.14",
+  "version": "1.0.1",
   "scripts": {
+    "dev": "expo start",
+    "lint": "eslint --ext js,ts,tsx .",
+    "build": "expo export --output-dir ./build --platform all",
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
+    "eas-build-pre-install": "npm install --global pnpm@7.x",
     "eas-build-post-install": "pnpm run -w build:mobile"
   },
+  "jest": {
+    "preset": "jest-expo"
+  },
   "dependencies": {
     "@changesets/cli": "^2.26.2",
     "@expo/vector-icons": "^13.0.0",
@@ -35,13 +42,38 @@
   },
   "devDependencies": {
     "@acme/eslint-config": "*",
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.20.0",
     "@types/react": "~18.2.43",
     "@types/react-dom": "~18.0.11",
-    "babel-preset-expo": "~9.5.0"
+    "babel-preset-expo": "~9.5.0",
+    "jest": "^29.2.1",
+    "jest-expo": "~49.0.0",
+    "react-test-renderer": "18.2.0",
+    "typescript": "^5.1.3"
   },
   "private": true,
   "overrides": {
     "react-refresh": "0.14.0"
+  },
+  "eslintConfig": {
+    "extends": "@acme/eslint-config",
+    "ignorePatterns": [
+      "node_modules",
+      "build",
+      ".expo",
+      ".turbo",
+      "dist",
+      ".expo-shared"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "*.js"
+        ],
+        "env": {
+          "node": true
+        }
+      }
+    ]
   }
 }

apps/mobile/tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class",
-  content: ["app/**/*.{js,jsx,ts,tsx}"],
-  presets: [require("nativewind/preset")],
+  darkMode: 'class',
+  content: ['app/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
   plugins: [],
 };