Semi dynamic import

Sorry if this is documented somewhere in an Issue but I can’t seem to find it.

I’m trying to do something like this and get an Invariant Violation.

const ListItem = ({ icon: Icon }) => (
  <View>
    <Icon />
  <View>
);

<ListItem icon={require('../path/to/yo-that.svg')} />

I’m also open to other ways of doing this as well that allow for a smidge of code reuse.

[buzbohdan]

@spacesuitdiver I’m importing svg files using require, and it only works if I use default attribute of the object returned by required call.

So I think what you need is <ListItem icon={require('../path/to/yo-that.svg').default} />

[grit96]

I got it working with the following flow type definition and jest mock.

flow-typed/svg.js

// @flow

declare module SvgImageStub {
  declare export default 'Svg';
}

.flowconfig

module.name_mapper='^[./a-zA-Z0-9$_-]+\.svg$' -> 'SvgImageStub'

__mocks__/svg.js

// @flow

const Svg = 'Svg';

export default Svg;

Now it works with both import ... from '...' and require('...').default.