Flow saying "Required module not found" for <Image> sources

Question

We have an existing React Native project (version 0.22.2) and I'm trying to set up the Flow type checker (version 0.23) on certain files. However, Flow is giving a lot of errors for the require()s calls we're using for <Image> sources. For example, we have this code in one of our components in Header.js:

<Image source={require('./images/nav.png')} style={styles.navIcon} />

Which React Native handles fine and it works. However, Flow seems to be trying to treat the require() as a regular module require and not finding it, and giving errors like this:

Header.js:30
30: <Image source={require('./images/nav.png')} style={styles.navIcon} />
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ./images/nav.png. Required module not found

How can I tell Flow to stop giving these errors? I've tried adding .*/images/.* to the [ignore] section of my .flowconfig, but that doesn't change anything.

Answer 1

You can use the module.name_mapper.extension option in .flowconfig. For example,

[options]
module.name_mapper.extension= 'png' -> '<PROJECT_ROOT>/ImageSourceStub.js.flow'

which will map any module name ending in .png to an ImageSourceStub module, as if instead of writing require('./foo.png') you had written require('./path/to/root/ImageSourceStub').

In ImageSourceStub.js.flow you can do

const stub = {
  uri: 'stub.png'
};
export default stub; // or module.exports = stub;

so that Flow knows that require('*.png') returns a {uri: string}.

See also the Advanced Configuration docs.