FlashListCollapsibleTabView

FlashListCollapsibleTabView.js

import React from 'react';
import {useWindowDimensions} from 'react-native';
import {TabBar, SceneMap} from 'react-native-tab-view';
import {HScrollView} from 'react-native-head-tab-view';
import {CollapsibleHeaderTabView} from 'react-native-tab-view-collapsible-header';
import Feeds from './feeds';
import SocialProfileHeader from './profileHeader';

const FirstRoute = () => (
  <HScrollView index={0}>
    <Feeds isDiscussionFeeds={true} />
  </HScrollView>
);

const SecondRoute = () => (
  <HScrollView index={1}>
    <Feeds isReels={true} />
  </HScrollView>
);

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

const ProfilePosts = () => {
  const layout = useWindowDimensions();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'first', title: 'Feeds'},
    {key: 'second', title: 'Reels'},
  ]);
  const renderTabBar = props => (
    <TabBar
      {...props}
      indicatorStyle={{backgroundColor: '#2B51C9', alignSelf: 'center'}}
      style={{backgroundColor: '#1D1E26'}}
    />
  );
  return (
    <CollapsibleHeaderTabView
      renderScrollHeader={() => <SocialProfileHeader />}
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{width: layout.width}}
      renderTabBar={renderTabBar}
    />
  );
};

export default React.memo(ProfilePosts);