Migrate from React Native CLI to Expo SDK 54

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm view:*)"
+    ]
+  }
+}

.gitignore

@@ -1,9 +1,7 @@
 # OSX
-#
 .DS_Store
 
 # Xcode
-#
 build/
 *.pbxuser
 !default.pbxuser
@@ -21,61 +19,44 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
-ios/.xcode.env.local
-
-# Android/IntelliJ
-#
-build/
-release/
-.idea
-.gradle
-local.properties
-*.iml
-*.hprof
 
 # node.js
-#
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# Bundle artifact
+# Bundle artifacts
 *.jsbundle
 *.aab
 
-# Fastlane
-/vendor/bundle/
-ios/*.mobileprovision
-ios/*.cer
-ios/Matchimals.app.dSYM.zip
-**/fastlane/report.xml
-**/fastlane/Preview.html
-**/fastlane/screenshots
-**/fastlane/test_output
-*.p8
-fastlane-api-key.json
+# Expo
+.expo/
+dist/
+ios/
+android/
+web-build/
+
+# EAS
+.eas/
 
+# Environment
 .env
+.env.local
+.env.*.local
 
-# Ruby / CocoaPods
+# CocoaPods
 **/Pods/
-/vendor/bundle/
-
-# Temporary files created by Metro to check the health of the file watcher
+
+# Metro
 .metro-health-check*
- 
-# testing
+
+# Testing
 /coverage
- 
+
 # Yarn
 .yarn/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions

.yarnrc.yml

@@ -1,3 +1 @@
 nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.3.1.cjs

App.js

@@ -0,0 +1,29 @@
+import { useCallback } from "react";
+import { View } from "react-native";
+import * as SplashScreen from "expo-splash-screen";
+import { useFonts } from "expo-font";
+import App from "./src/App";
+
+SplashScreen.preventAutoHideAsync();
+
+export default function RootApp() {
+  const [fontsLoaded] = useFonts({
+    Dimbo: require("./assets/fonts/Dimbo.ttf"),
+  });
+
+  const onLayoutRootView = useCallback(async () => {
+    if (fontsLoaded) {
+      await SplashScreen.hideAsync();
+    }
+  }, [fontsLoaded]);
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
+  return (
+    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
+      <App />
+    </View>
+  );
+}

README.md

@@ -42,9 +42,9 @@ If you have never worked on a native app before- you'll need to follow the direc
 Once you've configured your machine for React-Native development- getting the Matchimals.fun app to build should only require a few steps:
 
 1.  Fork the repo
-1.  Install dependencies (`yarn` or `npm i`)
-1.  Run the metro bundler: `yarn start`
-1.  In a separate terminal- run the emulator: `yarn run ios`
+1.  Install dependencies (`npm i`)
+1.  Run the metro bundler: `npm start`
+1.  Run the metro bundler + emulator: `npm run ios`
 
 ## Special thanks
 

app.config.js

@@ -0,0 +1,46 @@
+export default {
+  expo: {
+    name: "Matchimals",
+    slug: "matchimals",
+    owner: "chrisheninger",
+    version: "1.0.0",
+    orientation: "default",
+    icon: "./assets/app-icons/Icon-App-1024x1024.png",
+    userInterfaceStyle: "light",
+    newArchEnabled: true,
+    splash: {
+      image: "./assets/splash-icon.png",
+      resizeMode: "contain",
+      backgroundColor: "#ffffff",
+    },
+    ios: {
+      bundleIdentifier: "native.matchimals.fun",
+      buildNumber: "1",
+      supportsTablet: true,
+      requireFullScreen: false,
+      config: {
+        usesNonExemptEncryption: false,
+      },
+      infoPlist: {
+        UIStatusBarHidden: true,
+        UIViewControllerBasedStatusBarAppearance: false,
+        UISupportedInterfaceOrientations: [
+          "UIInterfaceOrientationPortrait",
+          "UIInterfaceOrientationPortraitUpsideDown",
+          "UIInterfaceOrientationLandscapeLeft",
+          "UIInterfaceOrientationLandscapeRight",
+        ],
+      },
+    },
+    web: {
+      bundler: "metro",
+      favicon: "./assets/favicon.png",
+    },
+    plugins: ["expo-font", "expo-audio"],
+    extra: {
+      eas: {
+        projectId: "3ec2f1f1-6b38-475d-8aee-baeae6832cfe",
+      },
+    },
+  },
+};

eas.json

@@ -0,0 +1,32 @@
+{
+  "cli": {
+    "version": ">= 3.0.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      }
+    },
+    "preview": {
+      "distribution": "internal",
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    },
+    "production": {
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    }
+  },
+  "submit": {
+    "production": {
+      "ios": {
+        "appleTeamId": "22ZH5U6APW"
+      }
+    }
+  }
+}

index.js

@@ -1,2 +1,8 @@
-// `react-native start` doesn't allow us to pass an entry-point, so we'll just do this.
-import "./src/index.js";
+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);