A lightweight and customizable tab navigation component for React Native, built with full Expo support. Perfect for creating beautiful tabbed interfaces, modals, action sheets, and more — with smooth animations and flexible styling.
-
⚡ Built for Expo & React Native
-
🎯 Smooth animations
-
💅 Fully customizable tabs and styling
-
🧩 Icon support for each tab
📐 Dynamic width ratio support
🔄 More exciting features are on the way!
🛠️ Planned updates include new enhancements and improved performance.
. If you encounter an error, stop the Terminal and run the project again.
- 🌐 Portfolio Website
- 💻 GitHub
npm install react-native-beauty-tabs
# or
yarn add react-native-beauty-tabsimport React from "react";
import { View, Text } from "react-native";
import { AntDesign } from "@expo/vector-icons";
import { NativeTabs } from "react-native-beauty-tabs";
const Example = () => {
return (
<View style={{ backgroundColor: "" }}>
<NativeTabs
ContainerStyle={{
backgroundColor: "#f5f5f5",
flexDirection: "column",
gap: 20,
marginTop: 20,
alignSelf: "center",
}}
Tabcontainer={{ alignSelf: "center" }}
IndicatorStyle={{
backgroundColor: "white",
borderRadius: 25,
}}
TabTextStyle={{ fontWeight: "400" }}
ActiveTextColors={"#E75480"}
InActiveTextColors="white"
TabsRowStyle={{
borderRadius: 40,
backgroundColor: "#E75480",
elevation: 10,
shadowColor: "black",
}}
PageContentStyle={{
alignItems: "center",
justifyContent: "center",
padding: 10,
}}
TabContentStyle={{ flexDirection: "row", alignItems: "center", gap: 5 }}
widthRatio={0.8}
Tabs={[
{
label: "Home",
Icons: <AntDesign name="home" size={15} color="black" />,
Content: (
<View>
<Text>Your Content</Text>
</View>
),
},
{
label: "Calendar",
Icons: <AntDesign name="calendar" size={15} color="black" />,
Content: (
<View>
<Text>Your Content</Text>
</View>
),
},
{
label: "Cart",
Icons: <AntDesign name="shoppingcart" size={15} color="black" />,
Content: (
<View>
<Text>Your Content</Text>
</View>
),
},
{
label: "Profile",
Icons: <AntDesign name="user" size={15} color="black" />,
Content: (
<View>
<Text>Your Content</Text>
</View>
),
},
]}
/>
</View>
);
};
export default Example;| Prop | Type | Default | Description |
|---|---|---|---|
Tabs |
Tab[] |
[] |
Array of tab objects (label, Icons, Content) |
ContainerStyle |
ViewStyle |
null |
Style for the main container |
Tabcontainer |
ViewStyle |
null |
Style for the tab wrapper container |
TabsRowStyle |
ViewStyle |
null |
Style for the row of tabs |
IndicatorStyle |
ViewStyle |
null |
Style for the active tab indicator |
TabTextStyle |
TextStyle |
null |
Style applied to each tab label text |
ActiveTextColors |
string |
"#fff" |
Text color for the active tab |
InActiveTextColors |
string |
"#007aff" |
Text color for inactive tabs |
TabContentStyle |
ViewStyle |
null |
Style for each tab's icon + label container |
PageContentStyle |
ViewStyle |
null |
Style for the tab content wrapper |
widthRatio |
number |
0.9 |
Width ratio of the whole tab layout (0–1, relative to screen width) |