Performance Issues -- How to speed up transition/ rendering after tapping tab.

[adrian-derose6]

I hooked up the tab bar to a redux reducer using react-native-navigation-redux-helpers. When I press on a tab, the reducer changes the current tab state inside of the redux store. However, there is a lag between when I tap on a tab and when the tab is "selected" and renders the component. Is there any way to speed up the process of selecting a tab and rendering the view?

Here is my code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actions as navigationActions } from 'react-native-navigation-redux-helpers';
import { Tabs, Tab, Icon } from 'react-native-elements';
import Feed from '../feed';
import Inbox from '../inbox';
import { openDrawer } from '../../actions/drawer';
import styles from './styles.js';

const { jumpTo } = navigationActions;

class ApplicationTabs extends Component {

  _openDrawer() {
    this.props.openDrawer();
  }

  _renderTabContent(tab) {
    switch (tab.key) {
      case 'feed':
        return <Feed />;
      case 'request':
        return <Inbox />
      default:
        return <Feed />;
    }
  }

  _changeTab (tab) {
    const { tabs } = this.props;
    this.props.jumpTo(tab.key, tabs.key)
  }

  render() {
    const { tabs, drawerState } = this.props;
    const children = tabs.routes.map((tab, i) => {
      return (
        <Tab
          selected={tabs.index === i}
          title={tab.title}
          renderIcon={() => <Icon containerStyle={styles.iconContainer} iconStyle={styles.iconStyle} type='Entypo' name={tab.iconName} size={33} />}
          onPress={() => this._changeTab(tab)}
          titleStyle={styles.titleStyle}>
          {this._renderTabContent(tab)}
        </Tab>
      )
    });
    return (
      <Tabs tabBarStyle={styles.tabBarStyle}>
        <Tab
          selected={drawerState === 'opened'}
          title='Menu'
          renderIcon={() => <Icon containerStyle={styles.iconContainer} iconStyle={styles.iconStyle} type='Entypo' name='menu' size={33} />}
          onPress={() => this._openDrawer()}
          titleStyle={styles.titleStyle} />
        {children}
      </Tabs>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    jumpTo: (keyOrIndex, key) => dispatch(jumpTo(keyOrIndex, key)),
    openDrawer: () => dispatch(openDrawer()),
  };
}

function mapStateToProps(state) {
  return {
    tabs: state.tabs,
    drawerState: state.drawer.drawerState
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ApplicationTabs);

Here is the tab reducer.

import { tabReducer } from 'react-native-navigation-redux-helpers';

const tabs = {
  routes: [
    { key: 'feed', title: 'Feed', iconName:'home'},
    { key: 'request', title: 'Request', iconName: 'camera-alt' },
    { key: 'memoryBox', title: 'Memory Box', iconName: 'photo' },
    { key: 'search', title: 'Search', iconName: 'search' }
  ],
  key: 'ApplicationTabs',
  index: 0
};

export default tabReducer(tabs);

[ide]

I think you'll want to try deleting chunks of your app to see what's slow and then pushing the slow parts into async calls. Also make sure you're testing performance with dev mode off.

[jonathanpalma]

Make sure you're testing performance with dev mode off. x2

[ptomasroos]

Hey @adrian-derose6 I'm working on a PR to sort this out, to avoid the delay after tapping we've had it in production and a fork earlier, will report back next week on this

[ptomasroos]

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.