Toolbar slows down entire app

Hello, I am using the Toolbar component in conjunction with react-navigation but I notice that doing so slows down visibly (even in production) the whole app. The animations become choppy and the app overall seems less responsive.

My code:

const CustomHeader = (props) => {

  const {getScreenDetails, scene, navigation} = props;
  const details = getScreenDetails(scene);
  const showBackButton = (navigation.state.routes.length > 1) ? true : false;
  const {title, searchable, ...other} = details.options;

  return (
    <Toolbar
      leftElement={showBackButton ? 'arrow-back' : 'menu'}
      onLeftElementPress={() => showBackButton ? navigation.goBack(null) : props.navigation.navigate('DrawerOpen')}
      centerElement={details.options.title}
      searchable={searchable}
      {...other}
    />
  )
};

const PrimaryNav = StackNavigator({
// ## My nav ...
}, {
// ## Other options
contentComponent: CustomDrawerContentComponent
})

I have noticed that this happens only with the toolbar component, as other components of this library do not have this effect. What could be causing this? How to remedy it?

TL;DR: I’m dropping frames like nobody’s business

Thank you.

[Mukeyii]

@Unforgiven-wanda I was using react-native-router-flux and whenever I switched between scenes or updated my redux store, all the other “invisible” scenes got updated and rerendered too. For this reason, the interactions and navigation became extremely slow and choppy. Now I don’t allow invisible scenes to update if they’re not the current one and my application is super fast and materialistic 😃

[xotahal]

It is nothing to do with this library. But anyway, it’s not the best fix what you can do. It is workaround how to quick fix your code. You should rather make your redux store immutable (you can use for example immutable.js - or of course, you can approach immutability also without the immutable.js) and than you should ensure that your components are re-rendered only if thay have to be re-rendered - and they should be re-rendered only if the data, which are shown on particular component, is changed …

You can also check RN’s runAfterInteractions