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/
- images
- 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