i can't customize tab-bar wirh apperance

[Rootstar07]

import { NavigationContainer } from "@react-navigation/native";
import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
import { Text, View } from "react-native";
import React from "react";

const Tabs = AnimatedTabBarNavigator();

function home() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text> Home Screen </Text>
    </View>
  );
}

function friend() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text> firend Screen </Text>
    </View>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Tabs.Navigator
        tabBarOptions={{
          activeTintColor: "black",
          inactiveTintColor: "black",
          tabBarBackGround: "",
        }}
        apperance={{
          horizontalPadding: 10,
          tabBarBackground: "black",
          floating: true,
          dotCornerRadius: 100,
          whenActiveShow: "both",
          whenInactiveShow: "label-only",
          shadow: false,
          dotSize: 100,
          tabButtonLayout: "horizontal",
        }}
      >
        <Tabs.Screen name="Home" component={home} />
        <Tabs.Screen name="Friend" component={friend} />
      </Tabs.Navigator>
    </NavigationContainer>
  );
};

export default App;

i am using expo and just made a simple example
The custom doesn't work for some reason.
I think I did something wrong because I'm not used to navigation. Can you help me?

[Rootstar07]

It's good to try another file. I think it's a collision with another module or my mistake.

[obie3]

the props is 'appearence' and not 'apperance'.

apperance={{
horizontalPadding: 10,
tabBarBackground: "black",
floating: true,
dotCornerRadius: 100,
whenActiveShow: "both",
whenInactiveShow: "label-only",
shadow: false,
dotSize: 100,
tabButtonLayout: "horizontal",
}}

becomes

appearence={{
horizontalPadding: 10,
tabBarBackground: "black",
floating: true,
dotCornerRadius: 100,
whenActiveShow: "both",
whenInactiveShow: "label-only",
shadow: false,
dotSize: 100,
tabButtonLayout: "horizontal",
}}