curved-navigation-bar v1.0.2

Hight performance animated bottom navigation bar for both Android and IOS 😎.

Table of Contents

1. Installation
2. Usage
3. Props
4. Credits
5. License

Installation

yarn add curved-navigation-bar
# or
npm install curved-navigation-bar

Also, you need to install react-native-reanimated, react-native-gesture-handler & react-native-svg, and follow theirs installation instructions.

Usage

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar, {TabsConfigsType} from '@hngocl/curved-navigation-bar';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const tabs: TabsConfigsType = {
    Home: {
        icon: ({ progress }) => /* ICON COMPONENT */
    },
    Profile: {
        icon: ({ progress }) => /* ICON COMPONENT */
    },
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
  <SafeAreaProvider>
    <NavigationContainer>
      <Tab.Navigator
        tabBar={props => (
          <AnimatedTabBar tabs={tabs} {...props} />
        )}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  </SafeAreaProvider>
  )
}

import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import AnimatedTabBar, {TabsConfigsType} from '@hngocl/curved-navigation-bar';

const tabs: TabsConfigsType = {
    Home: {
        icon: ({ progress }) => /* ICON COMPONENT */
    },
    Profile: {
        icon: ({ progress }) => /* ICON COMPONENT */
    },
}

const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  {
    tabBarComponent: props => <AnimatedTabBar tabs={tabs} {...props} />,
  },
);

const AppContainer = createAppContainer(TabNavigator);

export default () => (
  <SafeAreaProvider>
    <AppContainer />
  </SafeAreaProvider>
);

Animated Icon

In order to animate the tab icon color, you will need to use the provded prop color that will be provided to the icon.

This example below should explain it better:

import React from 'react';
import Animated from 'react-native-reanimated';


interface AnimatedIconProps {
  progress: Animated.Node<number>; // Reanimated - 0 is not Active, 1 is Active
}

const AnimatedIcon = ({ progress }: AnimatedIconProps) => {
  return (
   /* DO SOME THING */
  );
};

export default AnimatedIcon;

Props

TabConfigsType

Built With

• react-native-reanimated
• react-native-gesture-handler
• react-native-redash
• react-native-svg
• react-navigation

License

MIT