React-native-navigation: Unhandled Promise Rejection Error startTabBasedApp timestamp immutable frozen

[jslz]

Issue Description

https://github.com/wix/react-native-navigation/blob/fd4e7091c056dfe9554efbc38cf1a5762b32d3fe/src/deprecated/platformSpecificDeprecated.ios.js#L119

You attempted to set the key timestamp with the value xxx on an object that is meant to be immutable and has been frozen.

Steps to Reproduce / Code Snippets / Screenshots

I haven't seen this before today and I don't think we've really changed much so maybe it is some kind of race condition. We're just calling startTabBasedApp with a config. I did a console.log(Object.isFrozen(config)) and it said false.

---

Environment

• React Native Navigation version: 1.1.331
• React Native version: 0.51.0
• Platform(s) (iOS, Android, or both?): saw it on iOS simulator, haven't repro'd it much yet.
• Device info (Simulator/Device? OS version? Debug/Release?): RN Debug build, iOS simulator, iphone 6, iOS 11.2

[jslz]

Update: seeing it pretty often today. Printing out the stuff from that line 119, params.passProps === undefined, and Object.isFrozen(params.passProps) === true, although Object.isFrozen(params) === false.

The params does appear to be our config to startTabBasedApp.

ExceptionsManager.js:73 
{tabs: Array(5), tabsStyle: {…}, appStyle: {…}, animationType: "fade", passProps: {…}}
animationType
:
"fade"
appStyle
:
forceTitlesDisplay
:
(...)
keepStyleAcrossPush
:
(...)
orientation
:
(...)
tabBarButtonColor
:
(...)
tabBarLabelColor
:
(...)
tabBarSelectedButtonColor
:
(...)
tabBarSelectedLabelColor
:
(...)
get forceTitlesDisplay
:
ƒ ()
set forceTitlesDisplay
:
ƒ ()
get keepStyleAcrossPush
:
ƒ ()
set keepStyleAcrossPush
:
ƒ ()
get orientation
:
ƒ ()
set orientation
:
ƒ ()
get tabBarButtonColor
:
ƒ ()
set tabBarButtonColor
:
ƒ ()
get tabBarLabelColor
:
ƒ ()
set tabBarLabelColor
:
ƒ ()
get tabBarSelectedButtonColor
:
ƒ ()
set tabBarSelectedButtonColor
:
ƒ ()
get tabBarSelectedLabelColor
:
ƒ ()
set tabBarSelectedLabelColor
:
ƒ ()
__proto__
:
Object
passProps
:
timestamp
:
(...)
get timestamp
:
ƒ ()
set timestamp
:
ƒ ()
__proto__
:
Object
tabs
:
Array(5)
0
:
{screen: "T", icon: 32, label: "T", navigationParams: {…}, passProps: {…}}
1
:
{screen: "I", icon: 33, label: "I", navigationParams: {…}, passProps: {…}}
2
:
{screen: "O", icon: 34, label: "O", navigationParams: {…}, passProps: {…}}
3
:
{screen: "P", icon: 35, label: "P", navigationParams: {…}, passProps: {…}}
4
:
{screen: "E", icon: 36, label: "E", navigationParams: {…}, passProps: {…}}
length
:
5
__proto__
:
Array(0)
tabsStyle
:
{tabBarButtonColor: "#8E8E93", tabBarLabelColor: "#8E8E93", tabBarSelectedButtonColor: "#007AFF", tabBarSelectedLabelColor: "#007AFF"}
__proto__
:
Object


reactConsoleErrorHandler | @ | ExceptionsManager.js:73
-- | -- | --
  | console.error | @ | YellowBox.js:71
  | startTabBasedApp$ | @ | platformSpecificDeprecated.ios.js:126
  | tryCatch | @ | runtime.js:62
  | invoke | @ | runtime.js:296
  | prototype.(anonymous function) | @ | runtime.js:114
  | tryCatch | @ | runtime.js:62
  | invoke | @ | runtime.js:152
  | (anonymous) | @ | runtime.js:195
  | tryCallTwo | @ | core.js:45
  | doResolve | @ | core.js:200
  | Promise | @ | core.js:66
  | callInvokeWithMethodAndArg | @ | runtime.js:194
  | enqueue | @ | runtime.js:217
  | prototype.(anonymous function) | @ | runtime.js:114
  | runtime.async | @ | runtime.js:241
  | startTabBasedApp | @ | platformSpecificDeprecated.ios.js:17
  | startTabBasedApp$ | @ | Navigation.js:135
  | tryCatch | @ | runtime.js:62
  | invoke | @ | runtime.js:296
  | prototype.(anonymous function) | @ | runtime.js:114
  | tryCatch | @ | runtime.js:62
  | invoke | @ | runtime.js:152
  | (anonymous) | @ | runtime.js:195
  | tryCallTwo | @ | core.js:45
  | doResolve | @ | core.js:200
  | Promise | @ | core.js:66
  | callInvokeWithMethodAndArg | @ | runtime.js:194
  | enqueue | @ | runtime.js:217
  | prototype.(anonymous function) | @ | runtime.js:114
  | runtime.async | @ | runtime.js:241
  | startTabBasedApp | @ | Navigation.js:134
  | startAuthenticatedApp | @ | Screens.js:223

[jslz]

So far, I think I've only seen it on the iOS simulator. The iPhone 6 / iOS 10.3.2 i test on hasn't failed with that yet.

[jslz]

dang it, nope, still get the unhandled promise rejection.

.
.
.

old incorrect claim:

fwiw If I manually patch the code from

    _.set(params, 'passProps.timestamp', Date.now());

to

    if (params.passProps === undefined) { params.passProps = {}; }
    params.passProps.timestamp = Date.now();

then it doesn't fail.

(I did some testing in a repl of _.set() and could not repro the issue that way.)

[jslz]

I fixed it in our own code, it appears to be something about how module-level variables are somewhere frozen by something. So I moved the config to be inside the same function that calls startTabBasedApp and it was all ok.

[tmaly1980]

@jslz For the sake of others, can you clarify what exactly you did to fix this (with code samples)? I'm running into this same exact issue.

[jslz]

@tmaly1980 dunno exactly other than making everything as "function local" instead of anything being "module local" helped fix it, empirically speaking.

[tmaly1980]

Sorry, can you please clarify what you mean by an example? I don't know what 'function local' and 'module local' means.

[tmaly1980]

@jslz I think I figured it out. I don't exactly know why, but because I call startTabBasedApp multiple times (once post-login, and another after rehydrating), passProps gets set as immutable (probably somewhere deep inside react-native-navigation)... and won't be able to be called multiple times if state changes. Apparently, it caches the object from the import statement and probably directly modifies it and will stay that way forever.

The easiest solution I could come up with is doing a deep copy using JSON:

Navigation.startTabBasedApp(JSON.parse(JSON.stringify(tabNavigationConfig)));

This solved my immutability problems with starting the app.

[gordysc]

Just in case someone else hits this down the road, you can also have your config be returned via function to fix this:

const config = () => { 
 return {
  tabs: [ ... ]
  }
};

Navigation.startTabBasedApp(config());

[hiradary]

I had the same problem. You @tmaly1980, just Saved My Life 💯