React-native-navigation: Mobx observable objects are no longer observable when passed with a pushed screen

[EliSadaka]

Issue Description

Our app is using Mobx for state management. When I attempt to pass an observable object with a pushed screen, the prop is no longer observable in the new screen. Is this a bug or intended behaviour, and is there a workaround?

Steps to Reproduce / Code Snippets / Screenshots

The observable object is first defined:

@observable user = {} // user object is populated with data later

Then later, a new screen is pushed with the user object passed as a prop:

console.log(isObservable(this.user)) // this will output 'true'
Navigation.push(this.props.componentId, {
    component: {
        name: 'ProfileScreen',
        passProps: {
            user: this.user
        },
    }
})

However, testing the observability in the pushed screen shows that it is no longer an observable:

constructor(props) {
    super(props);
    console.log(isObservable(this.props.user)) // this will output 'false'
}

---

Environment

• React Native Navigation version: 2.11.0
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?): Pixel 2, iPhone SE in Debug

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[guyca]

Hey @EliSadaka
We clone props to avoid mutation issues - I'm assuming that breaks the observable contract. You can handle these situations yourself 👍

[lukescott]

@guyca I am migrating from NavigationIOS. I am running into the issue of props being cloned. Is there any way to work around this? I am passing a class and it appears that my class is being cloned.

[EliSadaka]

@lukescott I worked around this issue by passing a function and retrieving the desired object that way.

Navigation.showModal({
   stack: {
      children: [{
         component: {
            name: "VideoScreen",
            passProps: {
               activity: (() => { return this.props.activity }),
            },
         }
      }]
   }
});

constructor(props) {
    super(props);

    if (typeof this.props.activity === 'function') {
      this.activity = this.props.activity()
    }
}