Mobile App Onboarding (Without the Animation bit)

apps/mobile/.eslintignore

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

apps/mobile/.eslintrc.js

@@ -0,0 +1,59 @@
+// 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,
+    "@typescript-eslint/no-require-imports": 0,
+    "@typescript-eslint/no-empty-object-type": 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
+    "react/prop-types": 0,
+    // 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,
+    "camelcase": 0,
+  },
+}

apps/mobile/.gitignore

@@ -0,0 +1,92 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+ios/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ignite-specific items below
+# You can safely replace everything above this comment with whatever is
+# in the default .gitignore generated by React-Native CLI
+
+# VS Code
+.vscode
+
+# Expo
+.expo/*
+bin/Exponent.app
+/android
+/ios
+expo-env.d.ts
+
+## Secrets
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# Configurations
+!env.js
+
+/coverage
+
+# Yarn
+.yarn/*

apps/mobile/.prettierignore

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

apps/mobile/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "quoteProps": "consistent",
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^(react|react-native)(/(.*))?$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

apps/mobile/README.md

@@ -0,0 +1,77 @@
+# Welcome to your new ignited app!
+
+> The latest and greatest boilerplate for Infinite Red opinions
+
+This is the boilerplate that [Infinite Red](https://infinite.red) uses as a way to test bleeding-edge changes to our React Native stack.
+
+- [Quick start documentation](https://github.com/infinitered/ignite/blob/master/docs/boilerplate/Boilerplate.md)
+- [Full documentation](https://github.com/infinitered/ignite/blob/master/docs/README.md)
+
+## Getting Started
+
+```bash
+yarn
+yarn start
+```
+
+To make things work on your local simulator, or on your phone, you need first to [run `eas build`](https://github.com/infinitered/ignite/blob/master/docs/expo/EAS.md). We have many shortcuts on `package.json` to make it easier:
+
+```bash
+yarn build:ios:sim # build for ios simulator
+yarn build:ios:dev # build for ios device
+yarn build:ios:prod # build for ios device
+```
+
+### `./assets` directory
+
+This directory is designed to organize and store various assets, making it easy for you to manage and use them in your application. The assets are further categorized into subdirectories, including `icons` and `images`:
+
+```tree
+assets
+├── icons
+└── images
+```
+
+**icons**
+This is where your icon assets will live. These icons can be used for buttons, navigation elements, or any other UI components. The recommended format for icons is PNG, but other formats can be used as well.
+
+Ignite comes with a built-in `Icon` component. You can find detailed usage instructions in the [docs](https://github.com/infinitered/ignite/blob/master/docs/boilerplate/app/components/Icon.md).
+
+**images**
+This is where your images will live, such as background images, logos, or any other graphics. You can use various formats such as PNG, JPEG, or GIF for your images.
+
+Another valuable built-in component within Ignite is the `AutoImage` component. You can find detailed usage instructions in the [docs](https://github.com/infinitered/ignite/blob/master/docs/Components-AutoImage.md).
+
+How to use your `icon` or `image` assets:
+
+```typescript
+import { Image } from 'react-native';
+
+const MyComponent = () => {
+  return (
+    <Image source={require('../assets/images/my_image.png')} />
+  );
+};
+```
+
+## Running Maestro end-to-end tests
+
+Follow our [Maestro Setup](https://ignitecookbook.com/docs/recipes/MaestroSetup) recipe.
+
+## Next Steps
+
+### Ignite Cookbook
+
+[Ignite Cookbook](https://ignitecookbook.com/) is an easy way for developers to browse and share code snippets (or “recipes”) that actually work.
+
+### Upgrade Ignite boilerplate
+
+Read our [Upgrade Guide](https://ignitecookbook.com/docs/recipes/UpdatingIgnite) to learn how to upgrade your Ignite project.
+
+## Community
+
+⭐️ Help us out by [starring on GitHub](https://github.com/infinitered/ignite), filing bug reports in [issues](https://github.com/infinitered/ignite/issues) or [ask questions](https://github.com/infinitered/ignite/discussions).
+
+💬 Join us on [Slack](https://join.slack.com/t/infiniteredcommunity/shared_invite/zt-1f137np4h-zPTq_CbaRFUOR_glUFs2UA) to discuss.
+
+📰 Make our Editor-in-chief happy by [reading the React Native Newsletter](https://reactnativenewsletter.com/).

apps/mobile/app.config.ts

@@ -0,0 +1,22 @@
+import { ConfigContext, ExpoConfig } from "@expo/config"
+
+/**
+ * Use ts-node here so we can use TypeScript for our Config Plugins
+ * and not have to compile them to JavaScript
+ */
+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
+ */
+module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
+  const existingPlugins = config.plugins ?? []
+
+  return {
+    ...config,
+    plugins: [...existingPlugins, require("./plugins/withSplashScreen").withSplashScreen],
+  }
+}

apps/mobile/app.json

@@ -0,0 +1,69 @@
+{
+  "name": "latent-booking",
+  "displayName": "Latent Booking",
+  "expo": {
+    "name": "Latent Booking",
+    "slug": "latent-booking",
+    "scheme": "latent-booking",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "automatic",
+    "icon": "./assets/images/app-icon-all.png",
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "newArchEnabled": false,
+    "jsEngine": "hermes",
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "android": {
+      "icon": "./assets/images/app-icon-android-legacy.png",
+      "package": "com.latentbooking",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/app-icon-android-adaptive-foreground.png",
+        "backgroundImage": "./assets/images/app-icon-android-adaptive-background.png"
+      },
+      "splash": {
+        "backgroundColor": "#0A0A0A"
+      }
+    },
+    "ios": {
+      "icon": "./assets/images/app-icon-ios.png",
+      "supportsTablet": true,
+      "bundleIdentifier": "com.latentbooking",
+      "splash": {
+        "backgroundColor": "#0A0A0A"
+      }
+    },
+    "web": {
+      "favicon": "./assets/images/app-icon-web-favicon.png",
+      "bundler": "metro",
+      "splash": {
+        "backgroundColor": "#0A0A0A"
+      }
+    },
+    "plugins": [
+      "expo-localization",
+      "expo-font",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/app-icon-android-adaptive-foreground.png",
+          "imageWidth": 300,
+          "resizeMode": "contain",
+          "backgroundColor": "#0A0A0A"
+        }
+      ]
+    ],
+    "experiments": {
+      "tsconfigPaths": true
+    },
+    "splash": {
+      "backgroundColor": "#0A0A0A"
+    }
+  },
+  "ignite": {
+    "version": "10.1.4"
+  }
+}