### Static Bottom Tab Navigator Setup

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Use this method for a straightforward, static configuration of the bottom tab navigator. Import `createNativeBottomTabNavigator` and define screens directly.

```js
import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';

const MyTabs = createNativeBottomTabNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});
```

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

### Tab Bar Label Style Example

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

This example shows how to style the text of a tab bar label. It supports properties like `fontSize`, `fontFamily`, and `fontWeight`. This style will be applied to all labels in the tab bar unless overridden by specific screen options.

```javascript
tabBarLabelStyle: {
  fontSize: 16,
  fontFamily: 'Georgia',
  fontWeight: 300,
}
```

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

### Listen to Transition Start Event

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Adds a listener to the `transitionStart` event to execute code when a screen transition animation begins. This can be used for managing animations or state during transitions.

```javascript
React.useEffect(() => {
  const unsubscribe = navigation.addListener('transitionStart', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);
```

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

### Dynamic Bottom Tab Navigator Setup

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

This dynamic approach allows for more flexibility, especially when tabs are added or removed programmatically. It uses a `Tab.Navigator` and `Tab.Screen` components.

```js
import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';

const Tab = createNativeBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}
```

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

### tabBarBadge Example

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Display a badge with text or a number on the tab icon. The `tabBarBadge` property accepts a string or a number.

```javascript
tabBarBadge: 'New',
// or
tabBarBadge: 3
```

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

### Install Native Bottom Tabs Navigator

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Install the native bottom tabs navigator package using npm or yarn. Ensure your React Native version is 0.79 or above, and react-native-screens is 4.25.0 or above.

```bash
npm install @react-navigation/bottom-tabs
```

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

### tabBarBadgeStyle Example

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Style the badge on the tab icon. On iOS, only `backgroundColor` can be set. On Android, both `backgroundColor` and `color` are supported.

```javascript
tabBarBadgeStyle: {
  backgroundColor: 'yellow',
  color: 'black',
}
```

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

### tabBarStyle Example

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Apply styles to the tab bar. `backgroundColor` is supported on Android and iOS 18 and below. `shadowColor` is only supported on iOS 18 and below. On iOS 26+, the background color is automatically determined by the system and cannot be overridden.

```javascript
tabBarStyle: {
  backgroundColor: 'white',
  shadowColor: '#ccc',
}
```

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

### tabBarControllerMode Example

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Set the display mode for the tab bar on iOS 18 and above. Supported values are `auto`, `tabBar`, and `tabSidebar`. Not supported on tvOS.

```javascript
tabBarControllerMode: 'tabSidebar'
```

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

### tabBarBlurEffect Example

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Apply a blur effect to the tab bar on iOS 18 and lower when a tab screen is selected. Defaults to `systemDefault`. A wide range of blur effect types are supported.

```javascript
tabBarBlurEffect: 'light'
```

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

### Bottom Tab Navigator - Static Usage

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Recommended static way to create a bottom tab navigator by passing an object of screens.

```APIDOC
## Bottom Tab Navigator - Static Usage

### Description
This demonstrates the recommended static approach to creating a bottom tab navigator. You define the screens as an object where keys are screen names and values are the screen components.

### Code
```javascript
import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';

const MyTabs = createNativeBottomTabNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});
```
```

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

### Bottom Tab Navigator - Dynamic Usage

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Dynamic way to create a bottom tab navigator using Tab.Navigator and Tab.Screen components.

```APIDOC
## Bottom Tab Navigator - Dynamic Usage

### Description
This demonstrates the dynamic approach to creating a bottom tab navigator. It involves using the `Tab.Navigator` component and nesting `Tab.Screen` components within it.

### Code
```javascript
import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';

const Tab = createNativeBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}
```
```

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

### tabBarIcon Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Configure the icon to display for each tab. Supports local images, drawable resources, SF Symbols, and dynamic rendering based on focus state or platform.

```APIDOC
## `tabBarIcon`

Icon to display for the tab. It overrides the icon provided by [`tabBarSystemItem`](#tabbarsystemitem) on iOS.

It can be an icon object or a function that given `{ focused: boolean, color: string, size: number }` returns an icon object.

### Local Image

Supported on iOS and Android. Requires icons for multiple screen densities (1x, 2x, 3x) on iOS.

```javascript
tabBarIcon: {
  type: 'image',
  source: require('./path/to/icon.png'),
}
```

Supports [drawable resource](https://developer.android.com/guide/topics/resources/drawable-resource) on Android, [xcasset](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project) on iOS:

```javascript
tabBarIcon: {
  type: 'image',
  source: { uri: 'icon_name' },
}
```

#### `tinted` Property

Controls whether the icon should be tinted with the active/inactive color. Defaults to `true`.

```javascript
tabBarIcon: {
  type: 'image',
  source: require('./path/to/icon.png'),
  tinted: false,
}
```

On Android, the `tinted` property is ignored as the image is always tinted.

### SF Symbols

Supported on iOS.

```javascript
tabBarIcon: {
  type: 'sfSymbol',
  name: 'heart',
}
```

### Dynamic Icons

To render different icons for active and inactive states, use a function. This is only supported on iOS.

```javascript
tabBarIcon: ({ focused }) => {
  return {
    type: 'sfSymbol',
    name: focused ? 'heart' : 'heart-outline',
  };
},
```

On Android, the icon specified for the inactive state will be used for both states.

### Platform-Specific Icons

Use `Platform.select` to provide different icons for different platforms.

```javascript
tabBarIcon: Platform.select({
  ios: {
    type: 'sfSymbol',
    name: 'heart',
  },
  android: {
    type: 'image',
    source: require('./path/to/icon.png'),
  },
});
```
```

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

### App Root Navigation Container

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

This is the root component of the application, setting up the `NavigationContainer` and rendering the `HomeTabs` navigator.

```javascript
export default function App() {
  return (
    <NavigationContainer>
      <HomeTabs />
    </NavigationContainer>
  );
}
```

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

### tabBarStyle Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Apply styles to the tab bar. Supports `backgroundColor` and `shadowColor` with platform-specific limitations.

```APIDOC
## `tabBarStyle`

Style object for the tab bar. Supported properties:

- `backgroundColor` - Only supported on Android and iOS 18 and below.
- `shadowColor` - Only supported on iOS 18 and below.

On iOS 26+, the background color automatically changes based on the content behind the tab bar and can't be overridden.
```

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

### tabBarBadge Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Display a badge with text or a number on the tab icon.

```APIDOC
## `tabBarBadge`

Text to show in a badge on the tab icon. Accepts a `string` or a `number`.
```

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

### Fruits List Screen with Search Functionality

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

This screen displays a list of fruits and implements search functionality. It uses `useState` for the search text and `useEffect` to set up the `headerSearchBarOptions` on the navigation item. The list is filtered based on the search input.

```javascript
function FruitsListScreen() {
  const [searchText, setSearchText] = React.useState('');

  const filteredData = DATA.filter((item) =>
    item.toLowerCase().includes(searchText.toLowerCase())
  );

  const navigation = useNavigation('FruitsList');

  React.useEffect(() => {
    navigation.setOptions({
      headerSearchBarOptions: {
        placeholder: 'Search fruits',
        onChange: (e) => {
          setSearchText(e.nativeEvent.text);
        },
      },
    });
  }, [navigation]);

  return (
    <FlatList
      data={filteredData}
      keyExtractor={(item) => item}
      renderItem={({ item }) => (
        <View
          style={{ padding: 16, borderBottomWidth: 1, borderColor: '#ccc' }}
        >
          <Text>{item}</Text>
        </View>
      )}
    />
  );
}
```

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

### Configure Bottom Tab Navigator with Search Tab

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

This snippet sets up the main bottom tab navigator. It includes a 'Home' tab and a 'Search' tab. The 'Search' tab uses the `SearchStack` navigator defined previously and configures its tab bar item to use the system's search icon on iOS via `tabBarSystemItem: 'search'`. The `tabBarIcon` is platform-specific for the Home tab.

```javascript
const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: Platform.select({
            ios: {
              type: 'sfSymbol',
              name: 'house',
            },
            android: {
              type: 'materialSymbol',
              name: 'home',
            },
          }),
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchStack}
        options={{
          tabBarSystemItem: 'search',
        }}
      />
    </Tab.Navigator>
  );
}
```

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

### tabBarSystemItem Option

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Uses iOS built-in tab bar items with standard styling and localized titles.

```APIDOC
## tabBarSystemItem Option

### Description
This option allows you to use the built-in tab bar items available on iOS, which come with standard styling and localized titles. This can simplify the creation of common tab bar interfaces.

### Supported Values
- `bookmarks`
- `contacts`
- `downloads`
- `favorites`
- `featured`
- `history`
- `more`
- `mostRecent`
- `mostViewed`
- `recents`
- `search`
- `topRated

### Notes
- The `tabBarIcon` and `tabBarLabel` options will override the icon and label provided by the system item.
- To maintain system behavior on iOS while providing custom icons/labels for other platforms, use `Platform.OS` or `Platform.select` to conditionally set `undefined` for `tabBarIcon` and `tabBarLabel` on iOS.

### Special Behavior for 'search' on iOS 26+
When `tabBarSystemItem` is set to `search` on iOS 26+, it has special styling and behavior. The tab bar transforms into a search field if:
- The screen contains a nested native stack navigator.
- The focused screen within that nested navigator has `headerSearchBarOptions` configured.
This behavior will not occur if `headerSearchBarOptions` is set on the tab screen itself.
```

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

### Listen to Transition End Event

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Adds a listener to the `transitionEnd` event to execute code when a screen transition animation completes. Useful for cleanup or state updates after animations finish.

```javascript
React.useEffect(() => {
  const unsubscribe = navigation.addListener('transitionEnd', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);
```

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

### Custom Bottom Accessory View

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Provides a function to render a custom accessory view at the bottom of the screen. The `placement` parameter indicates whether it's for the regular bottom or inline with a collapsed tab bar. Only supported on iOS 26+.

```javascript
bottomAccessory: ({ placement }) => {
  return (
    <View style={{ padding: 16 }}>
      <Text>Placement: {placement}</Text>
    </View>
  );
}
```

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

### tabBarBadgeStyle Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Style the badge on the tab icon. Supports `backgroundColor` and `color`. Platform-specific styling is available.

```APIDOC
## `tabBarBadgeStyle`

Style for the badge on the tab icon. Supported properties:

- `backgroundColor`
- `color`

Platform-specific customization:
- iOS: Only `backgroundColor` is supported.
- Android: Both `backgroundColor` and `color` are supported.

Example:

```javascript
tabBarBadgeStyle: {
  backgroundColor: 'yellow',
  color: 'black',
},
```
```

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

### title Option

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

A fallback title used for headerTitle and tabBarLabel.

```APIDOC
## title Option

### Description
The `title` option serves as a generic fallback for both the `headerTitle` and `tabBarLabel`. If these specific options are not provided, the `title` will be used.

### Usage
This option can be configured within `screenOptions` of `Tab.Navigator` or `options` of `Tab.Screen`.
```

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

### backBehavior Prop

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Controls the behavior of the navigator when the goBack action is triggered.

```APIDOC
## backBehavior Prop

### Description
This prop controls the behavior of the navigator when `goBack` is called, which includes pressing the device's back button or using the back gesture on Android. It determines which screen the navigator navigates to.

### Values
- `firstRoute`: Returns to the first screen defined in the navigator (default).
- `initialRoute`: Returns to the screen specified by the `initialRouteName` prop. If not provided, it defaults to the first screen.
- `order`: Returns to the screen that was defined before the currently focused screen.
- `history`: Returns to the last visited screen in the navigator. Older duplicate entries are dropped.
- `fullHistory`: Returns to the last visited screen in the navigator. Does not drop duplicate entries, mimicking web page behavior.
- `none`: Disables handling of the back button.
```

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

### Jump to a Specific Tab

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Uses the `jumpTo` helper method to navigate to an existing screen within the tab navigator. Requires the route name and optional screen parameters.

```javascript
navigation.jumpTo('Profile', { owner: 'Michaś' });
```

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

### Platform-Specific tabBarIcon

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Provide different icons for iOS and Android using `Platform.select`. This allows for platform-specific image or SF Symbol configurations.

```javascript
tabBarIcon: Platform.select({
  ios: {
    type: 'sfSymbol',
    name: 'heart',
  },
  android: {
    type: 'image',
    source: require('./path/to/icon.png'),
  },
});
```

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

### tabBarActiveTintColor Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Set the color for the icon and label of the active tab.

```APIDOC
## `tabBarActiveTintColor`

Color for the icon and label in the active tab.
```

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

### Implement Search Tab with Header Search Bar

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

This snippet configures a stack navigator to include a screen with a search bar in its header. This is used as a tab in the main bottom tab navigator. The `headerSearchBarOptions` are applied to the screen within the stack.

```javascript
const Stack = createNativeStackNavigator();

function SearchStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="FruitsList"
        component={FruitsListScreen}
        options={{
          title: 'Search',
          headerSearchBarOptions: {
            placeholder: 'Search fruits',
          },
        }}
      />
    </Stack.Navigator>
  );
}
```

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

### Drawable Resource or xcasset tabBarIcon

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Use a drawable resource on Android or an xcasset on iOS by providing the icon name via `uri`. This configuration is supported on iOS and Android.

```javascript
tabBarIcon: {
  type: 'image',
  source: { uri: 'icon_name' },
}
```

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

### Local Image tabBarIcon

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Use a local image for the tab icon. Ensure icons are provided for multiple screen densities (1x, 2x, 3x) as they are not scaled automatically on iOS. This configuration is supported on iOS and Android.

```javascript
tabBarIcon: {
  type: 'image',
  source: require('./path/to/icon.png'),
}
```

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

### tabBarActiveIndicatorEnabled Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Enable or disable the active indicator. Defaults to `true`. Only supported on Android.

```APIDOC
## `tabBarActiveIndicatorEnabled`

Whether the active indicator should be used. Defaults to `true`.

Only supported on Android.
```

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

### Implement Search Tab in Bottom Tab Navigator

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

This snippet shows how to configure a bottom tab navigator with a search tab. It utilizes `createNativeStackNavigator` for the search screen and `createBottomTabNavigator` for the overall tab structure. The `tabBarSystemItem: 'search'` option is used for the search tab icon on iOS.

```javascript
const SearchStack = createNativeStackNavigator({
  screens: {
    FruitsList: {
      screen: FruitsListScreen,
      options: {
        title: 'Search',
        headerSearchBarOptions: {
          placeholder: 'Search fruits',
        },
      },
    },
  },
});

const HomeTabs = createBottomTabNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        tabBarIcon: Platform.select({
          ios: {
            type: 'sfSymbol',
            name: 'house',
          },
          android: {
            type: 'materialSymbol',
            name: 'home',
          },
        }),
      },
    },
    Search: {
      screen: SearchStack,
      options: {
        tabBarSystemItem: 'search',
      },
    },
  },
});

const Navigation = createStaticNavigation(HomeTabs);

export default function App() {
  return <Navigation />;
}
```

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

### tabBarInactiveTintColor Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Set the color for the icon and label of the inactive tabs. Only supported on Android.

```APIDOC
## `tabBarInactiveTintColor`

Color for the icon and label in the inactive tabs.

Only supported on Android.
```

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

### Listen to Tab Press Event

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Adds a listener to the `tabPress` event to perform custom actions when a tab button is pressed. This allows for custom behavior beyond the default focusing or popping to top.

```javascript
React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', (e) => {
    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);
```

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

### Tinted Local Image tabBarIcon

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Control whether the local image icon should be tinted with the active/inactive color. Set `tinted` to `false` if the image has its own colors to preserve on iOS. This property is ignored on Android, where the image is always tinted.

```javascript
tabBarIcon: {
  type: 'image',
  source: require('./path/to/icon.png'),
  tinted: false,
}
```

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

### Dynamic SF Symbols tabBarIcon

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Render different SF Symbols for active and inactive tab states using a function. This dynamic icon selection is only supported on iOS; on Android, the inactive icon is used for both states.

```javascript
tabBarIcon: ({ focused }) => {
  return {
    type: 'sfSymbol',
    name: focused ? 'heart' : 'heart-outline',
  };
}
```

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

### tabBarControllerMode Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Set the display mode for the tab bar. Supported values are `auto`, `tabBar`, and `tabSidebar`. Only supported on iOS 18 and above.

```APIDOC
## `tabBarControllerMode`

The display mode for the tab bar. Supported values:

- `auto` - the system sets the display mode based on the tab’s content
- `tabBar` - the system displays the content only as a tab bar
- `tabSidebar` - the tab bar is displayed as a sidebar

Only supported on iOS 18 and above. Not supported on tvOS.
```

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

### SF Symbols tabBarIcon

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Use SF Symbols for tab icons on iOS. This configuration is only supported on iOS.

```javascript
tabBarIcon: {
  type: 'sfSymbol',
  name: 'heart',
}
```

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

### tabBarRippleColor Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Set the color of the ripple effect when pressing a tab. Only supported on Android.

```APIDOC
## `tabBarRippleColor`

Color of the ripple effect when pressing a tab.

Only supported on Android.
```

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

### tabBarActiveIndicatorColor Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Set the background color of the active indicator. Only supported on Android.

```APIDOC
## `tabBarActiveIndicatorColor`

Background color of the active indicator.

Only supported on Android.
```

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

### tabBarBlurEffect Configuration

Source: https://reactnavigation.org/docs/native-bottom-tab-navigator

Apply a blur effect to the tab bar on iOS 18 and lower. Supports various blur effect types.

```APIDOC
## `tabBarBlurEffect`

Blur effect applied to the tab bar on iOS 18 and lower when tab screen is selected.

Supported values:

- `none` - no blur effect
- `systemDefault` - default blur effect applied by the system
- `extraLight`
- `light`
- `dark`
- `regular`
- `prominent`
- `systemUltraThinMaterial`
- `systemThinMaterial`
- `systemMaterial`
- `systemThickMaterial`
- `systemChromeMaterial`
- `systemUltraThinMaterialLight`
- `systemThinMaterialLight`
- `systemMaterialLight`
- `systemThickMaterialLight`
- `systemChromeMaterialLight`
- `systemUltraThinMaterialDark`
- `systemThinMaterialDark`
- `systemMaterialDark`
- `systemThickMaterialDark`
- `systemChromeMaterialDark`

Defaults to `systemDefault`.

Only supported on iOS 18 and below.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.