Merge pull request #2803 from infinitered/lindboe/v10-to-master

Ignite X release commit

.circleci/config.yml

@@ -6,7 +6,7 @@
 defaults: &defaults
   docker:
     # Choose the version of Node you want here
-    - image: cimg/node:18.17.1
+    - image: cimg/node:20.17.0
   working_directory: /mnt/ramdisk/repo
 
 version: 2.1
@@ -63,7 +63,7 @@ jobs:
       - run:
           name: Run jest tests
           command: yarn test
-          no_output_timeout: 5m
+          no_output_timeout: 10m
       - save_cache:
           name: Save ignite dependency cache
           paths:

.gitignore

@@ -21,5 +21,11 @@ boilerplate/yarn.lock
 boilerplate/bun.lockb
 boilerplate/.gitignore.template
 
+# Test artifacts
+test/artifacts/*
+
 # flame CLI
 .config
+
+# Yarn
+.yarn/*

README.md

@@ -64,27 +64,28 @@ We've put great effort into the documentation as a team, please [read through it
 
 Nothing makes it into Ignite unless it's been proven on projects that Infinite Red works on. Ignite apps include the following rock-solid technical decisions out of the box:
 
-| Library           | Category             | Version | Description                                    |
-| ----------------- | -------------------- | ------- | ---------------------------------------------- |
-| React Native      | Mobile Framework     | v0.74   | The best cross-platform mobile framework       |
-| React             | UI Framework         | v18     | The most popular UI framework in the world     |
-| TypeScript        | Language             | v5      | Static typechecking                            |
-| React Navigation  | Navigation           | v6      | Performant and consistent navigation framework |
-| MobX-State-Tree   | State Management     | v5      | Observable state tree                          |
-| MobX-React-Lite   | React Integration    | v3      | Re-render React performantly                   |
-| Expo              | SDK                  | v51     | Allows (optional) Expo modules                 |
-| Expo Font         | Custom Fonts         | v12     | Import custom fonts                            |
-| Expo Localization | Internationalization | v15     | i18n support (including RTL!)                  |
-| Expo Status Bar   | Status Bar Library   | v1      | Status bar support                             |
-| RN Reanimated     | Animations           | v3      | Beautiful and performant animations            |
-| AsyncStorage      | Persistence          | v1      | State persistence                              |
-| apisauce          | REST client          | v2      | Communicate with back-end                      |
-| Reactotron RN     | Inspector/Debugger   | v3      | JS debugging                                   |
-| Hermes            | JS engine            |         | Fine-tuned JS engine for RN                    |
-| Jest              | Test Runner          | v26     | Standard test runner for JS apps               |
-| Maestro           | Testing Framework    |         | Automate end-to-end UI testing                 |
-| date-fns          | Date library         | v2      | Excellent date library                         |
-| FlashList         | FlatList replacement | v1      | A performant drop-in replacement for FlatList  |
+| Library                          | Category             | Version | Description                                    |
+| -------------------------------- | -------------------- | ------- | ---------------------------------------------- |
+| React Native                     | Mobile Framework     | v0.74   | The best cross-platform mobile framework       |
+| React                            | UI Framework         | v18     | The most popular UI framework in the world     |
+| TypeScript                       | Language             | v5      | Static typechecking                            |
+| React Navigation                 | Navigation           | v6      | Performant and consistent navigation framework |
+| MobX-State-Tree                  | State Management     | v5      | Observable state tree                          |
+| MobX-React-Lite                  | React Integration    | v3      | Re-render React performantly                   |
+| Expo                             | SDK                  | v51     | Allows (optional) Expo modules                 |
+| Expo Font                        | Custom Fonts         | v12     | Import custom fonts                            |
+| Expo Localization                | Internationalization | v15     | i18n support (including RTL!)                  |
+| Expo Status Bar                  | Status Bar Library   | v1      | Status bar support                             |
+| RN Reanimated                    | Animations           | v3      | Beautiful and performant animations            |
+| AsyncStorage                     | Persistence          | v1      | State persistence                              |
+| apisauce                         | REST client          | v2      | Communicate with back-end                      |
+| Reactotron RN                    | Inspector/Debugger   | v3      | JS debugging                                   |
+| Hermes                           | JS engine            |         | Fine-tuned JS engine for RN                    |
+| Jest                             | Test Runner          | v26     | Standard test runner for JS apps               |
+| Maestro                          | Testing Framework    |         | Automate end-to-end UI testing                 |
+| date-fns                         | Date library         | v2      | Excellent date library                         |
+| react-native-keyboard-controller | Keyboard library     | v1      | Great keyboard manager library                 |
+| FlashList                        | FlatList replacement | v1      | A performant drop-in replacement for FlatList  |
 
 Ignite also comes with a [component library](./docs/boilerplate/app/components/Components.md) that is tuned for custom designs, theming support, testing, custom fonts, generators, and much, much more.
 

boilerplate/.eslintignore

@@ -0,0 +1,8 @@
+node_modules
+ios
+android
+.expo
+.vscode
+ignite/ignite.json
+package.json
+.eslintignore

boilerplate/.eslintrc.js

@@ -0,0 +1,54 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: [
+    "standard",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-native/all",
+    // `expo` must come after `standard` or its globals configuration will be overridden
+    "expo",
+    // `jsx-runtime` must come after `expo` or it will be overridden
+    "plugin:react/jsx-runtime",
+    "prettier",
+  ],
+  plugins: ["reactotron", "prettier"],
+  rules: {
+    "prettier/prettier": "error",
+    // typescript-eslint
+    "@typescript-eslint/array-type": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+      },
+    ],
+    "@typescript-eslint/no-var-requires": 0,
+    // eslint
+    "no-use-before-define": 0,
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          // Prefer named exports from 'react' instead of importing `React`
+          {
+            name: "react",
+            importNames: ["default"],
+            message: "Import named exports from 'react' instead.",
+          },
+        ],
+      },
+    ],
+    //react-native
+    "react-native/no-raw-text": 0,
+    // reactotron
+    "reactotron/no-tron-in-production": "error",
+    // eslint-config-standard overrides
+    "comma-dangle": 0,
+    "no-global-assign": 0,
+    "quotes": 0,
+    "space-before-function-paren": 0,
+  },
+}

boilerplate/.gitignore

@@ -71,6 +71,7 @@ buck-out/
 bin/Exponent.app
 /android
 /ios
+expo-env.d.ts
 
 ## Secrets
 npm-debug.*
@@ -86,3 +87,6 @@ web-build/
 !env.js
 
 /coverage
+
+# Yarn
+.yarn/*

boilerplate/.prettierignore

@@ -1,6 +1,8 @@
 node_modules
 ios
 android
+.expo
 .vscode
 ignite/ignite.json
 package.json
+.eslintignore

boilerplate/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "quoteProps": "consistent"
+}

boilerplate/App.tsx

@@ -1,7 +1,6 @@
 import "@expo/metro-runtime"
-import React from "react"
 import * as SplashScreen from "expo-splash-screen"
-import App from "./app/app"
+import App from "@/app"
 
 SplashScreen.preventAutoHideAsync()
 

boilerplate/app.config.ts

@@ -8,7 +8,7 @@ require("ts-node/register")
 
 /**
  * @param config ExpoConfig coming from the static config app.json if it exists
- * 
+ *
  * You can read more about Expo's Configuration Resolution Rules here:
  * https://docs.expo.dev/workflow/configuration/#configuration-resolution-rules
  */
@@ -17,9 +17,6 @@ module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
 
   return {
     ...config,
-    plugins: [
-      ...existingPlugins,
-      require("./plugins/withSplashScreen").withSplashScreen,
-    ],
+    plugins: [...existingPlugins, require("./plugins/withSplashScreen").withSplashScreen],
   }
 }

boilerplate/app.json

@@ -7,6 +7,7 @@
     "scheme": "helloworld",
     "version": "1.0.0",
     "orientation": "portrait",
+    "userInterfaceStyle": "automatic",
     "icon": "./assets/images/app-icon-all.png",
     "splash": {
       "image": "./assets/images/splash-logo-all.png",

boilerplate/app/app.tsx

@@ -17,18 +17,20 @@ if (__DEV__) {
   require("./devtools/ReactotronConfig.ts")
 }
 import "./utils/gestureHandler"
-import "./i18n"
+import { initI18n } from "./i18n"
 import "./utils/ignoreWarnings"
 import { useFonts } from "expo-font"
-import React from "react"
+import { useEffect, useState } from "react"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
 import * as Linking from "expo-linking"
-import { useInitialRootStore } from "./models"
+import { useInitialRootStore } from "./models" // @mst remove-current-line
 import { AppNavigator, useNavigationPersistence } from "./navigators"
 import { ErrorBoundary } from "./screens/ErrorScreen/ErrorBoundary"
 import * as storage from "./utils/storage"
 import { customFontsToLoad } from "./theme"
 import Config from "./config"
+import { KeyboardProvider } from "react-native-keyboard-controller"
+import { loadDateFnsLocale } from "./utils/formatDate"
 
 export const NAVIGATION_PERSISTENCE_KEY = "NAVIGATION_STATE"
 
@@ -71,15 +73,26 @@ function App(props: AppProps) {
   } = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)
 
   const [areFontsLoaded, fontLoadError] = useFonts(customFontsToLoad)
+  const [isI18nInitialized, setIsI18nInitialized] = useState(false)
 
+  useEffect(() => {
+    initI18n()
+      .then(() => setIsI18nInitialized(true))
+      .then(() => loadDateFnsLocale())
+  }, [])
+
+  // @mst replace-next-line React.useEffect(() => {
   const { rehydrated } = useInitialRootStore(() => {
+    // @mst replace-next-line
     // This runs after the root store has been initialized and rehydrated.
 
     // If your initialization scripts run very fast, it's good to show the splash screen for just a bit longer to prevent flicker.
     // Slightly delaying splash screen hiding for better UX; can be customized or removed as needed,
     // Note: (vanilla Android) The splash-screen will not appear if you launch your app via the terminal or Android Studio. Kill the app and launch it normally by tapping on the launcher icon. https://stackoverflow.com/a/69831106
     // Note: (vanilla iOS) You might notice the splash-screen logo change size. This happens in debug/development mode. Try building the app for release.
     setTimeout(hideSplashScreen, 500)
+
+    // @mst replace-next-line }, [])
   })
 
   // Before we show the app, we have to wait for our state to be ready.
@@ -88,7 +101,13 @@ function App(props: AppProps) {
   // In iOS: application:didFinishLaunchingWithOptions:
   // In Android: https://stackoverflow.com/a/45838109/204044
   // You can replace with your own loading component if you wish.
-  if (!rehydrated || !isNavigationStateRestored || (!areFontsLoaded && !fontLoadError)) {
+  // @mst replace-next-line if (!isNavigationStateRestored || (!areFontsLoaded && !fontLoadError)) {
+  if (
+    !rehydrated ||
+    !isNavigationStateRestored ||
+    !isI18nInitialized ||
+    (!areFontsLoaded && !fontLoadError)
+  ) {
     return null
   }
 
@@ -101,11 +120,13 @@ function App(props: AppProps) {
   return (
     <SafeAreaProvider initialMetrics={initialWindowMetrics}>
       <ErrorBoundary catchErrors={Config.catchErrors}>
-        <AppNavigator
-          linking={linking}
-          initialState={initialNavigationState}
-          onStateChange={onNavigationStateChange}
-        />
+        <KeyboardProvider>
+          <AppNavigator
+            linking={linking}
+            initialState={initialNavigationState}
+            onStateChange={onNavigationStateChange}
+          />
+        </KeyboardProvider>
       </ErrorBoundary>
     </SafeAreaProvider>
   )

boilerplate/app/components/AutoImage.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from "react"
+import { useLayoutEffect, useState } from "react"
 import { Image, ImageProps, ImageURISource, Platform } from "react-native"
 
 export interface AutoImageProps extends ImageProps {