chore: update Expo example app

.github/workflows/tests.yml

@@ -241,12 +241,13 @@ jobs:
       - name: Show installed RTK versions
         run: yarn info @reduxjs/toolkit && yarn why @reduxjs/toolkit
 
-      - name: Set up JDK 17 for React Native build
+      - name: Set up JDK 21 for React Native build
         if: matrix.example == 'react-native' || matrix.example == 'expo'
         uses: actions/setup-java@v4
         with:
-          java-version: '17.x'
+          java-version: '21.x'
           distribution: 'temurin'
+          cache: 'gradle'
 
       - name: Build example
         env:

examples/publish-ci/expo/.gitignore

@@ -8,6 +8,8 @@ node_modules/
 .expo/
 dist/
 web-build/
+expo-env.d.ts
+build/
 
 # Native
 *.orig.*
@@ -36,3 +38,9 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+# IDE
+.vscode
+
+.yalc/
+yalc.lock

examples/publish-ci/expo/.prettierrc.json

@@ -1,6 +1,5 @@
 {
   "arrowParens": "avoid",
-  "bracketSameLine": true,
-  "singleQuote": true,
-  "trailingComma": "all"
+  "semi": false,
+  "singleQuote": true
 }

examples/publish-ci/expo/App.tsx

@@ -1,83 +1,10 @@
-import type { FC } from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  useColorScheme,
-} from 'react-native';
-import { Provider } from 'react-redux';
-import { store } from './src/app/store';
-import { Counter } from './src/features/counter/Counter';
-
-import {
-  DebugInstructions,
-  HermesBadge,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-import { Header } from './src/components/Header';
-import { LearnReduxLinks } from './src/components/LearnReduxLinks';
-import { Section } from './src/components/Section';
-import { TypedColors } from './src/constants/TypedColors';
-
-export const App: FC = () => {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? TypedColors.darker : TypedColors.lighter,
-  };
-
-  return (
-    <Provider store={store}>
-      <SafeAreaView style={backgroundStyle}>
-        <StatusBar
-          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-          backgroundColor={backgroundStyle.backgroundColor}
-        />
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={backgroundStyle}>
-          <Header />
-          <HermesBadge />
-          <View
-            style={{
-              backgroundColor: isDarkMode
-                ? TypedColors.black
-                : TypedColors.white,
-            }}>
-            <Counter />
-            <Section title="Step One">
-              Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-              screen and then come back to see your edits.
-            </Section>
-            <Section title="See Your Changes">
-              <ReloadInstructions />
-            </Section>
-            <Section title="Debug">
-              <DebugInstructions />
-            </Section>
-            <Section title="Learn More Redux">
-              Discover what to do next with Redux:
-            </Section>
-            <LearnReduxLinks />
-            <Section title="Learn More React Native">
-              Read the docs to discover what to do next:
-            </Section>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </Provider>
-  );
-};
-
-const styles = StyleSheet.create({
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
+import type { JSX } from 'react'
+import { Provider } from 'react-redux'
+import { store } from './src/app/store'
+import { Main } from './src/Main'
+
+export const App = (): JSX.Element => (
+  <Provider store={store}>
+    <Main />
+  </Provider>
+)

examples/publish-ci/expo/app.json

@@ -6,12 +6,12 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
+    "newArchEnabled": true,
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/splash-icon.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },

examples/publish-ci/expo/babel.config.js

@@ -1,7 +1,20 @@
-/** @type {import('@babel/core').ConfigFunction} */
-module.exports = api => {
-  api.cache.forever();
+/** @import { ConfigFunction } from "@babel/core" */
+/** @import { BabelPresetExpoOptions } from "babel-preset-expo" */
+
+/**
+ * @satisfies {ConfigFunction}
+ */
+const config = api => {
+  api.cache.forever()
+
   return {
-    presets: ['babel-preset-expo'],
-  };
-};
+    presets: [
+      /**
+       * @satisfies {['babel-preset-expo', BabelPresetExpoOptions?]}
+       */
+      (['babel-preset-expo']),
+    ],
+  }
+}
+
+module.exports = config

examples/publish-ci/expo/eslint.config.mjs

@@ -0,0 +1,95 @@
+import js from '@eslint/js'
+import prettierConfig from 'eslint-config-prettier/flat'
+import jestPlugin from 'eslint-plugin-jest'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import globals from 'globals'
+import { config, configs } from 'typescript-eslint'
+
+const eslintConfig = config(
+  {
+    name: 'global-ignores',
+    ignores: [
+      '**/*.snap',
+      '**/dist/',
+      '**/.yalc/',
+      '**/build/',
+      '**/temp/',
+      '**/.temp/',
+      '**/.tmp/',
+      '**/.yarn/',
+      '**/coverage/',
+    ],
+  },
+  {
+    name: `${js.meta.name}/recommended`,
+    ...js.configs.recommended,
+  },
+  configs.strictTypeChecked,
+  configs.stylisticTypeChecked,
+  {
+    name: `${jestPlugin.meta.name}/recommended`,
+    ...jestPlugin.configs['flat/recommended'],
+  },
+  {
+    name: 'eslint-plugin-react/jsx-runtime',
+    ...reactPlugin.configs.flat['jsx-runtime'],
+  },
+  reactHooksPlugin.configs['recommended-latest'],
+  {
+    name: 'main',
+    linterOptions: {
+      reportUnusedDisableDirectives: 2,
+    },
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.node,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      'no-undef': [0],
+      'no-restricted-imports': [
+        2,
+        {
+          paths: [
+            {
+              name: 'react-redux',
+              importNames: ['useSelector', 'useStore', 'useDispatch'],
+              message:
+                'Please use pre-typed versions from `src/app/hooks.ts` instead.',
+            },
+          ],
+        },
+      ],
+      '@typescript-eslint/consistent-type-definitions': [2, 'type'],
+      '@typescript-eslint/consistent-type-imports': [
+        2,
+        {
+          prefer: 'type-imports',
+          fixStyle: 'separate-type-imports',
+          disallowTypeAnnotations: true,
+        },
+      ],
+    },
+  },
+  {
+    name: 'commonjs',
+    files: ['metro.config.js'],
+    languageOptions: {
+      sourceType: 'commonjs',
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': [
+        0,
+        [{ allow: [], allowAsImport: false }],
+      ],
+    },
+  },
+
+  prettierConfig,
+)
+
+export default eslintConfig

examples/publish-ci/expo/globals.d.ts

@@ -1,13 +1,4 @@
 declare module '*.gif' {
-  const logo: number;
-  export default logo;
-}
-
-declare module 'react-native/Libraries/NewAppScreen' {
-  import type { FC } from 'react';
-  export const HermesBadge: FC;
-}
-
-declare module 'react-native/Libraries/Core/Devtools/openURLInBrowser' {
-  export default function openURLInBrowser(url: string): void;
+  const logo: number
+  export default logo
 }

examples/publish-ci/expo/index.ts

@@ -0,0 +1,7 @@
+import { registerRootComponent } from 'expo'
+import { App } from './App'
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App)

examples/publish-ci/expo/jest-setup.ts

@@ -1 +1 @@
-import '@testing-library/react-native/extend-expect';
+import '@testing-library/react-native'