how can I add a local icon png in the Tab ?

[radjivF]

Version

Tell us which versions you are using:

• react-native-router-flux ^4.0.0-beta.31 (v3 is not supported)
• react-native 0.55.4

Expected behaviour

Im trying to get an image in a tab and not an icon and its been very hard, how can I did this

import formIcon from '../assets/form-icon.png'
import checkboxIcon from '../assets/checkbox-icon.png'
import personIcon from '../assets/person-icon.png'


const TabIcon = ({ selected, title }) => {
  let image

  switch (title) {
    case 'Forms':
      image = formIcon
      break
    case 'Actions':
      image = checkboxIcon
      break
    default:
      image = personIcon
  }
  return (<Image source={image} />)
}

Actual behaviour

I get an error

Invariant Violation: element type is invalid: expected a string (for build component) or a class/function but got undefined

Check the render Method of 'TabIcon'

Any idea how can I add a local icon png in the Tab

Im totally lost at the moment. Thanks for your help

[ekoooo]

e.g. image = require('../assets/form-icon.png');

[radjivF]

thx @ekoooo, but unfortunately I have tried this too and I get

Violation: 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 TabIcon.

[jcoulaud]

thx @ekoooo, but unfortunately I have tried this too and I get

Violation: 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 TabIcon.

I had the same thing when using the Image component from React Native Elements. Switched to the Image component from React Native and it fixed the problem ;)

[aksonov]

@jcoulaud is right, closing this issue.