### Start Example App Packager

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. This is necessary to run the example app.

```sh
yarn example start
```

--------------------------------

### Run Example App on Web

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Builds and runs the example app in a web browser.

```sh
yarn example web
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Builds and runs the example app on an iOS simulator or device.

```sh
yarn example ios
```

--------------------------------

### Run Example App on Android

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Builds and runs the example app on an Android device or emulator.

```sh
yarn example android
```

--------------------------------

### Basic Tab View Example

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/README.md

A simple example demonstrating how to set up a basic TabView component with two routes. It uses `useWindowDimensions` for initial layout and manages the tab index state.

```javascript
import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';
import { TabView } from 'reanimated-tab-view';

const FirstRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#ff4081' }} />
);

const SecondRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <FirstRoute />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};

export default function TabViewExample() {
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
    />
  );
}
```

--------------------------------

### Install Reanimated Tab View

Source: https://context7.com/adithyavis/reanimated-tab-view/llms.txt

Install peer dependencies and the library. Wrap your root component with GestureHandlerRootView.

```bash
# Install peer dependencies first
yarn add react-native-reanimated react-native-gesture-handler

# Install the library
yarn add reanimated-tab-view
# or
npm install reanimated-tab-view
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all project dependencies using Yarn workspaces.

```sh
yarn
```

--------------------------------

### Install reanimated-tab-view

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/migration-from-tab-view.md

Remove the old packages and install reanimated-tab-view. Ensure react-native-reanimated and react-native-gesture-handler are also installed.

```bash
yarn remove react-native-tab-view react-native-pager-view
yarn add reanimated-tab-view
```

--------------------------------

### Basic Tab View Example

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/quick-start.md

A minimal example demonstrating the basic usage of Reanimated Tab View, including route definition, scene rendering, and state management.

```tsx
import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';
import { TabView } from 'reanimated-tab-view';

const FirstRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#ff4081' }} />
);

const SecondRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <FirstRoute />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};

export default function TabViewExample() {
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ tabView: { width: layout.width } }}
    />
  );
}
```

--------------------------------

### Install reanimated-tab-view with npm

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/installation.md

Use this command to add the package to your project if you are using npm.

```bash
npm install reanimated-tab-view
```

--------------------------------

### Install reanimated-tab-view with Yarn

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/installation.md

Use this command to add the package to your project if you are using Yarn.

```bash
yarn add reanimated-tab-view
```

--------------------------------

### TabView Migration Example

Source: https://context7.com/adithyavis/reanimated-tab-view/llms.txt

Compares the `TabView` component usage before and after migrating to `reanimated-tab-view`, highlighting the three changed props: `initialLayout`, `lazy`, and `tabBarPosition`/`renderTabBar`.

```tsx
// Before (react-native-tab-view)
import { TabView, TabBar } from 'react-native-tab-view';

<TabView
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  initialLayout={{ width: layout.width }}
  lazy
  tabBarPosition="top"
  renderTabBar={(props) => <TabBar {...props} />}
/>

// After (reanimated-tab-view) — only three props changed
import { TabView, TabBar } from 'reanimated-tab-view';

<TabView
  navigationState={{ index, routes }}   // unchanged
  renderScene={renderScene}              // unchanged
  onIndexChange={setIndex}               // unchanged
  initialLayout={{ tabView: { width: layout.width } }}  // nested under tabView key
  renderMode="lazy"                      // lazy → renderMode="lazy"
  tabBarConfig={{
    tabBarPosition: 'top',
    renderTabBar: (props) => <TabBar {...props} />,
  }}
/>
```

--------------------------------

### Basic Collapsible Header Setup

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/scrollable/collapsible-headers.md

Implement a collapsible header by using the `renderHeader` prop with `RTVScrollView` or `RTVFlatList` inside your scenes. Ensure `initialLayout` is provided to prevent jitter.

```tsx
import { TabView, RTVScrollView } from 'reanimated-tab-view';

function MyTabView() {
  const renderHeader = ({ collapsedPercentage, collapsedHeaderHeight }) => (
    <View style={{ height: 200 }}>
      <Text>Profile Header</Text>
    </View>
  );

  const renderScene = ({ route }) => {
    switch (route.key) {
      case 'posts':
        return (
          <RTVScrollView>
            {/* Your scrollable content */}
          </RTVScrollView>
        );
      default:
        return null;
    }
  };

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderHeader={renderHeader}
      onIndexChange={setIndex}
      initialLayout={{
        tabView: { width: layout.width },
        tabViewHeader: { height: 200 },
      }}
    />
  );
}
```

--------------------------------

### Configuring Initial Layout for TabView

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/scrollable/collapsible-headers.md

Provide `initialLayout` with `tabViewHeader` dimensions to prevent initial layout jitter when the collapsible header is first rendered. This ensures a smooth visual start.

```tsx
<TabView
  initialLayout={{
    tabView: { width: screenWidth },
    tabViewHeader: { width: screenWidth, height: 200 },
  }}
  // ...other props
/>

```

--------------------------------

### TabView Ref Method Example

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/tab-view.md

Access and use ref methods to programmatically control the TabView component. The `jumpTo` method allows switching to a specific tab by its route key, respecting the current `jumpMode` animation.

```tsx
const ref = React.useRef<TabViewMethods>(null);

<TabView ref={ref} /* ...props */ />

// Later:
ref.current?.jumpTo('settings');
```

--------------------------------

### Wrap App with GestureHandlerRootView

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/installation.md

Ensure your application's root component is wrapped with GestureHandlerRootView for gesture handling to work correctly. This is a required setup step.

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content */}
    </GestureHandlerRootView>
  );
}
```

--------------------------------

### Set Render Mode for TabView

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/render-modes.md

Configure the render mode for the TabView component using the 'renderMode' prop. This example shows setting it to 'windowed'.

```tsx
<TabView
  renderMode="windowed"
  // ...other props
/>
```

--------------------------------

### Pass Initial Layout to Eliminate Jitter

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/limitations.md

To avoid layout jitter caused by asynchronous measurement, provide accurate dimensions to the `initialLayout` prop. This ensures the tab view renders with correct sizing from the start.

```tsx
<TabView
  initialLayout={{
    tabView: { width: screenWidth, height: screenHeight },
    tabViewHeader: { width: screenWidth, height: headerHeight },
    tabBar: { width: screenWidth, height: 48 },
  }}
/>
```

--------------------------------

### Custom TabBar Label Text

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/tab-bar.md

Customize the text displayed for each tab label using the getLabelText prop. This example converts the route title to uppercase.

```tsx
<TabBar
  {...props}
  getLabelText={({ route }) => route.title?.toUpperCase()}
/>
```

--------------------------------

### Use RefreshControl with Collapsible Headers

Source: https://context7.com/adithyavis/reanimated-tab-view/llms.txt

Use the `useRefreshControl` hook to get the `progressViewOffset` for a standard `RefreshControl` when using collapsible headers. This hook must be called within a component rendered by `renderScene` in a `TabView`.

```tsx
import { RefreshControl } from 'react-native';
import { RTVFlatList, useRefreshControl } from 'reanimated-tab-view';

const FeedTab = () => {
  const { progressViewOffset } = useRefreshControl();
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    fetchData().then(() => setRefreshing(false));
  }, []);

  return (
    <RTVFlatList
      data={feedItems}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <FeedCard item={item} />}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          progressViewOffset={progressViewOffset} // correctly placed below header + tab bar
          tintColor="#6200ee"
        />
      }
    />
  );
};
```

--------------------------------

### TabView Ref Methods

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/tab-view.md

Demonstrates how to use ref methods to programmatically control the TabView component, specifically the `jumpTo` method.

```APIDOC
## Ref methods

Access ref methods by passing a ref to `TabView`:

```tsx
const ref = React.useRef<TabViewMethods>(null);

<TabView ref={ref} /* ...props */ />

// Later:
ref.current?.jumpTo('settings');
```

### `jumpTo(routeKey: string)`

Programmatically jump to a specific tab by its route key. The animation style follows the current `jumpMode` setting.
```

--------------------------------

### TabView Component Usage

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/tab-view.md

Basic usage of the TabView component, demonstrating how to import and use it with essential props.

```APIDOC
## TabView Component

### Description
The main component for rendering a tab view.

### Import
```tsx
import { TabView } from 'reanimated-tab-view';
```

### Props

`TabView` extends `ViewProps` (excluding `children`) and accepts the following additional props:

#### Required props

- `navigationState` (NavigationState) - The state of the navigation including the current index and routes. `{ index: number; routes: Route[] }`
- `onIndexChange` ((index: number) => void) - Callback fired when the active tab index changes.
- `renderScene` ((props: SceneRendererProps) => ReactNode) - Function that renders the content for each tab.

#### Optional props

- `initialLayout` (object) - Initial layout dimensions to reduce jitter. See below.
- `tabBarConfig` (TabBarConfig) - Configuration for the tab bar. See below.
- `renderHeader` ((props: HeaderRendererProps) => ReactNode) - Renders a collapsible header above the tab bar.
- `renderMode` ('all' | 'windowed' | 'lazy') - Controls how scenes are rendered. Defaults to 'all'.
- `jumpMode` ('smooth' | 'scrolling' | 'no-animation') - Controls the animation when jumping between tabs. Defaults to 'smooth'.
- `swipeEnabled` (boolean) - Enables or disables swipe gestures between tabs. Defaults to `true`.
- `keyboardDismissMode` ('none' | 'on-drag' | 'auto') - How to dismiss the keyboard when swiping. Defaults to 'auto'.
- `animatedRouteIndex` (SharedValue<number>) - A shared value that gets updated with the current animated route index.
- `sceneContainerStyle` (StyleProp<ViewStyle>) - Style for the scene container.
- `tabViewCarouselStyle` (StyleProp<ViewStyle>) - Style for the tab view carousel.
- `sceneContainerGap` (number) - Gap between each scene. Defaults to `0`.
- `style` (StyleProp<ViewStyle>) - Style for the root view.
- `onSwipeStart` (() => void) - Callback when a swipe gesture starts.
- `onSwipeEnd` (() => void) - Callback when a swipe gesture ends.

### initialLayout

Object to provide initial dimensions and reduce layout jitter:

```tsx
initialLayout?: {
  tabView?: Partial<{ width: number; height: number }>;
  tabViewHeader?: Partial<{ width: number; height: number }>;
  tabBar?: Partial<{ width: number; height: number }>;
}
```

## TabBarConfig

Configuration object for the tab bar, passed via the `tabBarConfig` prop:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `tabBarPosition` | `'top' | 'bottom'` | `'top'` | Position of the tab bar. |
| `tabBarType` | `'primary' | 'secondary'` | `'secondary'` | Type of tab bar per Material Design spec. |
| `tabBarScrollEnabled` | `boolean` | `true` | Enables scrollable tab bar. |
| `tabBarDynamicWidthEnabled` | `boolean` | `true` for primary, `false` for secondary | Enables dynamic tab widths based on title length. |
| `scrollableTabWidth` | `number` | `100` | Width of each tab when `tabBarScrollEnabled` is true. |
| `tabBarStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the tab bar container. |
| `tabBarIndicatorStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the tab indicator. |
| `tabStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for individual tabs. |
| `tabLabelStyle` | `StyleProp<TextStyle>` | `undefined` | Style for tab labels. |
| `renderTabBar` | `(props: TabBarProps) => ReactNode` | `undefined` | Custom tab bar renderer. |

```

--------------------------------

### Publish New Versions

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Uses release-it to automate the process of bumping versions, creating tags, and publishing new releases to npm.

```sh
yarn release
```

--------------------------------

### Usage of useRefreshControl with RefreshControl

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/hooks/use-refresh-control.md

Demonstrates how to use the useRefreshControl hook to obtain the progressViewOffset and apply it to a standard React Native RefreshControl within an RTVScrollView. This setup is for custom RefreshControl behavior.

```tsx
import { RefreshControl } from 'react-native';
import { RTVScrollView, useRefreshControl } from 'reanimated-tab-view';

const MyTab = () => {
  const { progressViewOffset } = useRefreshControl();
  const [refreshing, setRefreshing] = React.useState(false);

  return (
    <RTVScrollView
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          progressViewOffset={progressViewOffset}
        />
      }
    >
      {/* content */}
    </RTVScrollView>
  );
};
```

--------------------------------

### Update Initial Layout Prop

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/migration-from-tab-view.md

The `initialLayout` prop now expects an object with specific keys like `tabView` to define layout dimensions.

```diff
  <TabView
-   initialLayout={{ width: layout.width }}
+   initialLayout={{ tabView: { width: layout.width } }}
  />
```

--------------------------------

### Initial Layout for Tab View

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/quick-start.md

Provide the `initialLayout` prop to prevent layout jitter on the initial render of the Tab View. This is especially useful for setting the initial width.

```tsx
<TabView
  initialLayout={{ tabView: { width: layout.width } }}
  // ...other props
/>
```

--------------------------------

### Import RTVFlatList

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/scrollable/rtv-flat-list.md

Import the RTVFlatList component from the 'reanimated-tab-view' library.

```tsx
import { RTVFlatList } from 'reanimated-tab-view';
```

--------------------------------

### Enable Lazy Rendering

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/migration-from-tab-view.md

The `lazy` prop has been replaced by `renderMode="lazy"` for enabling lazy rendering.

```diff
  <TabView
-   lazy
+   renderMode="lazy"
  />
```

--------------------------------

### Run Unit Tests

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest.

```sh
yarn test
```

--------------------------------

### Initial Layout Configuration

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/tab-view.md

Provide initial layout dimensions to the TabView component to minimize jitter during the initial render. This can be applied to the tab view itself, its header, or the tab bar.

```typescript
initialLayout?: {
  tabView?: Partial<{ width: number; height: number }>;
  tabViewHeader?: Partial<{ width: number; height: number }>;
  tabBar?: Partial<{ width: number; height: number }>;
}
```

--------------------------------

### jumpTo Method

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/README.md

Imperative method to navigate to a specific tab.

```APIDOC
## jumpTo Method

### Description
Allows programmatic navigation to a specific tab identified by its route key.

### Method Signature
`jumpTo(routeKey: string)`

### Parameters
- **routeKey** (`string`): The key of the route to jump to.
```

--------------------------------

### Basic TabView Implementation

Source: https://context7.com/adithyavis/reanimated-tab-view/llms.txt

A basic implementation of the TabView component with navigation state, scene rendering, and index change handling.

```tsx
import * as React from 'react';
import { View, Text, useWindowDimensions } from 'react-native';
import { TabView } from 'reanimated-tab-view';

const ProfileTab = () => <View style={{ flex: 1, backgroundColor: '#fff' }}><Text>Profile</Text></View>;
const PostsTab   = () => <View style={{ flex: 1, backgroundColor: '#f5f5f5' }}><Text>Posts</Text></View>;
const TaggedTab  = () => <View style={{ flex: 1, backgroundColor: '#fafafa' }}><Text>Tagged</Text></View>;

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'profile': return <ProfileTab />; 
    case 'posts':   return <PostsTab />;
    case 'tagged':  return <TaggedTab />; 
    default:        return null;
  }
};

export default function App() {
  const { width } = useWindowDimensions();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'profile', title: 'Profile' },
    { key: 'posts',   title: 'Posts'   },
    { key: 'tagged',  title: 'Tagged'  },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ tabView: { width } }}
      swipeEnabled
      keyboardDismissMode="auto"
    />
  );
}
```

--------------------------------

### Lint Project Files

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Checks the code for style and potential errors using ESLint.

```sh
yarn lint
```

--------------------------------

### TabView Render Modes and Jump Animations

Source: https://context7.com/adithyavis/reanimated-tab-view/llms.txt

Configure scene mounting behavior with 'renderMode' (all, windowed, lazy) and animation for tab jumps with 'jumpMode' (smooth, scrolling, no-animation).

```tsx
import { TabView } from 'reanimated-tab-view';

// "all"      → best for 2-4 lightweight tabs, instant switching
// "windowed" → best for many tabs with cheap render cost
// "lazy"     → best for many tabs with expensive render cost

<TabView
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  renderMode="lazy"        // scenes mount on first visit
  jumpMode="smooth"        // prevents blank flash when jumping to unrendered scenes
  initialLayout={{ tabView: { width } }}
/>
```

--------------------------------

### Import RTVRefreshControl

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/scrollable/rtv-refresh-control.md

Import the RTVRefreshControl component from the 'reanimated-tab-view' library.

```tsx
import { RTVRefreshControl } from 'reanimated-tab-view';
```

--------------------------------

### Use Smooth Jump Mode for Tab Navigation

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/common-issues.md

Employ `jumpMode="smooth"` (which is the default) to prevent a blank flash when tapping on tabs that are distant from the current one. This is particularly useful when using lazy rendering modes.

```tsx
<TabView
  renderMode="lazy"
  jumpMode="smooth" // Prevents blank flash
  // ...other props
/>
```

--------------------------------

### Import TabBar Component

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/tab-bar.md

Import the TabBar component from the 'reanimated-tab-view' library.

```tsx
import { TabBar } from 'reanimated-tab-view';
```

--------------------------------

### Wrap App with GestureHandlerRootView

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/common-issues.md

Ensure gestures work correctly by wrapping your app's root component with `GestureHandlerRootView`. This is necessary for gesture handling to function properly.

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app */}
    </GestureHandlerRootView>
  );
}
```

--------------------------------

### Import TabView Component

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/tab-view.md

Import the TabView component from the 'reanimated-tab-view' library.

```tsx
import { TabView } from 'reanimated-tab-view';
```

--------------------------------

### Import useRefreshControl Hook

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/hooks/use-refresh-control.md

Import the useRefreshControl hook from the 'reanimated-tab-view' library.

```tsx
import { useRefreshControl } from 'reanimated-tab-view';
```

--------------------------------

### Typecheck Project Files

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Verifies that all project files adhere to TypeScript type definitions.

```sh
yarn typecheck
```

--------------------------------

### Configure Tab Bar Props

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/migration-from-tab-view.md

Tab bar specific props like `renderTabBar` and `tabBarPosition` are now nested under the `tabBarConfig` object.

```diff
  <TabView
-   renderTabBar={(props) => <TabBar {...props} />}
-   tabBarPosition="top"
+   tabBarConfig={{
+     renderTabBar: (props) => <TabBar {...props} />,
+     tabBarPosition: 'top',
+   }}
  />
```

--------------------------------

### Provide Initial Layout Dimensions

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/common-issues.md

Pass `initialLayout` with known dimensions to prevent layout jitter on initial render. This helps the component render correctly before asynchronous measurements are complete.

```tsx
const layout = useWindowDimensions();

<TabView
  initialLayout={{ 
    tabView: { width: layout.width }, 
    tabViewHeader: { height: 200 }, // your header height
    tabBar: { height: 48 }, 
  }}
  // ...other props
/>
```

--------------------------------

### Using RTVFlatList as a Drop-in Replacement

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/scrollable/scrollable-content.md

Replace standard `FlatList` with `RTVFlatList` for collapsible header synchronization. Accepts all standard `FlatList` props and supports generic typing.

```tsx
import { RTVFlatList } from 'reanimated-tab-view';

const MyTab = () => (
  <RTVFlatList
    data={items}
    renderItem={({ item }) => <ItemCard item={item} />}
    keyExtractor={(item) => item.id}
    numColumns={3}
  />
);
```

```tsx
type Item = { id: string; title: string };

<RTVFlatList<Item>
  data={items}
  renderItem={({ item }) => <Text>{item.title}</Text>}
/>
```

--------------------------------

### Enable Dynamic Tab Widths

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/dynamic-tab-widths.md

Set `tabBarDynamicWidthEnabled` to `true` within `tabBarConfig` to enable dynamic tab widths.

```tsx
<TabView
  tabBarConfig={{
    tabBarDynamicWidthEnabled: true,
  }}
  // ...other props
/>
```

--------------------------------

### Using RTVFlatList for List Content

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/scrollable/collapsible-headers.md

For list-based content, use `RTVFlatList` instead of the standard `FlatList`. This ensures that list scrolling is synchronized with the collapsible header.

```tsx
import { RTVFlatList } from 'reanimated-tab-view';

const PostsTab = () => (
  <RTVFlatList
    data={posts}
    renderItem={({ item }) => <PostCard post={item} />}
    keyExtractor={(item) => item.id}
  />
);

```

--------------------------------

### Import RTVScrollView

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/scrollable/rtv-scroll-view.md

Import the RTVScrollView component from the 'reanimated-tab-view' library.

```tsx
import { RTVScrollView } from 'reanimated-tab-view';
```

--------------------------------

### Import Core Types

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Imports all essential types from the 'reanimated-tab-view' library. Ensure these types are imported before use.

```typescript
import type {
  Route,
  NavigationState,
  Layout,
  SceneRendererProps,
  HeaderRendererProps,
  TabViewProps,
  TabViewMethods,
  TabBarConfig,
  TabBarProps,
  TabContentProps,
  RenderMode,
  JumpMode,
  TabBarType,
  TabBarPosition,
  KeyboardDismissMode,
} from 'reanimated-tab-view';
```

--------------------------------

### TabView Render Mode: 'all'

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/render-modes.md

Use 'all' render mode for a small number of tabs (2-4) with lightweight content. This mode renders all scenes initially, providing instant tab switching at the cost of higher initial render time.

```tsx
<TabView renderMode="all" />
```

--------------------------------

### Handle Tab Events

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/custom-tab-bar.md

Implement `onTabPress` and `onTabLongPress` handlers within `tabBarConfig` to respond to user interactions with individual tabs.

```tsx
<TabView
  tabBarConfig={{
    renderTabBar: (props) => (
      <TabBar
        {...props}
        onTabPress={({ route }) => {
          console.log('Pressed tab:', route.key);
        }}
        onTabLongPress={({ route }) => {
          console.log('Long pressed tab:', route.key);
        }}
      />
    ),
  }}
/>
```

--------------------------------

### Basic RTVFlatList Usage

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/scrollable/rtv-flat-list.md

Use RTVFlatList similarly to React Native's FlatList, providing data, renderItem, and keyExtractor.

```tsx
const ScrollableScene = () => (
  <RTVFlatList
    data={items}
    renderItem={({ item }) => <ItemCard item={item} />}
    keyExtractor={(item) => item.id}
  />
);
```

--------------------------------

### Layout Type

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Defines dimensions for layout calculations, specifying width and height.

```APIDOC
## Layout

Describes width and height dimensions.

```tsx
type Layout = {
  width: number;
  height: number;
};
```
```

--------------------------------

### TabBarConfig Properties

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/README.md

Properties for configuring the tab bar within the Reanimated Tab View.

```APIDOC
## TabBarConfig Properties

### Description
Properties for configuring the tab bar within the Reanimated Tab View.

### Properties

- **tabBarPosition** (string) - Optional - Specifies the position of the tab bar. Allowed values: `'top'|'bottom'`. Default: `'top'`.
- **tabBarType** (string) - Optional - Specifies the type of the tab bar, according to the Material Design spec. Allowed values: `'primary'|'secondary'`. Default: `'secondary'`.
- **tabBarScrollEnabled** (boolean) - Optional - Enables or disables scrollable tab bar. Default: `true`.
- **tabBarDynamicWidthEnabled** (boolean) - Optional - Enables dynamic width for tabs. Default: `true` for primary tab bar, `false` for secondary tab bar.
- **scrollableTabWidth** (number) - Optional - The width of each tab. Applicable ONLY when `tabBarScrollEnabled` is true. Default: `100`.
- **tabBarStyle** (StyleProp<ViewStyle>) - Optional - Used to modify the style for the tab bar. Default: `undefined`.
```

--------------------------------

### Default Dynamic Width Behavior

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/dynamic-tab-widths.md

Primary tab bars enable dynamic widths by default. Explicitly enable them for secondary tab bars if needed.

```tsx
// Dynamic widths are automatically enabled for primary tab bars
<TabView
  tabBarConfig={{
    tabBarType: 'primary',
  }}
/>

// Explicitly enable for secondary tab bars
<TabView
  tabBarConfig={{
    tabBarType: 'secondary',
    tabBarDynamicWidthEnabled: true,
  }}
/>
```

--------------------------------

### TabView with tabBarConfig

Source: https://context7.com/adithyavis/reanimated-tab-view/llms.txt

Configure the tab bar's appearance and behavior using the tabBarConfig prop. This includes setting the position, type, scrollability, dynamic widths, and various style overrides for the tab bar and its elements.

```APIDOC
## TabView — Tab Bar Configuration (`tabBarConfig`)

All tab bar customisation is grouped under `tabBarConfig`. Supports position, type (Material Design primary/secondary), scrollable tabs, dynamic widths, and style overrides.

```tsx
import { TabView } from 'reanimated-tab-view';

<TabView
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  tabBarConfig={{
    tabBarPosition:           'top',        // 'top' | 'bottom'
    tabBarType:               'primary',    // 'primary' | 'secondary'
    tabBarScrollEnabled:      true,
    tabBarDynamicWidthEnabled: true,        // auto-size tabs to label length
    scrollableTabWidth:       120,          // used when dynamic width is off
    tabBarStyle:              { backgroundColor: '#6200ee' },
    tabBarIndicatorStyle:     { backgroundColor: '#fff', height: 3 },
    tabStyle:                 { paddingHorizontal: 12 },
    tabLabelStyle:            { color: '#fff', fontWeight: '600' },
  }}
/>
```
```

--------------------------------

### Route Type

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Describes a single tab route, including its unique key, optional title, and accessibility properties.

```APIDOC
## Route

Describes a single tab route.

```tsx
type Route = {
  key: string;
  title?: string;
  accessible?: boolean;
  accessibilityLabel?: string;
  testID?: string;
};
```
```

--------------------------------

### Use RTVScrollView for Collapsible Headers

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/common-issues.md

Use `RTVScrollView` or `RTVFlatList` instead of standard `ScrollView` or `FlatList` within your scenes to enable collapsible headers. This ensures proper integration with the tab view's scrolling behavior.

```tsx
import { RTVScrollView } from 'reanimated-tab-view';

// Use RTVScrollView instead of ScrollView
const MyTab = () => (
  <RTVScrollView>
    {/* content */}
  </RTVScrollView>
);
```

--------------------------------

### Scene Rendering Function

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/quick-start.md

Implement the `renderScene` function to return the appropriate component for each tab based on its route key. This function is called when a tab needs to be rendered.

```tsx
const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <FirstRoute />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};
```

--------------------------------

### TabContentProps Type

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Props passed to custom tab content renderers, including active percentage and styling options.

```APIDOC
## TabContentProps

Props passed to custom tab content renderers.

```tsx
type TabContentProps = Omit<ViewProps, 'children'> & {
  activePercentage: SharedValue<number>;
  label?: string;
  activeColor?: string;
  inactiveColor?: string;
  labelStyle?: StyleProp<TextStyle>;
};
```
```

--------------------------------

### Configure Tab Bar with tabBarConfig

Source: https://context7.com/adithyavis/reanimated-tab-view/llms.txt

Use `tabBarConfig` to customize tab bar appearance and behavior, such as position, type, scrollability, and dynamic width. Styles can be applied directly to the tab bar and its elements.

```tsx
import { TabView } from 'reanimated-tab-view';

<TabView
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  tabBarConfig={{
    tabBarPosition:           'top',        // 'top' | 'bottom'
    tabBarType:               'primary',    // 'primary' | 'secondary'
    tabBarScrollEnabled:      true,
    tabBarDynamicWidthEnabled: true,        // auto-size tabs to label length
    scrollableTabWidth:       120,          // used when dynamic width is off
    tabBarStyle:              { backgroundColor: '#6200ee' },
    tabBarIndicatorStyle:     { backgroundColor: '#fff', height: 3 },
    tabStyle:                 { paddingHorizontal: 12 },
    tabLabelStyle:            { color: '#fff', fontWeight: '600' },
  }}
/>
```

--------------------------------

### Accessing RTVFlatList Ref

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/scrollable/rtv-flat-list.md

Obtain a ref to the underlying Animated.FlatList component for imperative access.

```tsx
const flatListRef = React.useRef(null);

<RTVFlatList ref={flatListRef} data={items} renderItem={renderItem} />
```

--------------------------------

### Basic TabBar Usage with TabView

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/components/tab-bar.md

Integrate the TabBar component into a TabView by providing a custom renderTabBar implementation. Customize active and inactive tab colors, and the indicator style.

```tsx
<TabView
  tabBarConfig={{
    renderTabBar: (props) => (
      <TabBar
        {...props}
        activeColor="#6200ee"
        inactiveColor="#666"
        indicatorStyle={{ backgroundColor: '#6200ee' }}
      />
    ),
  }}
/>
```

--------------------------------

### TabView Render Mode: 'lazy'

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/render-modes.md

Select 'lazy' render mode for numerous tabs with expensive content. Scenes are rendered only upon navigation, minimizing initial load but potentially introducing a brief loading state on the first visit.

```tsx
<TabView renderMode="lazy" />
```

--------------------------------

### TabView Render Mode: 'windowed'

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/render-modes.md

Employ 'windowed' render mode when you have many tabs with low individual scene render costs. It renders a window of scenes (current + neighbors), ensuring adjacent tabs are ready while unmounting others.

```tsx
<TabView renderMode="windowed" />
```

--------------------------------

### TabView Component Props

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/README.md

This section details the properties that can be passed to the TabView component to configure its state, layout, styling, and behavior.

```APIDOC
## TabView Component Props

This document outlines the properties available for the TabView component, enabling developers to customize its behavior and appearance.

### Props

- **navigationState** ( `{index: number; routes: Route;}` ) - Required - The state of the navigation including the index and routes.
- **initialLayout** ( `{tabView?: Partial<{width: number; height: number;}>, tabViewHeader?: Partial<{width: number; height: number;}>, tabBar?: Partial<{width: number; height: number;}>}` ) - Optional - The initial layout of the tab view, tab bar etc. Default: `undefined`.
- **tabViewCarouselStyle** ( `StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>` ) - Optional - The style for the tab view carousel. Default: `undefined`.
- **sceneContainerStyle** ( `StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>` ) - Optional - The style for the scene container. Default: `undefined`.
- **sceneContainerGap** ( Number ) - Optional - The gap between each scene. Default: `0`.
- **keyboardDismissMode** ( `'auto'|'on-drag'|'none'` ) - Optional - Specifies how to dismiss the keyboard. Default: `'auto'`.
- **animatedRouteIndex** ( `SharedValue<number>` ) - Optional - A callback equivalent. Pass a shared value and its value gets updated when tab view is swiped. Default: `undefined`.
- **swipeEnabled** ( Boolean ) - Optional - Enables or disables swipe gestures. Default: `true`.
- **renderMode** ( `'windowed'|'lazy'|'all'` ) - Optional - Specifies the layout mode of the tab view. Default: `"all"`.
```

--------------------------------

### Implement Custom Tab Bar Component

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/custom-tab-bar.md

Replace the default tab bar entirely by providing a custom component to the `renderTabBar` prop in `tabBarConfig`. This allows for full control over the tab bar's appearance and behavior.

```tsx
import { TabBar } from 'reanimated-tab-view';

<TabView
  tabBarConfig={{
    renderTabBar: (props) => (
      <TabBar
        {...props}
        activeColor="white"
        inactiveColor="gray"
        indicatorStyle={{ backgroundColor: 'white' }}
        style={{ backgroundColor: '#6200ee' }}
      />
    ),
  }}
/>
```

--------------------------------

### Configure Fixed Tab Widths

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/dynamic-tab-widths.md

When dynamic widths are disabled and scrolling is enabled, set `scrollableTabWidth` to define a fixed width for each tab. The default is 100px.

```tsx
<TabView
  tabBarConfig={{
    tabBarScrollEnabled: true,
    tabBarDynamicWidthEnabled: false,
    scrollableTabWidth: 120, // Each tab will be 120px wide
  }}
/>
```

--------------------------------

### TabViewMethods Type

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Defines the methods available on the TabView component instance when accessed via a ref, such as `jumpTo`.

```APIDOC
## TabViewMethods

Methods available via the `TabView` ref.

```tsx
type TabViewMethods = {
  jumpTo: (routeKey: string) => void;
};
```
```

--------------------------------

### Set Tab Bar Position

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/custom-tab-bar.md

Configure the tab bar to appear at the top or bottom of the screen using the `tabBarPosition` property within `tabBarConfig`.

```tsx
<TabView
  tabBarConfig={{
    tabBarPosition: 'bottom',
  }}
/>
```

--------------------------------

### RenderMode Enum

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Defines the rendering mode for tabs, options include 'all', 'windowed', and 'lazy'.

```APIDOC
### RenderMode

```tsx
type RenderMode = 'all' | 'windowed' | 'lazy';
```
```

--------------------------------

### Reanimated Tab View Props

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/README.md

Configuration options for the Reanimated Tab View component.

```APIDOC
## Reanimated Tab View Props

### Description
Configuration options for the Reanimated Tab View component.

### Props

- **jumpMode** (string) - Optional - Specifies the jump mode of the tab view. Allowed values: `'smooth'|'scrolling'|'no-animation'`. Default: `'smooth'`.
- **tabBarConfig** (object) - Optional - Configuration for the tab bar. For details, see `TabBarConfig` below. Default: `undefined`.
- **TabViewHeaderComponent** (React.ReactNode) - Optional - A component to render as the tab view header. Default: `undefined`.
- **renderScene** (function) - Optional - A function that renders the scene for a given route. Use `RTVScrollView` or `RTVFlatList` in order to render collapsible headers through the `renderHeader` prop. Signature: `(props: HeaderRendererProps) => React.ReactNode`. Default: `undefined`.
- **renderHeader** (function) - Optional - A function that renders the header for the tab view. Signature: `(props: SceneRendererProps) => React.ReactNode`. Default: `undefined`.
- **onIndexChange** (function) - Required - A function that is called when the index changes. Signature: `(index:number) => void`.
- **onSwipeEnd** (function) - Optional - Callback function for when a swipe gesture ends. Default: `undefined`.
- **onSwipeStart** (function) - Optional - Callback function for when a swipe gesture starts. Default: `undefined`.
```

--------------------------------

### useRefreshControl

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/hooks/use-refresh-control.md

Returns the `progressViewOffset` value required for the `RefreshControl` to display correctly in a collapsible header scenario. This hook must be used within a component rendered inside a `TabView`.

```APIDOC
## useRefreshControl

### Description
A hook that returns the correct `progressViewOffset` for use with a standard `RefreshControl` inside a collapsible header tab view.

### Return Value
- `progressViewOffset` (number): The offset needed for the refresh indicator to appear below the header and tab bar.

### Usage Example
```tsx
import { RefreshControl } from 'react-native';
import { RTVScrollView, useRefreshControl } from 'reanimated-tab-view';

const MyTab = () => {
  const { progressViewOffset } = useRefreshControl();
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    // Fetch data and then setRefreshing(false)
  }, []);

  return (
    <RTVScrollView
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          progressViewOffset={progressViewOffset}
        />
      }
    >
      {/* content */}
    </RTVScrollView>
  );
};
```

### When to use
- Use this hook when you need custom `RefreshControl` behavior but still need the correct offset for collapsible headers.
- If you don't need customization, use [`RTVRefreshControl`](/docs/api/components/scrollable/rtv-refresh-control) instead, which handles this automatically.

### Context Requirement
This hook must be called within a component rendered inside a `TabView` (as part of `renderScene`), as it reads header and tab bar dimensions from the internal context.
```

--------------------------------

### Configure Keyboard Dismiss Mode

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/common-issues.md

Set the `keyboardDismissMode` prop to `'on-drag'` to automatically dismiss the keyboard when swiping between tabs. This prevents the keyboard from obstructing content during navigation.

```tsx
<TabView
  keyboardDismissMode="on-drag" // Dismiss keyboard when swiping
  // ...other props
/>
```

--------------------------------

### Layout Type Definition

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Defines the dimensions for layout calculations. Use this type to specify width and height.

```typescript
type Layout = {
  width: number;
  height: number;
};
```

--------------------------------

### Customize Individual Tab Content

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/custom-tab-bar.md

Use the `renderTabContent` prop within `tabBarConfig` to customize the rendering of each individual tab label. This allows for complex UI elements within each tab.

```tsx
<TabView
  tabBarConfig={{
    renderTabBar: (props) => (
      <TabBar
        {...props}
        renderTabContent={({ route, activePercentage, label }) => {
          // Return your custom tab content
          return (
            <View style={styles.tab}>
              <Icon name={route.key} />
              <Text>{label}</Text>
            </View>
          );
        }}
      />
    ),
  }}
/>
```

--------------------------------

### Integrate FlatList with Collapsible Header

Source: https://context7.com/adithyavis/reanimated-tab-view/llms.txt

Use `RTVFlatList` as a drop-in replacement for React Native's `FlatList` to integrate with collapsible headers. It supports generic typing and all standard `FlatList` props.

```tsx
import { RTVFlatList } from 'reanimated-tab-view';

type Photo = { id: string; uri: string };

const PhotosTab = ({ photos }: { photos: Photo[] }) => {
  const flatListRef = React.useRef(null);

  return (
    <RTVFlatList<Photo>
      ref={flatListRef}
      data={photos}
      keyExtractor={(item) => item.id}
      numColumns={3}
      renderItem={({ item }) => (
        <Image source={{ uri: item.uri }} style={{ width: 120, height: 120 }} />
      )}
      onEndReached={() => console.log('load more')}
      onEndReachedThreshold={0.5}
    />
  );
};

```

--------------------------------

### Using RTVScrollView as a Drop-in Replacement

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/guides/scrollable/scrollable-content.md

Replace standard `ScrollView` with `RTVScrollView` for collapsible header synchronization. Accepts all standard `ScrollView` props.

```tsx
import { RTVScrollView } from 'reanimated-tab-view';

const MyTab = () => (
  <RTVScrollView>
    <View style={{ padding: 16 }}>
      <Text>Scrollable content here</Text>
    </View>
  </RTVScrollView>
);
```

--------------------------------

### Tab View Props

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/README.md

These are the configurable props for the Reanimated Tab View component.

```APIDOC
## Tab View Props

### Description
Configuration options for styling and behavior of the tab view.

### Props
- **tabStyle** (`StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>`): Used to modify the style for each tab.
- **tabBarIndicatorStyle** (`StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>`): Used to modify the style for the tab bar indicator.
- **renderTabBar** (`Function`): Custom method to render the tab bar.
```

--------------------------------

### TabBarConfig Type

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Configuration object for the tab bar, passed via the `tabBarConfig` prop. Refer to the TabView API for details.

```APIDOC
## TabBarConfig

Configuration for the tab bar passed via `tabBarConfig`. See [TabView API](/docs/api/components/tab-view#tabbarconfig) for details.
```

--------------------------------

### NavigationState Type

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Represents the state object passed to the TabView component, containing the current index and an array of routes.

```APIDOC
## NavigationState

The state object passed to `TabView` via the `navigationState` prop.

```tsx
type NavigationState = {
  index: number;
  routes: Route[];
};
```
```

--------------------------------

### Update TabView and TabBar imports

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/troubleshooting/migration-from-tab-view.md

Change the import path for TabView and TabBar components from 'react-native-tab-view' to 'reanimated-tab-view'.

```diff
- import { TabView, TabBar } from 'react-native-tab-view';
+ import { TabView, TabBar } from 'reanimated-tab-view';
```

--------------------------------

### TabViewMethods Type Definition

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Defines the methods available on the TabView component instance via a ref. Allows programmatic navigation.

```typescript
type TabViewMethods = {
  jumpTo: (routeKey: string) => void;
};
```

--------------------------------

### TabContentProps Type Definition

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Props for custom tab content renderers. Extends ViewProps and includes active percentage and styling for labels.

```typescript
type TabContentProps = Omit<ViewProps, 'children'> & {
  activePercentage: SharedValue<number>;
  label?: string;
  activeColor?: string;
  inactiveColor?: string;
  labelStyle?: StyleProp<TextStyle>;
};
```

--------------------------------

### Fix Linting Errors

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/CONTRIBUTING.md

Automatically fixes formatting and style errors detected by ESLint.

```sh
yarn lint --fix
```

--------------------------------

### Route Type Definition

Source: https://github.com/adithyavis/reanimated-tab-view/blob/main/docs/docs/api/types.md

Defines the structure for a single tab route. Each route requires a unique 'key' and can optionally include a 'title' and accessibility properties.

```typescript
type Route = {
  key: string;
  title?: string;
  accessible?: boolean;
  accessibilityLabel?: string;
  testID?: string;
};
```