CODEWITHSUNDEEP
react-native
Sean Liu
Sean Liu

Reputation: 1783

How to use react-native-animated-tabbar library in react native

I am trying to learn how to use this library. https://github.com/gorhom/react-native-animated-tabbar

In the Usage section I am following Standalone Component AnimatedTabBarView, Here is what i did after follow the usage section. The sample code seem to use typescript, in my app I did not use typescript, so I modify const tabs line, this might cause an issue. My main purpose is just to try to have a tab bar display on the screen.

import React, { useEffect, useState } from "react";
import { StyleSheet, View, ScrollView, Text } from "react-native";
import AnimatedTabBar, {
  TabsConfig,
  AnimatedTabBarView,
  BubbleTabBarItemConfig,
} from "@gorhom/animated-tabbar";

import { AntDesign } from "@expo/vector-icons";

const tabs = {
  Home: {
    labelStyle: {
      color: "#5B37B7",
    },
    icon: {
      component: AntDesign,
      activeColor: "rgba(91,55,183,1)",
      inactiveColor: "rgba(0,0,0,1)",
    },
    background: {
      activeColor: "rgba(223,215,243,1)",
      inactiveColor: "rgba(223,215,243,0)",
    },
  },
  Profile: {
    labelStyle: {
      color: "#1194AA",
    },
    icon: {
      component: AntDesign,
      activeColor: "rgba(17,148,170,1)",
      inactiveColor: "rgba(0,0,0,1)",
    },
    background: {
      activeColor: "rgba(207,235,239,1)",
      inactiveColor: "rgba(207,235,239,0)",
    },
  },
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#999",
  },
  tabBarContainer: {
    borderRadius: 25,
  },
});
const test = () => {
  const [index, setIndex] = useState(0);
  return (
    <View style={styles.container}>
      <Text>{index}</Text>
      <AnimatedTabBarView
        tabs={tabs}
        itemOuterSpace={{
          horizontal: 6,
          vertical: 12,
        }}
        itemInnerSpace={12}
        iconSize={20}
        style={styles.tabBarContainer}
        index={index}
        onIndexChange={setIndex}
      />
    </View>
  );
};

export default test;

Here is the error code I got: enter image description here

Thanks for any help!

Upvotes: 0

Views: 547

Answers (1)

Akshay Adiga
Akshay Adiga

Reputation: 21

Icon component is wrong. You can check this example.

https://github.com/gorhom/react-native-animated-tabbar/blob/master/example/src/screens/bubble/Bubble.tsx

To use react-native-vector-icons, try something like this in component

icon: {
      component: () => <FeatherIcon name="user" size={20} />,
      activeColor: 'rgba(91,55,183,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    }

Upvotes: 1

Related Questions