{"id":17350315,"url":"https://github.com/moeen-mahmud/react-native-floating-tab","last_synced_at":"2025-10-31T00:49:28.506Z","repository":{"id":257812582,"uuid":"867574168","full_name":"moeen-mahmud/react-native-floating-tab","owner":"moeen-mahmud","description":"A collection of simple animated floating bottom tabs for React Native. Supports React Navigation and Expo Router","archived":false,"fork":false,"pushed_at":"2024-10-10T14:23:19.000Z","size":12999,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-21T09:07:09.420Z","etag":null,"topics":["expo","expo-module","expo-router","react","react-native","react-native-reanimated","react-native-svg","react-navigation","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-floating-tab","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moeen-mahmud.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-04T10:18:06.000Z","updated_at":"2025-08-29T16:22:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"8676f042-e2d0-4810-a887-6161a30024c7","html_url":"https://github.com/moeen-mahmud/react-native-floating-tab","commit_stats":null,"previous_names":["moeen-mahmud/react-native-floating-tab"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/moeen-mahmud/react-native-floating-tab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moeen-mahmud%2Freact-native-floating-tab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moeen-mahmud%2Freact-native-floating-tab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moeen-mahmud%2Freact-native-floating-tab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moeen-mahmud%2Freact-native-floating-tab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moeen-mahmud","download_url":"https://codeload.github.com/moeen-mahmud/react-native-floating-tab/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moeen-mahmud%2Freact-native-floating-tab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281908614,"owners_count":26582147,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-30T02:00:06.501Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","expo-module","expo-router","react","react-native","react-native-reanimated","react-native-svg","react-navigation","typescript"],"created_at":"2024-10-15T17:06:30.031Z","updated_at":"2025-10-31T00:49:28.475Z","avatar_url":"https://github.com/moeen-mahmud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-floating-tab\n\nA collection of simple animated floating bottom tabs for React Native. Supports React Navigation and Expo Router\n\n\u003e **Note:** This is a beta release and may contain bugs. A report and a fix for any bugs found will be highly appreciated.\n\n## Demo\n\nSee the demo of the components here =\u003e [Demo](https://imgur.com/a/3S9maUi)\n\n## Requirements\n\n- React Native `0.72` and above | [React Native](https://reactnative.dev/)\n- Expo SDK `51` and above | [Expo SDK](https://docs.expo.dev/)\n- React Navigation or Expo Router | [React Navigation](https://reactnavigation.org/) | [Expo Router](https://docs.expo.dev/router/introduction/)\n- React Native Reanimated (by default included in Expo) | [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)\n- React Native SVG | [React Native SVG](https://github.com/software-mansion/react-native-svg)\n\n## Installation\n\n```bash\nnpm install react-native-floating-tab\n\n```\n\n## Usage\n\n```jsx\nimport { ExpandBarTab, RollingBallTab, SharpCurvyTab, SlideBarTab, ElevatedTab } from \"react-native-floating-tab\";\n\nexport default function TabLayout() {\n\n    return (\n        \u003cTabs\n            screenOptions={{\n                tabBarActiveTintColor: Colors[colorScheme ?? \"light\"].tint,\n                headerShown: false,\n            }}\n            initialRouteName=\"index\"\n            backBehavior=\"history\"\n            tabBar={props =\u003e \u003cExpandBarTab {...props} /\u003e}\n            // tabBar={props =\u003e \u003cRollingBallTab {...props} /\u003e}\n            // tabBar={props =\u003e \u003cSharpCurvyTab {...props} /\u003e}\n            // tabBar={props =\u003e \u003cSlideBarTab {...props} /\u003e}\n            // tabBar={props =\u003e \u003cElevatedTab {...props} /\u003e}\n        \u003e\n            \u003cTabs.Screen\n                name=\"calendar\"\n                options={{\n                    title: \"Calendar\",\n                    tabBarIcon: ({ focused, color, size }) =\u003e (\n                        \u003cIonicons\n                            name={focused ? \"calendar\" : \"calendar-outline\"}\n                            size={size}\n                            color={color}\n                        /\u003e\n                    ),\n                }}\n            /\u003e\n            {/* Add more screens here */}\n        \u003c/Tabs\u003e\n    )\n\n}\n```\n\n## Running the Example\n\nTo run the example, clone the repository and run the following commands. Make sure your project environment is set up properly.\n\n```bash\ncd example\nnpm install\n\n# For Android\nnpm run android\n\n# For iOS\nnpm run ios\n```\n\n## Contributing\n\nPull 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**.\n\n\u003e **Note:** A detailed **Contributing** guide will be added soon.\n\n## Running the project locally\n\nTo run the project locally, clone the repository and run the following commands. Make sure your project environment is set up properly.\n\n```bash\nnpm install\n\nnpm run build # I haven't add any test yet. So, just build the project\n```\n\nAfter successful build, you can locally package the library and use it in your project.\n\n```bash\nnpm pack\n\n```\n\nThis 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 \u003cpackage.tgz\u003e`.\n\nThen, run the example project as mentioned [above](#running-the-example).\n\n## License\n\nSee the [LICENSE](./LICENSE) file for license rights and limitations (MIT).\n\nBuilt with ❤️ by [Moeen Mahmud](https://github.com/moeen-mahmud)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoeen-mahmud%2Freact-native-floating-tab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoeen-mahmud%2Freact-native-floating-tab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoeen-mahmud%2Freact-native-floating-tab/lists"}