Why is my Font folder not being imported?

Also, this issue applies to the icons and images folders as well.

File stucture

• assets/
  • fonts/
    • nunito/
    • poppins/
    • index.ts
  • icons/
    • android/
    • ios/
    • index.ts
  • images
    • splash-screen/
    • index.ts
• app.config.ts
• metro.config.js
• declarations.d.ts
• ts.config.json
• src/
• …

---

Code Review

assets/fonts/index.ts

import NunitoBold from './nunito/Nunito-Bold.ttf';
import NunitoLight from './nunito/Nunito-Light.ttf';
import NunitoMedium from './nunito/Nunito-Medium.ttf';
import NunitoRegular from './nunito/Nunito-Regular.ttf';
import NunitoSemiBold from './nunito/Nunito-SemiBold.ttf';
import PoppinsBold from './poppins/Poppins-Bold.ttf';
import PoppinsLight from './poppins/Poppins-Light.ttf';
import PoppinsMedium from './poppins/Poppins-Medium.ttf';
import PoppinsRegular from './poppins/Poppins-Regular.ttf';
import PoppinsSemiBold from './poppins/Poppins-SemiBold.ttf';

export const APP_FONTS = {
  nunito: {
    bold: NunitoBold,
    light: NunitoLight,
    medium: NunitoMedium,
    regular: NunitoRegular,
    semibold: NunitoSemiBold,
  },
  poppins: {
    bold: PoppinsBold,
    light: PoppinsLight,
    medium: PoppinsMedium,
    regular: PoppinsRegular,
    semibold: PoppinsSemiBold,
  },
};

assets/images/index.ts

import splashDark from './splash-screen/dark.png';
import splashLight from './splash-screen/light.png';

export const APP_SPLASH_SCREEN = {
  dark: splashDark,
  light: splashLight,
};

same thing assets/icons/index.ts

...

tsconfig.json

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

declarations.d.ts

declare module '*.ttf' {
  const content: string;
  export default content;
}

declare module '*.png' {
  import type { ImageURISource } from 'react-native';
  const content: ImageURISource['uri'];
  export default content;
}

metro.config.js

const { getDefaultConfig } = require('@expo/metro-config');
const path = require('path');
const withStorybook = require('@storybook/react-native/metro/withStorybook');

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withStorybook(defaultConfig, {
  ...defaultConfig,
  enabled: process.env.WITH_STORYBOOK,
  configPath: path.resolve(__dirname, '.storybook'),
});

app.config.ts

import type { ExpoConfig } from '@expo/config';

import { APP_FONTS } from './assets/fonts';
import { APP_ICONS } from './assets/icons';
import { APP_SPLASH_SCREEN } from './assets/images';

const isStorybookEnabled: boolean =
  process.env.STORYBOOK_ENABLED?.toLowerCase() === 'true';

const getSplashConfig = (): ExpoConfig['splash'] => ({
  image: APP_SPLASH_SCREEN.dark,
  resizeMode: 'contain',
  backgroundColor: '#F5F5F5',
});

const getAndroidConfig = (): ExpoConfig['android'] => ({
  adaptiveIcon: {
    foregroundImage: APP_ICONS.android.adaptiveIcon,
    backgroundImage: APP_ICONS.android.adaptiveIcon,
    monochromeImage: APP_ICONS.android.adaptiveIcon,
    backgroundColor: '#151718',
  },
  package: 'com.mces58.hangmanify',
});

const getIosConfig = (): ExpoConfig['ios'] => ({
  icon: {
    dark: APP_ICONS.ios.darkIcon,
    light: APP_ICONS.ios.lightIcon,
    tinted: APP_ICONS.ios.tintedIcon,
  },
});

const getWebConfig = (): ExpoConfig['web'] => ({
  favicon: APP_ICONS.web.favIcon,
});

const splashScreenPlugin: [string, Record<string, unknown>] = [
  'expo-splash-screen',
  {
    image: APP_SPLASH_SCREEN.dark,
    resizeMode: 'contain',
    backgroundColor: '#F5F5F5',
    dark: {
      image: APP_SPLASH_SCREEN.light,
      backgroundColor: '#151718',
    },
  },
];

const fontPlugin: [string, Record<string, unknown>] = [
  'expo-font',
  {
    fonts: [
      APP_FONTS.nunito.bold,
      APP_FONTS.nunito.light,
      APP_FONTS.nunito.medium,
      APP_FONTS.nunito.regular,
      APP_FONTS.nunito.semibold,
      APP_FONTS.poppins.bold,
      APP_FONTS.poppins.light,
      APP_FONTS.poppins.medium,
      APP_FONTS.poppins.regular,
      APP_FONTS.poppins.semibold,
    ],
  },
];

export default ({ config }: { config: ExpoConfig }): ExpoConfig => ({
  ...config,
  name: process.env.STORYBOOK_ENABLED ? 'Hangmanify Storybook' : config.name,
  splash: getSplashConfig(),
  android: getAndroidConfig(),
  ios: getIosConfig(),
  web: getWebConfig(),
  plugins: ['expo-localization', splashScreenPlugin, fontPlugin],
  extra: {
    ...config.extra,
    storybookEnabled: isStorybookEnabled,
    eas: {
      projectId: '...',
    },
  },
});

Output:

yarn start
yarn run v1.22.22
$ expo start
env: load .env
env: export GOOGLE_GENERATIVE_AI_API_KEY WITH_STORYBOOK
Starting project at /home/mces58/Desktop/Hangmanify
Error: Error reading Expo config at /home/mces58/Desktop/Hangmanify/app.config.ts:

Cannot find module './assets/fonts'
Require stack:
- /home/mces58/Desktop/Hangmanify/app.config.ts
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/config/build/evalConfig.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/config/build/getConfig.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/config/build/Config.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/config/build/index.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/cli/build/src/start/detectDevClient.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/cli/build/src/start/resolveOptions.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/cli/build/src/start/index.js
- /home/mces58/Desktop/Hangmanify/node_modules/@expo/cli/build/bin/cli
- /home/mces58/Desktop/Hangmanify/node_modules/expo/bin/cli