Lint rules and code style for expo sample app

samples/expo/.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  root: true,
+  extends: ['expo', '@react-native'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: ['./tsconfig.json', '../../packages/core/tsconfig.json'],
+        noWarnOnMultipleProjects: true,
+      },
+    },
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        '@typescript-eslint/no-shadow': ['error'],
+        'no-shadow': 'off',
+        'no-undef': 'off',
+        quotes: [2, 'single', { avoidEscape: true }],
+        // Disable deprecated rules removed in @typescript-eslint v8
+        '@typescript-eslint/func-call-spacing': 'off',
+        '@typescript-eslint/ban-types': 'off',
+      },
+    },
+  ],
+  ignorePatterns: ['/node_modules', '/ios', '/android', '/.expo'],
+};

samples/expo/.prettierignore

@@ -0,0 +1,6 @@
+node_modules/
+ios/
+android/
+.expo/
+*.md
+

samples/expo/.prettierrc.js

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

samples/expo/app.json

@@ -14,9 +14,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "io.sentry.expo.sample",
@@ -90,4 +88,4 @@
       "url": "https://u.expo.dev/00000000-0000-0000-0000-000000000000"
     }
   }
-}
+}

samples/expo/app/(tabs)/_layout.tsx

@@ -12,12 +12,40 @@ function TabBarIcon(props: {
   name: React.ComponentProps<typeof FontAwesome>['name'];
   color: string;
 }) {
+  // eslint-disable-next-line react-native/no-inline-styles
   return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
 }
 
+function CodeIcon({ color }: { color: string }) {
+  return <TabBarIcon name="code" color={color} />;
+}
+
+function InfoButton({ colorScheme }: { colorScheme: 'light' | 'dark' | null }) {
+  return (
+    <Link href="/modal" asChild>
+      <Pressable>
+        {({ pressed }) => (
+          <FontAwesome
+            name="info-circle"
+            size={25}
+            color={Colors[colorScheme ?? 'light'].text}
+            // eslint-disable-next-line react-native/no-inline-styles
+            style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
+          />
+        )}
+      </Pressable>
+    </Link>
+  );
+}
+
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
+  const renderInfoButton = React.useCallback(
+    () => <InfoButton colorScheme={colorScheme} />,
+    [colorScheme],
+  );
+
   return (
     <Tabs
       screenOptions={{
@@ -30,28 +58,15 @@ export default function TabLayout() {
         name="index"
         options={{
           title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-          headerRight: () => (
-            <Link href="/modal" asChild>
-              <Pressable>
-                {({ pressed }) => (
-                  <FontAwesome
-                    name="info-circle"
-                    size={25}
-                    color={Colors[colorScheme ?? 'light'].text}
-                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
-                  />
-                )}
-              </Pressable>
-            </Link>
-          ),
+          tabBarIcon: CodeIcon,
+          headerRight: renderInfoButton,
         }}
       />
       <Tabs.Screen
         name="two"
         options={{
           title: 'Tab Two',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          tabBarIcon: CodeIcon,
         }}
       />
     </Tabs>

samples/expo/app/(tabs)/index.tsx

@@ -79,7 +79,9 @@ export default function TabOneScreen() {
             title="Native Crash"
             onPress={() => {
               if (isRunningInExpoGo()) {
-                console.warn('Not supported in Expo Go. Build the application to test this feature.');
+                console.warn(
+                  'Not supported in Expo Go. Build the application to test this feature.',
+                );
                 return;
               }
               Sentry.nativeCrash();
@@ -138,7 +140,9 @@ export default function TabOneScreen() {
           <Button
             title="Send count metric with attributes"
             onPress={() => {
-              Sentry.metrics.count('count_metric', 1, { attributes: { from_test_app: true } });
+              Sentry.metrics.count('count_metric', 1, {
+                attributes: { from_test_app: true },
+              });
             }}
           />
         </View>
@@ -184,7 +188,9 @@ export default function TabOneScreen() {
                 string: 'string',
                 bigint: BigInt(123),
               });
-              Sentry.captureMessage('Message with different types of tags globally');
+              Sentry.captureMessage(
+                'Message with different types of tags globally',
+              );
               Sentry.setTags({
                 number: undefined,
                 boolean: undefined,
@@ -226,7 +232,11 @@ export default function TabOneScreen() {
               Sentry.logger.warn('expo warn log');
               Sentry.logger.error('expo error log');
 
-              Sentry.logger.info('expo info log with data', { database: 'admin', number: 123, obj: { password: 'admin' } });
+              Sentry.logger.info('expo info log with data', {
+                database: 'admin',
+                number: 123,
+                obj: { password: 'admin' },
+              });
             }}
           />
         </View>

samples/expo/app/(tabs)/two.tsx

@@ -8,14 +8,25 @@ export default function TabTwoScreen() {
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Tab Two</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <View
+        style={styles.separator}
+        lightColor="#eee"
+        darkColor="rgba(255,255,255,0.1)"
+      />
       <Sentry.Unmask>
-        <Text>This is unmasked because it's direct child of Sentry.Unmask (can be masked if Sentry.Masked is used higher in the hierarchy)</Text>
+        <Text>
+          This is unmasked because it's direct child of Sentry.Unmask (can be
+          masked if Sentry.Masked is used higher in the hierarchy)
+        </Text>
         <Sentry.Mask>
-          <Text>This is masked always because it's a child of a Sentry.Mask</Text>
+          <Text>
+            This is masked always because it's a child of a Sentry.Mask
+          </Text>
           <Sentry.Unmask>
             {/* Sentry.Unmask does not override the Sentry.Mask from above in the hierarchy */}
-            <Text>This is masked always because it's a child of Sentry.Mask</Text>
+            <Text>
+              This is masked always because it's a child of Sentry.Mask
+            </Text>
           </Sentry.Unmask>
         </Sentry.Mask>
       </Sentry.Unmask>

samples/expo/app/+html.tsx

@@ -10,10 +10,13 @@ export default function Root({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
 
-        {/* 
-          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
           However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
         */}
         <ScrollViewStyleReset />

samples/expo/app/_layout.tsx

@@ -1,5 +1,9 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from '@react-navigation/native';
 import { isRunningInExpoGo } from 'expo';
 import { useFonts } from 'expo-font';
 import { SplashScreen, Stack, useNavigationContainerRef } from 'expo-router';
@@ -10,7 +14,6 @@ import { SENTRY_INTERNAL_DSN } from '../utils/dsn';
 import * as Sentry from '@sentry/react-native';
 import { LogBox } from 'react-native';
 import * as ImagePicker from 'expo-image-picker';
-import { withSentryPlayground } from '@sentry/react-native/playground';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -125,7 +128,9 @@ function RootLayout() {
 
   // Expo Router uses Error Boundaries to catch errors in the navigation tree.
   useEffect(() => {
-    if (error) throw error;
+    if (error) {
+      throw error;
+    }
   }, [error]);
 
   useEffect(() => {

samples/expo/app/modal.tsx

@@ -8,7 +8,11 @@ export default function ModalScreen() {
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Modal</Text>
-      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <View
+        style={styles.separator}
+        lightColor="#eee"
+        darkColor="rgba(255,255,255,0.1)"
+      />
       <EditScreenInfo path="app/modal.tsx" />
 
       {/* Use a light status bar on iOS to account for the black space above the modal */}

samples/expo/components/EditScreenInfo.tsx

@@ -29,7 +29,8 @@ export default function EditScreenInfo({ path }: { path: string }) {
           style={styles.getStartedText}
           lightColor="rgba(0,0,0,0.8)"
           darkColor="rgba(255,255,255,0.8)">
-          Change any of the text, save the file, and your app will automatically update.
+          Change any of the text, save the file, and your app will automatically
+          update.
         </Text>
       </View>
 
@@ -38,7 +39,8 @@ export default function EditScreenInfo({ path }: { path: string }) {
           style={styles.helpLink}
           href="https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet">
           <Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
-            Tap here if your app doesn't automatically update after making changes
+            Tap here if your app doesn't automatically update after making
+            changes
           </Text>
         </ExternalLink>
       </View>

samples/expo/components/ExternalLink.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Platform } from 'react-native';
 
 export function ExternalLink(
-  props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string }
+  props: Omit<React.ComponentProps<typeof Link>, 'href'> & { href: string },
 ) {
   return (
     <Link
@@ -15,7 +15,7 @@ export function ExternalLink(
       {...props}
       // @ts-expect-error: External URLs are not typed.
       href={props.href}
-      onPress={(e) => {
+      onPress={e => {
         if (Platform.OS !== 'web') {
           // Prevent the default behavior of linking to the default browser on native.
           e.preventDefault();

samples/expo/components/StyledText.tsx

@@ -1,5 +1,12 @@
+import { StyleSheet } from 'react-native';
 import { Text, TextProps } from './Themed';
 
 export function MonoText(props: TextProps) {
-  return <Text {...props} style={[props.style, { fontFamily: 'SpaceMono' }]} />;
+  return <Text {...props} style={[props.style, styles.monoText]} />;
 }
+
+const styles = StyleSheet.create({
+  monoText: {
+    fontFamily: 'SpaceMono',
+  },
+});

samples/expo/components/Themed.tsx

@@ -18,7 +18,7 @@ export type ViewProps = ThemeProps & DefaultView['props'];
 
 export function useThemeColor(
   props: { light?: string; dark?: string },
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
 ) {
   const theme = useColorScheme() ?? 'light';
   const colorFromProps = props[theme];
@@ -39,7 +39,10 @@ export function Text(props: TextProps) {
 
 export function View(props: ViewProps) {
   const { style, lightColor, darkColor, ...otherProps } = props;
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+  const backgroundColor = useThemeColor(
+    { light: lightColor, dark: darkColor },
+    'background',
+  );
 
   return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
 }

samples/expo/package.json

@@ -10,6 +10,8 @@
     "android": "expo run:android",
     "ios": "expo run:ios",
     "ts:check": "tsc",
+    "lint": "npx eslint . --ext .js,.jsx,.ts,.tsx",
+    "fix": "npx eslint . --ext .js,.jsx,.ts,.tsx --fix && prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
     "export": "expo export --source-maps --clear --platform all",
     "export:web": "expo export --source-maps --clear --platform web",
     "prebuild": "expo prebuild --clean --no-install",
@@ -43,8 +45,17 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
+    "@react-native/eslint-config": "0.79.1",
     "@sentry/babel-plugin-component-annotate": "4.6.1",
     "@types/node": "20.10.4",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "eslint": "^8.57.0",
+    "eslint-config-expo": "^7.1.2",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.5.0",
+    "prettier": "2.8.8",
     "sentry-react-native-samples-utils": "workspace:^"
   },
   "overrides": {