React Native Navigation: Pass component to screen in passProps

Question

I'm using react-native-navigation and trying to pass a component to a modal screen in passProps. It works but gives me a warning:

Possible Unhandled Promise Rejection (id: 0):
Invariant Violation:
["ModalScreen",{"ContentComponent":{"type":"RCTView","key":null,"ref":null,"props":{},"_owner":null,"_store":{"validated":true}}},{},{"library":{"name":"analytics-react-native","version":"1.2.1"}}] is not usable as a native method argument

and also:

Possible Unhandled Promise Rejection (id: 1):
Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[91,21,21,21,4,92],[2,2,0,0,2,0] (..... very long log, see here ?? https://gist.github.com/LaVielle/288b48548387399f5247482634795297)

This is happening on both iOS and Android.

The modal screen is defined like this:

interface Props extends NavigationComponentProps {
  ContentComponent: React.ElementType | React.ReactElement | null;
}

export const ModalScreen: React.FC<Props> = ({ componentId, ContentComponent }) => (
  <View>
    {ContentComponent}
  </View>
)


ModalScreen.options = {
  topBar: {
    visible: false,
    drawBehind: true,
  },
  layout: {
    backgroundColor: 'transparent',
    componentBackgroundColor: 'transparent',
  },
  modalPresentationStyle: OptionsModalPresentationStyle.overCurrentContext,
}

and this is how I navigate to it (passing a simple View as ContentComponent):

await Navigation.showModal({
  stack: {
    children: [{
      component: {
        name: navRoutes.ModalScreen,
        passProps: {
          ContentComponent: <View />,
        },
      },
    }],
  },
})

I'm guessing it is not recommended to pass a component or JSX in passProps, but I cannot find any mention of that in the the RNN docs and issues. Can I ignore this warning? Is there a better way to pass a component in passProps?

Thx :)

Answer 1

等待大神答复