Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with the lazy attribute in a TabController.TabPage component #2969

Open
3 tasks
L2Develop96 opened this issue Mar 5, 2024 · 3 comments
Open
3 tasks
Labels
bug a bug in one of the components

Comments

@L2Develop96
Copy link

L2Develop96 commented Mar 5, 2024

Description

Related to

  • Components

Steps to reproduce

Use lazy attribute on TabController.TabPage :

 <TabController.TabPage
            key={index}
            index={index}
            lazy
            renderLoading={() => <LoaderScreen />}>
            <ScrollView>{component()}</ScrollView>
</TabController.TabPage>

Expected behavior

UI & Logic (whole component) should be lazy loaded and only when the tab is visited and not at the first mount of the tabs.

Actual behavior

UI is being rendered correctly (lazy is being applied) Logic such as effects & dispatchers are being executed instantly even when the tab is not yet visited.

More Info

Code snippet

import { useTheme } from '@/theme';
import { TabsItems } from '@/types/schemas/types';
import React, { useState } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { LoaderScreen, TabController } from 'react-native-ui-lib';

const Tabs: React.FC<{ items: TabsItems }> = ({ items }) => {
  const [currentTabIndex, setTabIndex] = useState(0);

  return (
    <TabController
      initialIndex={currentTabIndex}
      items={[{}, {}]}
      asCarousel
      onChangeIndex={setTabIndex}>
      <TabBar
        currentTabIndex={currentTabIndex}
        setTabIndex={setTabIndex}
        items={items}
      />
      <TabController.PageCarousel>
        {items.map(({ component }, index) => (
          <TabController.TabPage
            key={index}
            index={index}
            lazy
            renderLoading={() => <LoaderScreen />}>
            <ScrollView>{component()}</ScrollView>
          </TabController.TabPage>
        ))}
      </TabController.PageCarousel>
    </TabController>
  );
};

export default Tabs;

Screenshots/Video

Environment

  • React Native version: 0.72.10
  • React Native UI Lib version: 7.16.0

Affected platforms

  • Android
  • iOS
@L2Develop96 L2Develop96 added the bug a bug in one of the components label Mar 5, 2024
@SupriyaPKalghatgi
Copy link

Same issue

@SupriyaPKalghatgi
Copy link

@Inbal-Tish Can you please check this

@L2Develop96
Copy link
Author

Any updates on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug a bug in one of the components
Projects
None yet
Development

No branches or pull requests

2 participants