Storybook react-native check the render method of `CellRenderer`

Question

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of CellRenderer.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of CellRenderer.

at createFiberFromTypeAndProps (react-dom.development.js:23965)
at createFiberFromElement (react-dom.development.js:23988)
at createChild (react-dom.development.js:13628)
at reconcileChildrenArray (react-dom.development.js:13900)
at reconcileChildFibers (react-dom.development.js:14305)
at reconcileChildren (react-dom.development.js:16762)
at updateHostComponent (react-dom.development.js:17302)
at beginWork (react-dom.development.js:18627)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)

I'm trying to use storybooks on a component that should work on react-native ios, android and web.

In this case on the Storybook we can try the web part, it seems to work, but the problem is when I put an icon, it gives me the problem listed above.

The insertion of an icon is done in the following way in obj in date:

icon: (item, background) => Icon ({icon: 'user', item, background})

Can you give me a hand?

import React from 'react'
import { View } from 'react-native'
import { storiesOf } from '@storybook/react-native'
import { withKnobs, object } from '@storybook/addon-knobs'
import Dashboard from '../Dashboard'

import { FontAwesome } from 'react-native-vector-icons'

const Icon = ({ icon, item, background }) => (
  <FontAwesome
    name={icon}
    size={40}
    color={item.iconColor || (!item.background || !background ? '#3498db' : '#fff')}
    style={item.styleIcon}
  />
)

const data = [
  {
    name: 'Me',
    background: '#3498db',
    icon: (item, background) => Icon({ icon: 'user', item, background }),
    iconColor: '#0d47a1',
    rippleColor: '#000',
  },
  {
    name: 'Family',
    background: '#b71c1c',
    //icon: (item, background) => Icon({ icon: 'gratipay', item, background }),
    styleIcon: { color: '#0d47a1' },
  },
  {
    name: 'Lovely',
    background: '#ffeb3b',
    //icon: (item, background) => Icon({ icon: 'heart', item, background }),
  },
  {
    name: 'Team',
    background: '#4caf50',
    //icon: (item, background) => Icon({ icon: 'users', item, background }),
    styleName: { color: '#0d47a1', fontWeight: 'bold' },
  },
  {
    name: 'Friends',
    nameColor: '#3498db',
    background: '#02cbef',
    //icon: (item, background) => Icon({ icon: 'group', item, background }),
  },
  {
    name: 'Calendars',
    background: '#ff5722',
    //icon: (item, background) => Icon({ icon: 'calendar', item, background }),
  },
]

const card = ({ name }) => console.log('Card: ' + name)

storiesOf('Dashboard', module)
  .addDecorator(withKnobs)
  .add('example', () => (
    <View style={{ alignItems: 'center' }}>
      <Dashboard data={data} background={true} card={card} column={2} rippleColor={'#3498db'} />
    </View>
  ))

Dashboard.js

import React, { useState } from 'react'
import { Text, View, StyleSheet, Dimensions, Platform, TouchableNativeFeedback, TouchableOpacity } from 'react-native'
import { FlatGrid } from 'react-native-super-grid'

const { width } = Dimensions.get('window')

const RippleColor = (...args) => (Platform.Version >= 21 ? TouchableNativeFeedback.Ripple(...args) : null)

const Touchable = Platform.OS === 'web' ? TouchableOpacity : TouchableNativeFeedback

function Dashboard({ column = 2, data = [], card = () => {}, background, rippleColor = '#fff', ...props }) {
  const [state, setState] = useState({
    widthDevice: width,
  })
  const { widthDevice } = state

  const onLayout = (e) => {
    const { width: widthDevice } = Dimensions.get('window')
    setState((prev) => ({ ...prev, widthDevice }))
  }
  var dim = widthDevice / column - 20
  return (
    <View onLayout={onLayout} style={{ flex: 1 }}>
      <FlatGrid
        itemDimension={dim}
        data={data}
        style={styles.gridView}
        renderItem={({ item, index }) => (
          <Touchable
            onPress={() => card(item)}
            delayPressIn={0}
            delayPressOut={0}
            useForeground={true}
            background={RippleColor(item.rippleColor || rippleColor)}
          >
            <View
              style={[
                styles.itemContainer,
                {
                  backgroundColor: !item.background || !background ? '#fff' : item.background,
                  height: dim,
                },
              ]}
            >
              {item?.icon && item?.icon(item, background)}
              <Text
                style={[
                  styles.itemName,
                  {
                    color: item.nameColor || (!item.background || !background ? '#000' : '#fff'),
                  },
                  item.styleName,
                ]}
              >
                {item.name || index}
              </Text>
            </View>
          </Touchable>
        )}
        {...props}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  gridView: {
    flex: 1,
  },
  itemContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
  },
  itemName: {
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
  },
})

export default Dashboard

Weback.config.js

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: path.resolve(__dirname, './public/index.html'),
  filename: 'index.html',
  inject: 'body',
})

module.exports = {
  entry: path.join(__dirname, 'index.web.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/build'),
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
      '@storybook/react-native': '@storybook/react',
      'styled-components/native': 'styled-components',
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules[/\\](?!react-native-vector-icons)/,
        use: {
          loader: 'babel-loader',
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-flow',
              '@babel/preset-typescript',
              {
                plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
              },
            ],
          },
        },
      },
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules[/\\](?!react-native-super-grid)/,
        use: {
          loader: 'babel-loader',
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-flow',
              '@babel/preset-typescript',
              {
                plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
              },
            ],
          },
        },
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        loader: 'file-loader',
      },
      {
        test: /\.ttf$/,
        loader: 'url-loader', // or directly file-loader
        include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true,
  },
}