1 to 2 second delay when toggling menu

[CyrisXD]

GIF screen recording

Following this set up, when I click the Hamburger Menu icon to fire the this.setState to open the menu, there is a 1 to 2 second delay before the menu opens.

Weirdly sliding the menu works instantly.

Problem persists on Android Simulator and Android Galaxy S8+ device.

Any help is appreciated.

Cheers

[CyrisXD]

Figured it out, too many items displayed on Home Screen causes a delay with the toggle function. I limited the amount of games pulled through to 10, and it works fine now.

No other way around this right?

[rizrmd]

This happens to me, with blank home screen

[m-ochyra]

Your screens are probably too complex to update state and re render every items when side menu is opening or closing. Try to not use state to control side menu visibility, use refs. Look at my modified example Basic project where I render over 100000 items and side menu is open and close immediately:

export default class Basic extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);

    this.state = {
      selectedItem: 'About',
    };
  }

  toggle() {
    this.sideMenu.openMenu(true);
  }

  onMenuItemSelected = item => {
    this.sideMenu.openMenu(false);

    this.setState({
      selectedItem: item,
    });
  }

  render() {
    const menu = <Menu onItemSelected={this.onMenuItemSelected} />;

    return (
      <SideMenu
        ref={(ref) => this.sideMenu = ref}
        menu={menu}
      >
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+Control+Z for dev menu
          </Text>
          <Text style={styles.instructions}>
            Current selected menu item is: {this.state.selectedItem}
          </Text>
          {Array(100000).map(() => {
            return <Text>One of many items</Text>;
          })}
        </View>
        <TouchableOpacity
          onPress={this.toggle}
          style={styles.button}
        >
          <Image
            source={image}
            style={{ width: 32, height: 32 }}
          />
        </TouchableOpacity>
      </SideMenu>
    );
  }
}