@orionarm/react-native-collapse-tabs 1.0.8 → 1.0.10

package/README.md

@@ -30,6 +30,32 @@
 
 ---
 
+## When to use
+
+Use `@orionarm/react-native-collapse-tabs` when you need a **Twitter / Instagram / YouTube profile style screen** in React Native — a large header that collapses as you scroll, sticky tabs underneath, swipeable pages, and per-tab scroll memory.
+
+Typical use cases:
+
+- **User / profile screens** with a hero header and `Posts / Likes / Media` tabs
+- **Product detail pages** with tabbed sections (Description / Reviews / Q&A)
+- **Restaurant / store pages** with collapsing cover image and category tabs
+- **Music / video apps** with an artist header and `Songs / Albums / Playlists` tabs
+- Any screen that needs a **collapsing header + sticky tab bar + horizontal swipe**
+
+## Comparison with similar libraries
+
+| Library                                       | Collapsible header | Swipeable tabs | Per-tab scroll | Reanimated v3 worklets | Bundle size |
+| --------------------------------------------- | ------------------ | -------------- | -------------- | ---------------------- | ----------- |
+| **@orionarm/react-native-collapse-tabs**      | ✅                 | ✅             | ✅             | ✅                     | ~30 KB      |
+| `react-native-collapsible-tab-view`           | ✅                 | ✅             | ✅             | ✅                     | larger      |
+| `react-native-scrollable-tab-view` _(legacy)_ | partial            | ✅             | ❌             | ❌                     | small       |
+| `react-native-tab-view`                       | ❌                 | ✅             | ❌             | partial                | medium      |
+| `react-native-sticky-parallax-header`         | ✅                 | ❌             | ❌             | partial                | medium      |
+
+Compared to `react-native-collapsible-tab-view`, this library aims for a **smaller API surface** and uses `react-native-pager-view` directly for native paging — fewer abstractions, easier to drop in, and easier to customize.
+
+---
+
 ## Requirements
 
 | Peer dependency                | Version    |
@@ -266,6 +292,48 @@ import type {
 
 ---
 
+## FAQ
+
+### How is this different from `react-native-collapsible-tab-view`?
+
+Both solve the same problem. `@orionarm/react-native-collapse-tabs` has a smaller surface area, uses `react-native-pager-view` directly (instead of `react-native-tab-view`), and exposes the underlying Reanimated `SharedValue`s through `useTabsContext()` so you can build fully custom headers/tab bars without forking.
+
+### Does it work with Expo?
+
+Yes. It works with **Expo SDK 49+** (any version that supports `react-native-reanimated` v3 and `react-native-pager-view` 6+). Run `npx expo install react-native-reanimated react-native-pager-view react-native-gesture-handler` and you're set.
+
+### Does it support iOS and Android?
+
+Yes — both platforms are first-class. All animations run on the UI thread via Reanimated worklets, so performance is identical on both.
+
+### Does it support pull-to-refresh?
+
+Yes. Pass `refreshControl` to the wrapped `<FlatList>` just like a normal RN list. The library handles overscroll so the header won't fly off-screen during the pull gesture.
+
+### Can I use a custom tab bar / animated header?
+
+Absolutely. Pass `renderTabBar` and `renderHeader` props, or read the shared scroll state via `useTabsContext()` to drive your own animations.
+
+### Does it support dynamic header height?
+
+Not yet — `headerHeight` is currently fixed. Dynamic height is on the [roadmap](#roadmap).
+
+### How do I keep each tab's scroll position independent?
+
+It's automatic. Just make sure the `name` prop on `<Tab>` matches the `name` prop on the inner `<FlatList>` / `<ScrollView>`.
+
+### Why Reanimated v3?
+
+Reanimated v3 worklets let scroll-driven animations run entirely on the UI thread, which is required for jank-free 60fps header collapse on lower-end Android devices.
+
+---
+
+## Keywords
+
+`react-native collapsible tabs` · `react-native sticky header tabs` · `react-native parallax header` · `react-native tab view with collapsing header` · `react-native scrollable tab bar` · `react-native pager view tabs` · `react-native animated tabs` · `react-native profile screen` · `instagram profile tabs react-native` · `twitter profile header react-native`
+
+---
+
 ## Roadmap
 
 - [ ] Dynamic header height

package/lib/TabBar.js

@@ -17,15 +17,14 @@ const TabBarItem = ({ name, index, indexDecimal, onPress }) => {
 };
 const Indicator = ({ count, indexDecimal }) => {
     const style = useAnimatedStyle(() => ({
-        transform: [
-            { translateX: (indexDecimal.value * 100) / count + "%" },
-        ],
+        transform: [{ translateX: indexDecimal.value * 100 + "%" }],
         width: `${100 / count}%`,
     }));
     return <Animated.View style={[styles.indicator, style]}/>;
 };
 const styles = StyleSheet.create({
     container: {
+        flex: 1,
         flexDirection: "row",
         backgroundColor: "#fff",
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orionarm/react-native-collapse-tabs",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "A high-performance React Native collapsible tabs component with sticky/animated header, swipeable pages, and per-tab scroll. Built on react-native-pager-view and react-native-reanimated v3.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -13,33 +13,54 @@
   "keywords": [
     "react-native",
     "react-native-tabs",
+    "react-native-collapse-tabs",
     "react-native-collapsible-tabs",
+    "react-native-collapsible-tab-view",
     "react-native-sticky-header",
+    "react-native-sticky-tabs",
+    "react-native-parallax-header",
+    "react-native-animated-header",
     "react-native-pager-view",
     "react-native-reanimated",
+    "react-native-flatlist",
+    "react-native-scrollview",
+    "react-native-tab-view",
+    "react-native-profile-screen",
     "collapse",
+    "collapse-tabs",
+    "collapsing-header",
     "collapsible",
+    "collapsible-header",
     "tabs",
     "tab",
     "tab-view",
     "tabbar",
     "tab-bar",
     "sticky-header",
+    "sticky-tabs",
     "sticky",
     "animated-header",
+    "parallax",
     "parallax-header",
     "scroll",
     "scrollable",
+    "nested-scroll",
     "swipe",
     "swipeable",
     "pager",
     "pager-view",
     "reanimated",
+    "reanimated-v3",
+    "worklet",
     "ios",
     "android",
     "expo",
+    "expo-tabs",
     "flatlist",
-    "scrollview"
+    "scrollview",
+    "header",
+    "instagram-profile",
+    "twitter-profile"
   ],
   "author": "yanan_orionarm",
   "license": "ISC",

package/src/TabBar.tsx

@@ -53,9 +53,7 @@ const Indicator: React.FC<{
   indexDecimal: Animated.SharedValue<number>;
 }> = ({ count, indexDecimal }) => {
   const style = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: (indexDecimal.value * 100) / count + "%" } as any,
-    ],
+    transform: [{ translateX: indexDecimal.value * 100 + "%" } as any],
     width: `${100 / count}%`,
   }));
   return <Animated.View style={[styles.indicator, style]} />;
@@ -63,6 +61,7 @@ const Indicator: React.FC<{
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: "row",
     backgroundColor: "#fff",
   },