React-native-navigation: Immutable error when passing appStyle [iOS]

[lglomer]

Issue Description

Error: You attempted to set the key 'statusBarColor' with the value 486520604 on an object that is meant to be immutable and has been frozen.

Steps to Reproduce / Code Snippets / Screenshots

• When the app starts a welcome screen is launched by calling Navigation.startSingleScreenApp.
• Then after the user has authenticated I called Navigation.startTabBasedApp and passed an appStyle object to it.

App.js:

import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
import configureStore from './src/redux/configureStore';
import { registerScreens } from './src/screens';
import * as appActions from './src/modules/_global/reducer';

const highlightsIcon = require('./src/img/ic_bookmark_border.png');

const store = configureStore();
registerScreens(store, Provider); // register app's screens

const appStyle = {
  statusBarColor: '#B71C1C'
};

const navigatorStyle = {
};

const tabsStyle = {
  tabBarSelectedButtonColor: '#D32F2F'
};

class App {
  constructor() {
    // execute onStoreUpdate when the app's state changes
    store.subscribe(this.onStoreUpdate.bind(this));
    store.dispatch(appActions.appInitialized());
  }

  startApp({ loginState }) {
    switch (loginState) {
      case null:
        break;
      case 'welcome':
        this.startWelcomeApp();
        break;
      case 'app':
        this.startFullApp();
        break;

      default:
        console.error('Unknown app root');
    }
  }

  startFullApp() {
    Navigation.startTabBasedApp({
      tabs: [
        {
          label: 'Groups',
          title: 'Groups',
          screen: 'Groups.Groups',
          icon: highlightsIcon,
          navigatorStyle
        }
      ],
      tabsStyle,
      appStyle,
    });
  }

  startWelcomeApp() {
    Navigation.startSingleScreenApp({
      screen: {
        screen: 'Groups.Welcome',
        title: 'Welcome',
      }
    });
  }

  onStoreUpdate() {
    const { root } = store.getState();
    // handle a root change
    if (this.currentRoot !== root) {
      // handle a login change
      const appFirstOpens = !this.currentRoot;
      const loginStateChanged = this.currentRoot && this.currentRoot.loginState !== root.loginState;

      if (appFirstOpens || loginStateChanged) {
        this.startApp(root);
      }

      this.currentRoot = root;
    }
  }

  render() {
    return (
      null
   );
  }
}

export default App;

---

Environment

• React Native Navigation version: ^1.1.268
• React Native version: 0.50.3
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iOS 11.1 with iPhone 8 and iPhone X simulator

[kastopia]

I started getting a similar error with tabBarButtonColor, I think the issue is connected.
It used to work well with version 1.1.208, so try using that version for now.
This bug was introduced in version 1.1.209.

[RyanWarner]

I was able to get around this error by explicitly declaring my app style in line (instead of defining the variables above):

Navigation.startTabBasedApp({
    tabs: [
      {
        label: 'Groups',
        title: 'Groups',
        screen: 'Groups.Groups',
        icon: highlightsIcon,
        navigatorStyle
      }
    ],
    appStyle: {
      statusBarColor: '#B71C1C'
    }
  });

I have no idea why this works, but I'm curious if it works for you too.

[brunolemos]

I have the same problem with same situation: using appStyle and changing between startSingleScreenApp and startTabBasedApp. Seems to happen with all color properties (navBarBackgroundColor, ...)

I was able to get around this error by explicitly declaring my app style in line

Using navigatorStyle on the start methods instead of appStyle works, but unfortunately this brings other bugs to my application (e.g. even though I set button color to black it was staying blue):

Workaround

So what works for me is add a static navigatorStyle = { ...defaultNavigatorStyle, otherStylesHere } on ALL screen components.

[chrise86]

I used a slightly modified version of @RyanWarner 's solution, which basically uses destructuring on the style variable to return a new object:

Navigation.startTabBasedApp({
    tabs: [
      {
        label: 'Groups',
        title: 'Groups',
        screen: 'Groups.Groups',
        icon: highlightsIcon,
        navigatorStyle
      }
    ],
    appStyle: { ...appStyle }
  });

[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 version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.