property `children` not found in props of React element ...

[MoOx]

This issue showed when I upgraded from 0.25 to 0.27...

I think I am still having issue.

Here is a component

// @flow

import React from "react"
import { StyleSheet, View } from "react-native"

type Props = {
  children: ReactElement,
}

const NavigationBar = (props: Props): ReactElement => {
  return (
    <View
      accessibilityRole={ "menubar" }
      style={ styles.bar }
    >
      <View style={ styles.center }>
        { props.children }
      </View>
    </View>
  )
}

NavigationBar.defaultProps = {
  children: null,
}

const styles = StyleSheet.create({
  // ...
})

export default NavigationBar

And here is a place where it is throwing errors

// ...
const Header = (props: Props): ReactElement => {
  const { user } = props

  return (
    <NavigationBar> // <- HERE I AM THE ERROR: property `children` not found in props of React element `NavigationBar`
      <View style={ styles.left }>
// ...

Looks like a bug. Or maybe I am doing something wrong?

[Kerumen]

Dupe of #1934

[ctrlplusb]

For now I have had to resort to the following:

type Props = {
  children?: ReactElement,
  other: number,
};

function Foo({ children, other } : Props) {
  return (
     <div>...</div>
  );
}

[szagi3891]

fast offtopic :
ReactElement is the proper way to describe output type from function render ?
where it is defined by this definition ?

[jedwards1211]

@ctrlplusb you can workaround without using a maybe prop:

<NavigationBar children={<span>flow bug (this will get overridden by the children below)</span>}>
  <View style={ styles.left }>
  ...
</NavigationBar>

[jedwards1211]

@szagi3891 It's here: https://github.com/facebook/flow/blob/master/lib/react.js#L32

I thought it has to be React.Element in recent versions of flow though?

[ekosz]

Is there any update on this issue? I just just ran into this.

[MoOx]

My real poor workaround is to always do children?: React$Element<any>.

[wildeyes]

@MoOx Hey, why do you write the dollar sign between React and Element?

[gcanti]

@wildeyes React$Element and import type { Element } from 'react' are equivalent https://github.com/facebook/flow/blob/master/lib/react.js#L226