How to only allow a specific element type as children using Flow and React?

Question

I'm trying to reproduce the steps on Flow docs regarding specifying element type of the children prop. The example is on the official docs.

I'm currently testing this on a react native environment, using:

• React Native (0.55.4)
• React (16.3.1)
• Flow (0.72.0)

The code I'm testing is:

// @flow

import * as React from 'react'
import { StyleSheet, View, Text } from 'react-native'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

const Item = () => <Text>Item</Text>

type Props = {
  children: React.ChildrenArray<React.Element<typeof Item>>,
}

const Container = (props: Props) => <View>{props.children}</View>

export default () => (
  <View style={styles.container}>
    <Container>
      <Item />
      <View />
    </Container>
  </View>
)

Expected behavior: get an error from flow because I'm using a View component inside the Container component, but I'm not receiving any error back.

I've also tried an equivalent version using only React on the try flow website, but I also receive no error back from flow:

/* @flow */

import * as React from 'react'

const Item = () => <span>Item</span>

type Props = {
  children: React.ChildrenArray<React.Element<typeof Item>>,
}

const Container = (props: Props) => <div>{props.children}</div>

export default () => (
  <div>
    <Container>
      <Item />
      <Item />
      <span>Text</span>
    </Container>
  </div>
)

Answer 1

For me, it seems to work using "Container" as a class component

Try Flow website example