Installation

First you have to follow installation instructions of react-native-reanimated v2 and react-native-lottie.

⚠️ Currently only supported react-navigation >=5, If you like, I will support more libraries later.

1npm install react-native-lottie-tabbar
2or
3yarn add react-native-lottie-tabbar

Usage

1import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
2import { NavigationContainer } from '@react-navigation/native';
3import React, { useEffect, useState } from 'react';
4import { View } from 'react-native';
5import LottieTabbar, { TabItem } from 'react-native-lottie-tabbar';
6const BottomTab = createBottomTabNavigator();
7
8export enum RootScreenEnum {
9  RootTab1 = 'home',
10  RootTab2 = 'community',
11  RootTab3 = 'cars',
12  RootTab4 = 'notice',
13}
14
15const getViewStyle = (color: string) => ({
16  flex: 1,
17  backgroundColor: color,
18});
19
20const RootTab1 = () => {
21  return <View style={getViewStyle(`rgba(61, 219, 209, 1)`)} />;
22};
23const RootTab2 = () => {
24  return <View style={getViewStyle(`rgba(0, 99, 247, 1)`)} />;
25};
26const RootTab3 = () => {
27  return <View style={getViewStyle(`rgba(255, 61, 74, 1)`)} />;
28};
29const RootTab4 = () => {
30  return <View style={getViewStyle(`rgba(255, 187, 0, 1)`)} />;
31};
32
33const tabs: TabItem = {
34  [RootScreenEnum.RootTab1]: {
35    title: 'Home',
36    lottieFile: require('./lottie/home.json'),
37    iconSize: 24,
38    textWidth: 30,
39  },
40  [RootScreenEnum.RootTab2]: {
41    title: 'Community',
42    lottieFile: require('./lottie/community.json'),
43    iconSize: 24,
44    textWidth: 60,
45  },
46  [RootScreenEnum.RootTab3]: {
47    title: 'Cars',
48    lottieFile: require('./lottie/car.json'),
49    iconSize: 24,
50    textWidth: 24,
51  },
52  [RootScreenEnum.RootTab4]: {
53    title: 'Message',
54    lottieFile: require('./lottie/notice.json'),
55    iconSize: 24,
56    textWidth: 46,
57    isShowBadge: true,
58    badgeCount: 1,
59  },
60};
61
62const App = () => {
63  return (
64    <NavigationContainer>
65      <BottomTab.Navigator
66        initialRouteName={RootScreenEnum.RootTab1}
67        tabBar={(props) => <LottieTabbar {...props} tabs={tabs} />}
68        screenOptions={{
69          headerShown: false,
70        }}
71      >
72        <BottomTab.Screen name={RootScreenEnum.RootTab1} component={RootTab1} />
73        <BottomTab.Screen name={RootScreenEnum.RootTab2} component={RootTab2} />
74        <BottomTab.Screen name={RootScreenEnum.RootTab3} component={RootTab3} />
75        <BottomTab.Screen name={RootScreenEnum.RootTab4} component={RootTab4} />
76      </BottomTab.Navigator>
77    </NavigationContainer>
78  );
79};
80

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT