[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-76263":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":14,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},76263,"expo-motion-tabs","rit3zh\u002Fexpo-motion-tabs","rit3zh","⚡️ Smooth motion tabs for Expo Router","",null,"TypeScript",185,12,1,0,4,58,3,3.34,false,"main",[],"2026-06-12 02:03:41","# expo-motion-tabs\n\nA buttery-smooth animated bottom tab bar for Expo Router with a morphing popup panel.\n\n## ✨ Features\n\n- 🎯 Drop-in `tabBar` for `expo-router`'s `\u003CTabs>`\n- 🪄 Morphing popup panel per tab with shared-element feel\n- 🎨 Themeable palette & custom popup bodies\n- 🧩 TypeScript-ready\n\n---\n\n## ⚙️ Installation\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Frit3zh\u002Fexpo-motion-tabs\ncd expo-motion-tabs\nbun start\n```\n\n---\n\n## 🎥 Preview\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fbbc24508-5048-4f91-9c4f-a953ca59d3ff\n\n> [!NOTE]  \n> Android preview is TODO\n\n\n---\n\n## 🚀 Usage\n\n```tsx\nimport { Tabs } from \"expo-router\";\nimport { AnimatedTabBar } from \"@\u002Fmotion-tabs\";\nimport { ExamplePopupBody } from \"@\u002Fmotion-tabs\u002Fexamples\u002Fexample-popup-body\";\nimport { TabIcon } from \"@\u002Fcomponents\u002Ftab-icon\";\n\nexport default function TabsLayout() {\n  return (\n    \u003CTabs\n      screenOptions={{ headerShown: false, tabBarStyle: { height: 0 } }}\n      tabBar={(props) => (\n        \u003CAnimatedTabBar {...props} renderPopupBody={ExamplePopupBody} \u002F>\n      )}\n    >\n      \u003CTabs.Screen\n        name=\"home\"\n        options={{\n          tabBarLabel: \"Home\",\n          tabBarIcon: ({ color, size }) => (\n            \u003CTabIcon name=\"home\" color={color} size={size} \u002F>\n          ),\n        }}\n      \u002F>\n      \u003CTabs.Screen name=\"search\" options={{ tabBarLabel: \"Search\" }} \u002F>\n      \u003CTabs.Screen name=\"profile\" options={{ tabBarLabel: \"Profile\" }} \u002F>\n    \u003C\u002FTabs>\n  );\n}\n```\n\n### Custom popup body\n\n```tsx\nimport type { IPopupRenderContext } from \"@\u002Fmotion-tabs\";\n\nfunction MyPopupBody(ctx: IPopupRenderContext) {\n  switch (ctx.activeView) {\n    case \"home\":\n      return \u003CHomePanel {...ctx} \u002F>;\n    case \"search\":\n      return \u003CSearchPanel {...ctx} \u002F>;\n    case \"profile\":\n      return \u003CProfilePanel {...ctx} \u002F>;\n  }\n}\n```\n\n---\n\n## Stack\n\n[Expo 55](https:\u002F\u002Fexpo.dev\u002Fchangelog\u002Fsdk-55) · [React Native 0.83](https:\u002F\u002Freactnative.dev\u002Fblog\u002F2025\u002F12\u002F10\u002Freact-native-0.83) · [Reanimated 4](https:\u002F\u002Fdocs.swmansion.com\u002Freact-native-reanimated\u002Fdocs\u002Ffundamentals\u002Fgetting-started) · [Gesture Handler 2](https:\u002F\u002Fdocs.swmansion.com\u002Freact-native-gesture-handler\u002Fdocs\u002Fcategory\u002Fgesture-handler-2\u002F) · [Expo Router](https:\u002F\u002Fdocs.expo.dev\u002Frouter\u002Fintroduction\u002F)\n","expo-motion-tabs 是一个为 Expo Router 设计的流畅动画底部标签栏组件，带有变形弹出面板。它提供了一个即插即用的 `tabBar` 解决方案，支持每标签页的共享元素风格变形弹出效果，同时允许用户自定义主题和弹出内容，并且完全兼容 TypeScript。此项目适用于需要增强移动应用导航体验、追求界面流畅度与美观性的场景，特别是在使用 Expo 框架构建 React Native 应用时。通过结合 Reanimated 和 Gesture Handler 等技术，确保了动画执行的高效性与平滑度。",2,"2026-06-11 03:54:50","CREATED_QUERY"]