Using react-native-collapsible-tab-view in Turnstile

SubwayStopTabViewExample.tsx

import { MaterialTabBar, Tabs } from "react-native-collapsible-tab-view";

export default function SubwayStopScreen {
  // ...setup

  return (
    <View
      style={{
        backgroundColor: theme.background["100"],
        flex: 1,
      }}
    >
      <SubwayStop />
    </View>
  );
}

export function SubwayStop() {
  // ...setup

  return (
    <Tabs.Container
      headerContainerStyle={{
        elevation: 0,
        shadowOpacity: 0,
        borderBottomWidth: 1,
        borderBottomColor: theme.background["300"],
      }}
      renderHeader={HeaderComponent}
      renderTabBar={(props) => (
        <MaterialTabBar
          {...props}
          style={{
            backgroundColor: theme.background["100"],
          }}
          tabStyle={{
            backgroundColor: theme.background["100"],
            minWidth: 100,
          }}
          labelStyle={{
            fontWeight: 600,
            color: theme.text["100"],
            textTransform: "capitalize",
          }}
          indicatorStyle={{
            backgroundColor: theme.text["100"],
          }}
          inactiveColor={theme.text["300"]}
          activeColor={theme.text["100"]}
          scrollEnabled
        />
      )}
    >
      <Tabs.Tab name={stop.northDirectionLabel || "Northbound"}>
        <SubwayStopTab direction="north" />
      </Tabs.Tab>
      <Tabs.Tab name={stop.southDirectionLabel || "Southbound"}>
        <SubwayStopTab direction="south" />
      </Tabs.Tab>
    </Tabs.Container>
  );
}

export const SubwayStopTab = ({ direction }: Props) => {
  // ...setup

  return (
    <Tabs.FlatList
      onRefresh={onRefresh}
      refreshing={refreshing}
      data={data}
      getItemLayout={getItemLayout}
      maxToRenderPerBatch={15}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      ItemSeparatorComponent={renderSeparator}
      ListEmptyComponent={
        !loading &&
        !data?.length && <EmptyList directionLabel={directionLabel} />
      }
      ListFooterComponent={<View style={{ height: Sizing.xl }} />}
    />
  );
};