A collection of simple animated floating bottom tabs for React Native. Supports React Navigation and Expo Router
MIT License
A collection of simple animated floating bottom tabs for React Native. Supports React Navigation and Expo Router
Note: This is a beta release and may contain bugs. A report and a fix for any bugs found will be highly appreciated.
See the demo of the components here => Demo
0.72
and above | React Native
51
and above | Expo SDK
npm install react-native-floating-tab
import { ExpandBarTab, RollingBallTab, SharpCurvyTab, SlideBarTab, ElevatedTab } from "react-native-floating-tab";
export default function TabLayout() {
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
headerShown: false,
}}
initialRouteName="index"
backBehavior="history"
tabBar={props => <ExpandBarTab {...props} />}
// tabBar={props => <RollingBallTab {...props} />}
// tabBar={props => <SharpCurvyTab {...props} />}
// tabBar={props => <SlideBarTab {...props} />}
// tabBar={props => <ElevatedTab {...props} />}
>
<Tabs.Screen
name="calendar"
options={{
title: "Calendar",
tabBarIcon: ({ focused, color, size }) => (
<Ionicons
name={focused ? "calendar" : "calendar-outline"}
size={size}
color={color}
/>
),
}}
/>
{/* Add more screens here */}
</Tabs>
)
}
To run the example, clone the repository and run the following commands. Make sure your project environment is set up properly.
cd example
npm install
# For Android
npm run android
# For iOS
npm run ios
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. I'm still working on improving the library and adding more features. Any contributions you make are greatly appreciated.
Note: A detailed Contributing guide will be added soon.
To run the project locally, clone the repository and run the following commands. Make sure your project environment is set up properly.
npm install
npm run build # I haven't add any test yet. So, just build the project
After successful build, you can locally package the library and use it in your project.
npm pack
This will create a .tgz
file in the root directory. You can use this file in your project by moving it to the example directory and running npm install <package.tgz>
.
Then, run the example project as mentioned above.
See the LICENSE file for license rights and limitations (MIT).
Built with by Moeen Mahmud