如何将高阶组件传递给 React Navigation？

Question

How to pass HOC to React Navigation? I want to wrap component by SafeArea . Below example throws an error:

Functions are not valid as React child. This may happen if you return Component instead of...

function withSafeArea(component: ComponentType) {
  return function WithSafeArea() {
    return <SafeArea>{component}</SafeArea>
  }
}

<Stack.Screen
     name={Routes.Introduction}
     component={withSafeArea(Introduction)}
/>

//edit response for @Dreew Rese

code causing error from comment

    // imports

    function withSafeArea(component: ComponentType) {
      return function WithSafeArea() {
        return <SafeArea>{component}</SafeArea>
      }
    }
    
    const Stack = createStackNavigator()
    
    export const Content = () => {
      const { authenticated } = useAuthentication()
    
      if (authenticated) {
        const IntroductionWithSafeArea = withSafeArea(Introduction)
    
        return (
          <AuthorizedContentProvider>
            <WithNavigation>
              <Stack.Screen
                name={Routes.Introduction}
                component={IntroductionWithSafeArea}
              />
              <Stack.Screen name={Routes.Home} component={Home} />
              <Stack.Screen name={Routes.NewEvent} component={NewEvent} />
            </WithNavigation>
          </AuthorizedContentProvider>
        )
      }
    
      return (
        <WithNavigation>
          <Stack.Screen name={Routes.Sign} component={Sign} />
        </WithNavigation>
      )
    }

Answer 1

This likely is because higher order components are really just higher order functions. They just happen to consume React components and return decorated React components. Logically what you've done makes sense, but from React's perspective withSafeArea isn't a valid React component.

For these situations you usually will decorate the component when it is exported. Something like:

export default withSafeArea(Introduction)

But occasionally you need to decorate components "on-the-fly", like when mapping dynamic content. Here you will need to instantiate a wrapped/decorated component just ahead of returning the JSX:

const IntroductionWithSafeArea = withSafeArea(Introduction);
...
<Stack.Screen
  name={Routes.Introduction}
  component={IntroductionWithSafeArea}
/>

Additionally, you may want to tweak your HOC so it functions a bit more correctly, namely, you want any props passed to it to be passed on to the wrapped component.

function withSafeArea(Component: ComponentType) {
  return function WithSafeArea(props) { // <-- accept props
    return (
      <SafeArea>
        <Component {...props} /> // <-- pass props on
      </SafeArea>
    );
  }
}

Slightly more succinct

const withSafeArea = (Component: ComponentType) => props => (
  <SafeArea>
    <Component {...props} />
  </SafeArea>
)