Expo CLIで作成したReact Nativeプロジェクトのディレクトリ構成を変える

expo init AwesomeProjectでプロジェクトを作成したあとのお話
https://reactnative.dev/docs/environment-setup

expo initで生成されるディレクトリ

├── App.tsx
├── app.json
├── assets
├── babel.config.js
├── components
├── constants
├── hooks
├── navigation
├── node_modules
├── package.json
├── screens
├── tsconfig.json
├── types.tsx
└── yarn.lock

プロジェクトの設定以外のソースコードっぽいやつは/src配下にまとめたいよな✌

まとめるぜ

srcディレクトリ作ってぶっこむ

ぶっこみました

├── app.json
├── babel.config.js
├── node_modules
├── package.json
├── src
    ├── assets
    ├── components
    ├── constants
    ├── hooks
    ├── navigation
    ├── screens
    ├── types.tsx
    └── App.tsx
├── tsconfig.json
└── yarn.lock

ファイルパスが変わったので、import文がエラー祭りです🎉

baseUrlをsrcに変更

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "./src"
  }
}

エントリーポイントを変更する

これが1番ふんわりした理解で対応してしまっとる…

まずpackage.jsonを覗くと、以下のように指定がある

package.json

{
  "main": "node_modules/expo/AppEntry.js",
}

ファイルをみにいくとこんなん

node_modules/expo/AppEntry.js

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

どうやらregisterRootComponent(App)をすればよいぽい
ただこのファイルを修正するのは違いそう。App.tsxでやることにする。

修正する

package.json

{
  "main": "src/App.tsx",
}

src/App.tsx

import { registerRootComponent } from 'expo'; // 追加
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

registerRootComponent(App); // 追加

読み込んでるアセットのパスを書き換える

これはまあそうよね

app.json

{
  "expo": {
    "icon": "./src/assets/images/icon.png", // ぜんぶ修正

---

無事でけた模様✌