My app was working fine until I switched to typescript, I followed expo docs on migrating to TS from JS then after running the app, it was on the default welcome to expo screen, it also said to create an index.js file in the app directory even though I already have a index.tsx file at ./app/

Package.json

{
  "name": "gymingo",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios"
  },
  "dependencies": {
    "@expo-google-fonts/langar": "^0.2.3",
    "expo": "~51.0.11",
    "expo-location": "^17.0.1",
    "expo-router": "~3.5.15",
    "expo-splash-screen": "^0.27.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.2",
    "react-native-google-places-autocomplete": "^2.5.6",
    "react-native-maps": "^1.15.6",
    "react-native-screens": "3.31.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "metro-react-native-babel-preset": "^0.77.0",
    "react-native-dotenv": "^3.4.11",
    "typescript": "~5.3.3"
  },
  "private": true
}

app.json

{
  "expo": {
    "entryPoint": "./app/index.tsx",
    "name": "gymingo",
    "slug": "gymingo",
    "version": "1.0.0",
    "orientation": "portrait",
    "scheme": "acme",
    "userInterfaceStyle": "automatic",
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.example.app",
      "config": {
        "googleMapsApiKey": ""
      }
    },
  }
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
        },
      ],
    ],
  };
};