CODEWITHSUNDEEP
javascriptreact-nativestorybookreact-native-paperreact-native-vector-icons
Paul
Paul

Reputation: 4456

React-native with storybook problem react-native-vector-icons and react-native-paper

enter image description here

We are developing a component in react-native that uses react-native-paper, as this also works on the web, we wanted to use storybook to be able to create basic examples that can also be tested on the browser .

But the problem we are getting the following errors, which do not depend on us but on libraries we use.

As you can see below the errors, the component appears to be loaded with data.

Someone knows how to give us a hand to understand what the exact error is (in case also how to solve it), also contacting the indicated modules in order to correct them.

"dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.1",
    "react-native-paper": "^4.5.0",
    "react-native-vector-icons": "^7.1.0",
    "react-native-web": "^0.13.4",
    "styled-components": "^5.1.1"
  }

Upvotes: 2

Views: 1052

Answers (1)

Ryan Lockard
Ryan Lockard

Reputation: 11

Ran into the same issue; I'm making components that'll work with both react-dom and react-native (using react-native-web). I'm also using Storybook to test/develop the components in isolation.

The solution described here worked for me.

To my understanding, the issue is due to the plugin @babel/plugin-proposal-class-properties not being included during compilation.

I ended up with the following .storybook/webpack.config.js; as the solution I linked was a bit mal-formatted.

const path = require('path')

module.exports = async ({config, mode}) => {
  config.module.rules.push({
    test: /\.(js|jsx|ts|tsx)$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, '../node_modules/'),
    options: {
      presets: [
        "@babel/env",
        "@babel/preset-react",
        "module:metro-react-native-babel-preset",
      ],
      plugins: [
        "react-native-web",
        "@babel/plugin-proposal-class-properties"
      ]
    }
  })

  config.module.rules.push({
    test: /\.ttf$/,
    loader: 'url-loader',
    include: path.resolve(__dirname, '../node_modules/react-native-vector-icons/Fontisto.js')
  })

  config.resolve.alias = {
    'react-native': 'react-native-web'
  }

  return config
}

P.S. I used this person's issue to get the recommended installation for "web" working. My .storybook/preview.js looks similar to this:

... (export parameters, export globalTypes, etc..)

// ==
import Fontisto from '../node_modules/react-native-vector-icons/Fontisto'
import iconFont from '../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf'

const iconFontStyle =`
  @font-face {
    src: url(${iconFont});
    font-family: Fontisto;
  }
`

const style = document.createElement('style')
style.type = 'text/css'
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyle
} else {
  style.appendChild(document.createTextNode(iconFontStyle))
}
document.head.appendChild(style)
//

Hope it all works out!

P.P.S Sorry, feel it's worth mentioning that I'm not sure if this Babel configuration is better put within .storybook/main.js as recommended by Storybook.js. I could not get this method to work; and couldn't find any examples on how I'd go about doing it; my above mentioned solution came first.

Upvotes: 1

Related Questions