Add Expo demo app to CI workflow

.github/workflows/tests.yml

@@ -149,7 +149,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['18.x']
-        example: ['cra4', 'cra5', 'next', 'vite', 'node-standard', 'node-esm']
+        example: ['cra4', 'cra5', 'next', 'vite', 'node-standard', 'node-esm', 'expo']
     defaults:
       run:
         working-directory: ./examples/publish-ci/${{ matrix.example }}
@@ -183,6 +183,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
+        if: matrix.example == 'react-native' || matrix.example == 'expo'
+        uses: actions/setup-java@v2
+        with:
+          java-version: '17.x'
+          distribution: 'temurin'
+
       - name: Build example
         run: NODE_OPTIONS=--openssl-legacy-provider yarn build
 

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

@@ -0,0 +1,41 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "@react-native",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/strict-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:react/jsx-runtime"
+  ],
+  "ignorePatterns": [
+    "node_modules",
+    ".vscode",
+    "dist",
+    "metro.config.js",
+    "assets",
+    ".expo",
+    ".expo-shared",
+    "webpack.config.ts"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": true,
+    "tsconfigRootDir": "./"
+  },
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": [
+      2,
+      {
+        "fixStyle": "separate-type-imports"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["./__tests__/**/*.ts", "./__tests__/**/*.tsx"],
+      "env": { "jest": true }
+    }
+  ]
+}

examples/publish-ci/expo/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+.yarn/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+android
+ios
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

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

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

examples/publish-ci/expo/App.tsx

@@ -0,0 +1,83 @@
+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;

examples/publish-ci/expo/__tests__/App.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react-native';
+import renderer from 'react-test-renderer';
+import { App } from '../App';
+
+test('renders correctly', () => {
+  renderer.create(<App />);
+  const element = render(<App />);
+  expect(element).toBeDefined();
+});

examples/publish-ci/expo/__tests__/counterSlice.test.ts

@@ -0,0 +1,37 @@
+import type { CounterState } from '../src/features/counter/counterSlice';
+import {
+  counterSlice,
+  decrement,
+  increment,
+  incrementByAmount,
+} from '../src/features/counter/counterSlice';
+
+describe('counter reducer', () => {
+  const { reducer: counterReducer } = counterSlice;
+  const initialState: CounterState = {
+    value: 3,
+    status: 'idle',
+  };
+
+  test('should handle initial state', () => {
+    expect(counterReducer(undefined, { type: 'unknown' })).toStrictEqual({
+      value: 0,
+      status: 'idle',
+    });
+  });
+
+  test('should handle increment', () => {
+    const actual = counterReducer(initialState, increment());
+    expect(actual.value).toBe(4);
+  });
+
+  test('should handle decrement', () => {
+    const actual = counterReducer(initialState, decrement());
+    expect(actual.value).toBe(2);
+  });
+
+  test('should handle incrementByAmount', () => {
+    const actual = counterReducer(initialState, incrementByAmount(2));
+    expect(actual.value).toBe(5);
+  });
+});

examples/publish-ci/expo/app.json

@@ -0,0 +1,31 @@
+{
+  "expo": {
+    "name": "expo-template-redux-typescript",
+    "slug": "expo-template-redux-typescript",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.anonymous.expotemplatereduxtypescript"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+/** @type {import('@babel/core').ConfigFunction} */
+module.exports = api => {
+  api.cache.forever();
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

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

@@ -0,0 +1,13 @@
+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;
+}

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

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

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

@@ -0,0 +1,10 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  preset: 'jest-expo',
+  testEnvironment: 'node',
+  setupFilesAfterEnv: ['./jest-setup.ts'],
+  fakeTimers: { enableGlobally: true },
+};
+
+export default config;

examples/publish-ci/expo/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "expo-template-redux-typescript",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "build": "expo prebuild --clean -p android && cd android && chmod +x ./gradlew && ./gradlew bundleRelease --no-daemon && cd .. && react-native build-android",
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "format": "prettier --write \"./**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.0.1",
+    "expo": "~49.0.15",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "react-redux": "^9.0.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@react-native/eslint-config": "^0.74.0",
+    "@testing-library/react-native": "^12.4.1",
+    "@types/babel__core": "^7.20.5",
+    "@types/jest": "^29.5.11",
+    "@types/react": "~18.2.14",
+    "@types/react-test-renderer": "^18.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "jest-expo": "^49.0.0",
+    "prettier": "^3.1.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}