react-native-animated-nav-tab-bar

To use the component, import AnimatedTabBarNavigator and use it to create a navigator instance. This instance follows the React Navigation pattern, providing a .Navigator component and .Screen components.

import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";

const Tabs = AnimatedTabBarNavigator();

export default () => (
  <Tabs.Navigator
    tabBarOptions={{
      activeTintColor: "#2F7C6E",
      inactiveTintColor: "#222222"
    }}
  >
    <Tabs.Screen name="Home" component={Home} />
    {/* Add other screens here */}
  </Tabs.Navigator>
);

To run the application on an iOS simulator, ensure Metro is running in a separate terminal, then execute the following command from the project root.

# using npm
npm run ios

# OR using Yarn
yarn ios

Before running the application, you must start Metro, the JavaScript bundler that ships with React Native. Run this command from the root of your project.

# using npm
npm start

# OR using Yarn
yarn start

Install the package using either npm or yarn.

Prerequisites:

• React Navigation v6
• styled-components

# Using yarn
yarn add react-native-animated-nav-tab-bar

# Using npm
npm install react-native-animated-nav-tab-bar

To run the application on an Android emulator or device, ensure Metro is running in a separate terminal, then execute the following command from the project root.

# using npm
npm run android

# OR using Yarn
yarn android

Padding issues with tabStyle

If paddingTop in your tabStyle object is not reflecting correctly, you must also provide the same value for the topPadding property within the appearance prop. This is because the active background/dot uses absolute positioning and is not affected by the parent's padding.

Appearance prop not applying

Ensure you are using the correct spelling: appearance. Older versions (pre-3.1.3) had a typo (appearence).

You can add icons to your tabs by using the tabBarIcon option on a Tabs.Screen. It is recommended to use react-native-vector-icons for this purpose.

import Icon from 'react-native-vector-icons/Feather';

// Inside your Tabs.Navigator
<Tabs.Screen
  name="Home"
  component={Home}
  options={{
    tabBarIcon: ({ focused, color, size }) => (
        <Icon
            name="Home"
            size={size ? size : 24}
            color={focused ? color : "#222222"}
            focused={focused}
            color={color}
        />
    )
  }}
/>

The tabBarOptions prop is passed directly to React Navigation and allows you to control basic styling for the tab items.

tabBarOptions: {
  "activeTintColor": "Label and icon color of the active tab item.",
  "inactiveTintColor": "Label and icon color of the inactive tab item.",
  "activeBackgroundColor": "Background color of the active tab item.",
  "tabStyle": "Style object for the tab wrapper (overrides appearance props).",
  "labelStyle": "Style object for the tab label text."
}

The library exports several types to control the visual appearance and layout of the tab bar elements:

• IAppearanceOptions: Configuration object for the visual style of the tab bar.
• TabButtonLayout: Defines the layout structure of the individual tab buttons.
• TabElementDisplayOptions: Controls how tab elements are displayed.
• DotSize: Defines the size of the indicator dots.

import {
  IAppearanceOptions,
  TabButtonLayout,
  TabElementDisplayOptions,
  DotSize
} from 'react-native-animated-nav-tab-bar';

The DotSize enum allows you to set the size of the indicator dot.

import { DotSize } from 'react-native-animated-nav-tab-bar';

const dotSize = DotSize.MEDIUM;