https://github.com/alantoa/react-native-lottie-tabbar

✨ A lottie animation tab bar written in react-native-reanimated v2.
https://github.com/alantoa/react-native-lottie-tabbar

Last synced: 8 days ago
JSON representation

✨ A lottie animation tab bar written in react-native-reanimated v2.

• Host: GitHub
• URL: https://github.com/alantoa/react-native-lottie-tabbar
• Owner: alantoa
• License: mit
• Created: 2022-02-16T11:17:17.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-12-23T09:51:58.000Z (about 1 month ago)
• Last Synced: 2025-01-14T20:11:58.783Z (9 days ago)
• Language: TypeScript
• Homepage:
• Size: 1.06 MB
• Stars: 48
• Watchers: 4
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
React Native Lottie Tabbar

  
A lottie animation tab bar written in react-native-reanimated v2.





  

  
 



## Installation

First you have to follow installation instructions of [react-native-reanimated v2](https://docs.swmansion.com/react-native-reanimated/) and [react-native-lottie](https://github.com/lottie-react-native/lottie-react-native).

⚠️ Currently only supported `react-navigation >=5`.

```sh

npm install react-native-lottie-tabbar

or

yarn add react-native-lottie-tabbar

```

## Usage

```tsx

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { NavigationContainer } from '@react-navigation/native';

import React, { useEffect, useState } from 'react';

import { View } from 'react-native';

import LottieTabbar, { TabItem } from 'react-native-lottie-tabbar';

const BottomTab = createBottomTabNavigator();

export enum RootScreenEnum {

  RootTab1 = 'home',

  RootTab2 = 'community',

  RootTab3 = 'cars',

  RootTab4 = 'notice',

}

const getViewStyle = (color: string) => ({

  flex: 1,

  backgroundColor: color,

});

const RootTab1 = () => {

  return ;

};

const RootTab2 = () => {

  return ;

};

const RootTab3 = () => {

  return ;

};

const RootTab4 = () => {

  return ;

};

const tabs: TabItem = {

  [RootScreenEnum.RootTab1]: {

    title: 'Home',

    lottieFile: require('./lottie/home.json'),

    iconSize: 24,

    textWidth: 30,

  },

  [RootScreenEnum.RootTab2]: {

    title: 'Community',

    lottieFile: require('./lottie/community.json'),

    iconSize: 24,

    textWidth: 60,

  },

  [RootScreenEnum.RootTab3]: {

    title: 'Cars',

    lottieFile: require('./lottie/car.json'),

    iconSize: 24,

    textWidth: 24,

  },

  [RootScreenEnum.RootTab4]: {

    title: 'Message',

    lottieFile: require('./lottie/notice.json'),

    iconSize: 24,

    textWidth: 46,

    isShowBadge: true,

    badgeCount: 1,

  },

};

const App = () => {

  return (

    

       }

        screenOptions={{

          headerShown: false,

        }}

      >

        

        

        

        

      

    

  );

};

```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT