Quick start

import { Text, View } from 'react-native';
import { Tabs } from 'react-native-collapsible-fluid-tabs/core';

const posts = Array.from({ length: 30 }, (_, index) => ({
  id: String(index),
  title: 'A little moment, no. ' + (index + 1),
}));

function ProfileHeader() {
  return (
    <View style={{ padding: 24, backgroundColor: '#f3e9dc' }}>
      <Text style={{ fontSize: 30, fontWeight: '600' }}>Hello, fluid.</Text>
      <Text style={{ marginTop: 8 }}>Scroll down. There is more to see.</Text>
    </View>
  );
}

export function ProfileScreen() {
  return (
    <Tabs.Container
      renderHeader={() => <ProfileHeader />}
      containerStyle={{ flex: 1, backgroundColor: '#fff' }}
    >
      <Tabs.Tab name="posts" label="Posts">
        <Tabs.FlatList
          data={posts}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <View style={{ padding: 24, borderBottomWidth: 1, borderColor: '#eee' }}>
              <Text>{item.title}</Text>
            </View>
          )}
        />
      </Tabs.Tab>
      <Tabs.Tab name="about" label="About">
        <Tabs.ScrollView contentContainerStyle={{ padding: 24 }}>
          <Text style={{ fontSize: 22, fontWeight: '600' }}>A little about us.</Text>
          <Text style={{ marginTop: 12 }}>Your story goes here.</Text>
        </Tabs.ScrollView>
      </Tabs.Tab>
    </Tabs.Container>
  );
}