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

Question

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"
  }

@LeriGogsadze: I am using mac os, do you think it is an os problem? — Paul, Dec 20 '20 at 12:40
@LeriGogsadze: Not sure I understand, on ios it works: https://i.stack.imgur.com/l1PVR.png Below you can see the storybook controls, it doesn't work on the browser. — Paul, Dec 20 '20 at 12:51

score 1 · Answer 1 · answered Dec 22 '20 at 17:27

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.

I got lost I couldn't figure out how to fix it. I am using the following boilerplate: https://github.com/ugglr/react-native-storybook-boilerplate — Paul, Dec 23 '20 at 16:51
@Paul Sorry to hear, hope I didn't contribute too much to that lol; I'm gonna have to star that boilerplate, thank you, I wasn't able to get Styled-Components to work for what I needed so maybe that'll help. Unfortunate it isn't TS though; I think that's where my problems came from though. — Ryan Lockard, Dec 24 '20 at 20:11
So are you telling me it was the opposite, maybe I helped you? ;) — Paul, Dec 25 '20 at 14:37

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

1 Answers1