Function App

example/src/App.tsx:11–56

()

const { width: screenWidth } = Dimensions.get('window');

export default function App() {
  const tabs = useMemo(() => tabData, []);
  const flatListRef = useRef<FlatList>(null);

  const onTabChange = useCallback((_item: TabsType, index: number) => {
    flatListRef.current?.scrollToIndex({
      animated: true,
      index: index,
    });
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        ref={flatListRef}
        data={tabs}
        keyExtractor={(item) => item.name}
        renderItem={({ item }: { item: TabsDataType }) => {
          return (
            <View
              style={[
                styles.slide,
                {
                  backgroundColor: item.activeTintColor,
                },
              ]}
            >
              <Text style={styles.titleText}>{item.name}</Text>
            </View>
          );
        }}
        scrollEnabled={false}
        horizontal
        bounces={false}
        pagingEnabled
        showsHorizontalScrollIndicator={false}
      />
      <TabBar
        tabs={tabs as Array<TabsType>}
        onTabChange={onTabChange}
        containerWidth={screenWidth - 30}
        containerBottomSpace={30}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },