Flow type error on created components

[multiplegeorges]

Hi @kristerkari

Thanks for this package, it's very handy.

When using it and Flow together, I always get these errors from Flow:

React$Element<number>
import EmailIllustration
Cannot create `View` element because in type argument  `Yield` [1] of the return value of property `children.@@iterator`: Either  `React.Element` [2] is incompatible with  `React.Portal` [3]. Or property `@@iterator` is missing in  `React.Element` [2] but exists in  `$Iterable` [4].Flow(InferError)

Here's my metro.config.js:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require("metro-config")

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig()
  return {
    transformer: {
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  }
})()

And a simplified sample of how I'm using it:

import EmailIllustration from '../../../assets/illustrations/email.svg'

class ConfirmYourEmail extends React.Component {
render () {
  return (
    <View>
      <EmailIllustration />
    </View>
    )
  }
}

Thoughts?

[kristerkari]

Sorry, but I can not really help you with this as I don't use Flow. Hopefully someone else can provide you an answer. :)

[iamhrayr]

You can add this piece of config inside .flowconfig

module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/flow/SVGFlowStub.js'

and add SVGFlowStub.js like:

// @flow
declare export default any;

but this approach has an issue: flow will not show error even if you import non existing .svg file

I believe there is a solution for this as well, just I haven't dived so much in flow yet.