Bug: Infinity Scroll View

[orelhassidproptime]

When I'm using the Tab Container and Tab Bar I'm getting an infinity scroll/height. I have to say it's not working event with the example (without using map)

Tabs.jsx

import React from 'react';
import {StyleSheet} from 'react-native';
import Styled from './styles';
import {Tab, TabBarProps, Tabs} from 'react-native-collapsible-tab-view';
import {Typography} from '@library';

type Tab = {
  panel: JSX.Element;
  label: string;
};
export interface ITabs {
  tabs: Array<Tab>;
  Header: JSX.Element;
}

const TabsApp = ({tabs, Header}: ITabs) => {
  return (
    <Styled.Tabs>
      <Tabs.Container
        renderHeader={() => Header}
        containerStyle={styles.container}
        headerContainerStyle={styles.header}>
        {tabs.map(tab => {
          return (
            <Tabs.Tab name={tab.label} label={tab.label} key={tab.label}>
              <Tabs.ScrollView>{tab.panel}</Tabs.ScrollView>
            </Tabs.Tab>
          );
        })}
      </Tabs.Container>
    </Styled.Tabs>
  );
};

TabsApp.defaultProps = {
  Header: React.Fragment,
  tabs: [],
};

export default TabsApp;

const styles = StyleSheet.create({
  container: {},
  tabBar: {},
  header: {
    shadowOpacity: 0,
    elevation: 0,
  },
  content: {},
});

SingleListingsScreen.jsx

import React from 'react';
import {ListingModel} from '@domains/listings/model/listingsModel';
import ListingCard from '@domains/listings/view/ListingCard/ListingCard';
import {Screen, Tabs, Header} from '@library';
import {useRouter} from '@services/routing';
import {CommentsPanel, DetailsPanel, GalleryPanel, NearbyPanel} from './panels';

interface Props {}

const SingleListingsScreen = (props: Props) => {
  const {params: listing}: {params: ListingModel} = useRouter();

  const tabs = [
    {
      label: 'Details',
      panel: <DetailsPanel listing={listing} />,
    },
    {
      label: 'Gallery',
      panel: <GalleryPanel listing={listing} />,
    },
    {
      label: 'Comments',
      panel: <CommentsPanel listing={listing} />,
    },
    {
      label: 'Nearby',
      panel: <NearbyPanel listing={listing} />,
    },
  ];

  return (
    <Screen spacing="none" scrollable>
      <Header title={listing.name} />
      <Tabs
        tabs={tabs}
        Header={<ListingCard item={listing} variant="single" />}
      />
    </Screen>
  );
};

export default SingleListingsScreen;

It's also give me this weird flickers

[andreialecu]

I also encountered the weird flicker and it was related to using styled-components and flex={1} which I assume you're also using. Try flexGrow instead, flex with styled components doesn't do what you'd expect.

The issue is probably related to styled components induced problems.

See: https://github.com/styled-components/styled-components/issues/1158

Please reopen otherwise.