Delay on open with react navigation

picknamexd commented 3 years ago

I have a Tab.Navigator wrapping a Stack.Navigator that calls one Screen that shows a list of users, when I click on one of them, I call the Screen that contains collapsible-tab-view, and when it opens, it has a lot of lag, I have verified that if I put a single Tab, it works fine, but if I add 3 or 4, it starts to have lag, am I doing something wrong?

PedroBern commented 3 years ago

Does it happen if the content of your tabs are light components, something like an empty view or null? Did you try lazy mode?

picknamexd commented 3 years ago

Hello! @PedroBern Thanks for your answer, right now I'm only testing the example in the read.me, the tabs are practically empty. I just tried wrapping with Lazy mode and nothing changes, I put the code I am using.

In react navigation collapsibleScreen:

const Perfil: React.FC = () => {
  const renderItem: ListRenderItem<number> = React.useCallback(({index}) => {
    return (
      <View style={[styles.box, index % 2 === 0 ? styles.boxB : styles.boxA]} />
    );
  }, []);
  return (
    <Tabs.Container
      HeaderComponent={HeaderComponent}
      headerHeight={HEADER_HEIGHT}
      minHeaderHeight={MIN_HEADER_HEIGHT}
      TabBarComponent={(props) => (
        <MaterialTabBar
          {...props}
          activeColor="black"
          inactiveColor="black"
          inactiveOpacity={1}
          labelStyle={{fontSize: 14}}
        />
      )}>
      <Tabs.Tab name="Tab1" label="A">
        <Tabs.Lazy>
          <Tabs.Container />
        </Tabs.Lazy>
      </Tabs.Tab>
      <Tabs.Tab name="Tab2" label="B">
        <Tabs.Lazy>
          <Tabs.Container />
        </Tabs.Lazy>
      </Tabs.Tab>
      <Tabs.Tab name="Tab3" label="C">
        <Tabs.Lazy>
          <Tabs.Container />
        </Tabs.Lazy>
      </Tabs.Tab>
      <Tabs.Tab name="Tab4" label="D">
        <Tabs.Lazy>
          <Tabs.Container />
        </Tabs.Lazy>
      </Tabs.Tab>
    </Tabs.Container>
  );
};

In Navigation Component

return (
    <SafeAreaProvider>
        <NavigationContainer
          theme={this.scheme === 'dark' ? DarkTheme : DefaultTheme}>
          ...
            <Tab.Screen name="PerfilStack" component={PerfilStackScreen} />
          </Tab.Navigator>
        </NavigationContainer>
    </SafeAreaProvider>
);

In PerfilStackScreen:

return (
    <PerfilStack.Navigator>
      ...
       <PerfilStack.Screen name="Perfil" component={Perfil} />
    </PerfilStack.Navigator>
);

And Finally in Perfil component

return (
     ...
        <Ionicons.Button
          name={'settings'}
          size={25}
          color={'black'}
          onPress={() => navigation.navigate('collapsibleScreen')}
          backgroundColor="white"
        />
      </View>
    );

Jalson1982 commented 3 years ago

I have the same issue. I put 4 same scrollviews and the same problem. JS thread goes down to 20 and UI thread about 55 when I navigate to screen that contains collapsible-tab-view. I tried lazy too but it is the same.