ReactNativeのScreenでcomponentにpropsを渡したい

ReactNativeのMaterial Top Tabs Navigator（https://reactnavigation.org/docs/material-top-tab-navigator/)
を使う際に、Tab.Screenのcomponentにpropsを渡したいという状況に陥りました。

通常の書き方だと、

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

となってしまって、それぞれのcomponentにpropsを渡せません。

対処法

公式のScreenの箇所にコンポーネントのpropsを渡す代わりにReact Elementをcallbackで返してくれるという記述が...!
https://reactnavigation.org/docs/screen#children

これをTab.Screenに応用します。

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home">
        {(props)=> <HomeScreen {...props}/>}
      </Tab.Screen>
      <Tab.Screen name="Setting">
        {(props)=> <SettingScreen {...props}/>}
      </Tab.Screen>
    </Tab.Navigator>
  );
}

解決しました！子要素はJSXで返さないといけないので{()=> ...}の形にすることに注意です。