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

@@ -2,12 +2,13 @@
 
 # dependencies
 node_modules/
-.yarn/
 
 # Expo
 .expo/
 dist/
 web-build/
+expo-env.d.ts
+build/
 
 # Native
 *.orig.*
@@ -16,8 +17,8 @@ web-build/
 *.p12
 *.key
 *.mobileprovision
-android
-ios
+android/
+ios/
 
 # Metro
 .metro-health-check*
@@ -36,3 +37,20 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# 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/README.md

@@ -0,0 +1,74 @@
+# Expo Template Redux TypeScript
+
+The official Redux+TS template for Expo.
+
+## :arrow_forward: Usage
+
+```sh
+npx create-expo my-app --template expo-template-redux-typescript
+```
+
+# Getting Started
+
+> **Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+```
+
+```bash
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+```
+
+```bash
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+```
+
+```bash
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your Expo App. :partying_face:

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