React native web issue with react native vector icons in storybook

Question

I created a project using react native web and I got react native icons working for web and mobile except on storybook. I'm not sure how to tell storybooks webpack config to load FontAwesome fonts. I tried adding FontAwesome in the preview-head.html but Still not showing the icons just a rectangle as a placeholder. What I would like is to have my icons showing up in the storybook webpack server.

.storybook/main.js:

const webpack = require('webpack');
const path = require('path');
const rootDir = path.join(__dirname, '..');
module.exports = {
  stories: ['../src/storybook/stories/*.stories.tsx'],
  // addons: ['@storybook/addon-docs', '@storybook/addon-viewport', '@storybook/addon-knobs/', '@storybook/addon-links/', '@storybook/addon-actions/'],
  webpackFinal: async config => {
      config.module.rules.push({
          test: /\.(ts|tsx)$/,
          use: [
              {
                    loader: require.resolve('awesome-typescript-loader'),
                    options: {
                        transpileOnly: true
                    }
              }
          ],
      },
      {
        test: /\.ttf$/,
        loader: 'url-loader', // or directly file-loader
        include: path.resolve(
          __dirname,
          '../node_modules/react-native-vector-icons',
        ),
      }, 
           {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules[/\\](?!react-native|react-native-vector-icons|react-color|react-native-gesture-handler|@react-native-community|react-navigation|@react-navigation\/.*)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              'module:metro-react-native-babel-preset',
              '@babel/preset-env',
              '@babel/preset-flow',
              '@babel/preset-typescript',
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-proposal-object-rest-spread',
              'react-native-web',
            ],
          },
        },
          },
     
    )
    config.plugins.push(
      new webpack.DefinePlugin({
      __DEV__: process.env.NODE_ENV !== 'production',
    }),
    );
      config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'react-native': 'react-native-web',
        '@storybook/react-native': '@storybook/react',
        '@sentry/react-native': '@sentry/react',
        'react-native-maps': 'react-native-web-maps',
        'react-native-gesture-handler/GestureHandler': require.resolve(
        'react-native-gesture-handler/GestureHandler',
        ),
        'react-native-gesture-handler/RNGestureHandlerModule': path.join(
        rootDir,
        'node_modules',
        'react-native-gesture-handler/RNGestureHandlerModule.web.js',
      ),
      './RNGestureHandlerModule': path.join(
        rootDir,
        'node_modules',
        'react-native-gesture-handler/RNGestureHandlerModule.web.js',
      ),
      './GestureHandlerButton': path.join(
        rootDir,
        'node_modules',
        'react-native-gesture-handler',
        'GestureHandlerButton.web.js',
      ),
      './GestureComponents': path.join(
        rootDir,
        'node_modules',
        'react-native-gesture-handler',
        'GestureComponents.web.js',
      ),
      './PlatformConstants': path.join(
        rootDir,
        'node_modules',
        'react-native-gesture-handler',
        'PlatformConstants.web.js',
        ),
      '@utilities': path.resolve(__dirname, '../src/utilities/'),
      '@queries': path.resolve(__dirname, '../src/queries'),
      '@pages': path.resolve(__dirname, '../src/components/pages'),
      '@styled-components': path.resolve(
        __dirname,
        '../src/types/libraries/styled-components.ts',
      ),
      '@hooks': path.resolve(__dirname, '../src/hooks'),
      '@atoms': path.resolve(__dirname, '../src/components/atoms'),
      '@molecules': path.resolve(__dirname, '../src/components/molecules'),
      '@resources': path.join(__dirname, '../src/resources'),
      '@providers': path.resolve(__dirname, '../src/providers'),
      '@enums': path.resolve(__dirname, '../src/enums'),
      '@common': path.resolve(__dirname, '../src/components/common'),
      '@contexts': path.resolve(__dirname, '../src/contexts'),
      '@util': path.resolve(__dirname, '../src/components/util'),
      '@images': path.resolve(__dirname, '../src/assets/images'),
      '@icons': path.resolve(__dirname, '../src/assets/icons'),
      '@fonts': path.resolve(__dirname, '../src/assets/fonts'),
    };
    config.resolve.extensions.push('.ts', '.tsx');
    config.module.rules[0].use[0].options.plugins.push(['react-native-web', { commonjs: true }]);
    return config;
  },
};

.storybook/preview-head.html

<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<style type="text/css">
    @font-face {
        font-family: Quicksand-Bold;
        src: url('https://fonts.gstatic.com/s/a/6bb475d143c61221c4ea174d3c51728268e58b12dbc14600d59020ef8deaaead.ttf');
    }

    @font-face {
        font-family: Quicksand-Regular;
        src: url('https://fonts.gstatic.com/s/a/0f408f35c3679417b5580701f3ac08830ce36535af5a643a2ef5b59e91c3c6b7.ttf');
    }

    @font-face {
        font-family: Lato-Regular;
        src: url('https://fonts.gstatic.com/s/a/a649aaf21573a59079c46db19314fd95648f531e610fa932101f2705616b2882.ttf');
    }

    @font-face {
        font-family: Lato-Bold;
        src: url('https://fonts.gstatic.com/s/a/407592da08cb1f6060fbc69262ad33edd0b61ec9160521455eca8f726bbd4353.ttf');
    }
</style>
<script>
    import FontAwesome from '../node_modules/react-native-vector-icons/FontAwesome.js';
    // Generate required css
        import {iconFont} from '../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf';
        const iconFontStyles = `@font-face {
  src: url(${iconFont});
  font-family: FontAwesome;
}`;

        // Create stylesheet
        const style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
            style.styleSheet.cssText = iconFontStyles;
        } else {
            style.appendChild(document.createTextNode(iconFontStyles));
        }

        // Inject stylesheet
        document.head.appendChild(style);

        try {
                FontAwesome.loadFont();
                console.log("working!");
            } catch (e) {
                console.log(e);
            }
</script>

package.json

"storybook:web": "start-storybook -p 6006"

I think the problem exist in preview-head.html and I know I can't use import modules in the script tag but not sure where else to load fontAwesome so storybook can pick it up. Thanks!

Answer 1

For anyone having problems with this I needed to be specific on which file to be included for the url loader.

This change fixed the error:

     {
        test: /\.ttf$/,
        loader: 'url-loader', // or directly file-loader
        include: path.resolve(
          __dirname,
          '../node_modules/react-native-vector-icons/FontAwesome5.js',
        ),
      },

I also moved the font awesome script into the preview.js file

Answer 2

The recommended approach for React Native with Storybook has changed since this question was answered. So if you're using @storybook/addon-react-native-web to get Storybook running in the browser, here's how I got custom fonts working.

I created the following FontLoader component, which wraps around my app's provider tree. So for Storybook, I added the loader to the global decorators in .storybook/preview.js . (And to be clear, I don't have any special webpack config.)

// FontLoader.tsx
import React, { PropsWithChildren, useCallback } from 'react'
import { View } from 'react-native'
import { useFonts } from 'expo-font'
import { theme, fontName } from '@theme'

interface Props extends PropsWithChildren {
  onFontsLoaded?: () => void // callback for displaying the splash screen once background view has loaded
}

export const FontLoader = ({ onFontsLoaded, children }: Props) => {
  const [fontsLoaded] = useFonts({
    [fontName]: require('../../assets/fonts/Inter-Regular.otf'),
    'inter-italic': require('../../assets/fonts/Inter-Italic.otf'),
    'inter-light': require('../../assets/fonts/Inter-Light.otf'),
    'inter-medium': require('../../assets/fonts/Inter-Medium.otf'),
    'inter-bold': require('../../assets/fonts/Inter-Bold.otf'),
    'inter-black': require('../../assets/fonts/Inter-Black.otf'),
  })

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded) {
      onFontsLoaded?.()
    }
  }, [fontsLoaded, onFontsLoaded])

  if (!fontsLoaded) {
    return null
  }

  return (
    <View onLayout={onLayoutRootView} style={{ flex: 1, backgroundColor: theme.colors.$background }}>
      {children}
    </View>
  )
}

// .storybook/preview.js
import React from 'react'

import { FontLoader } from '../src/utils/FontLoader'
import { ThemeProvider } from '../src/theme'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

export const decorators = [
  Story => (
    <FontLoader>
      <ThemeProvider>
        <Story />
      </ThemeProvider>
    </FontLoader>
  ),
]