@orionarm/react-native-collapse-tabs 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
## Preview
|
|
12
12
|
|
|
13
13
|
<p align="center">
|
|
14
|
-
<img src="https://
|
|
14
|
+
<img src="https://raw.githubusercontent.com/orion-arm-ai/react-native-collapse-tabs/main/assets/collapse-tabs.gif" alt="collapse-tabs demo" width="320" />
|
|
15
15
|
</p>
|
|
16
16
|
|
|
17
17
|
---
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
|
|
33
33
|
## Requirements
|
|
34
34
|
|
|
35
|
-
| Peer dependency
|
|
36
|
-
|
|
|
37
|
-
| `react`
|
|
38
|
-
| `react-native`
|
|
39
|
-
| `react-native-gesture-handler
|
|
40
|
-
| `react-native-pager-view`
|
|
41
|
-
| `react-native-reanimated`
|
|
35
|
+
| Peer dependency | Version |
|
|
36
|
+
| ------------------------------ | ---------- |
|
|
37
|
+
| `react` | `>=16.8.0` |
|
|
38
|
+
| `react-native` | `>=0.60.0` |
|
|
39
|
+
| `react-native-gesture-handler` | `>=2.0.0` |
|
|
40
|
+
| `react-native-pager-view` | `>=6.0.0` |
|
|
41
|
+
| `react-native-reanimated` | `>=3.0.0` |
|
|
42
42
|
|
|
43
43
|
Make sure Reanimated is set up correctly (Babel plugin + `react-native-reanimated/plugin` at the **end** of your `babel.config.js` plugins array).
|
|
44
44
|
|
|
@@ -126,9 +126,18 @@ export default function Example() {
|
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
const styles = StyleSheet.create({
|
|
129
|
-
header: {
|
|
129
|
+
header: {
|
|
130
|
+
flex: 1,
|
|
131
|
+
backgroundColor: "#2D8CFF",
|
|
132
|
+
justifyContent: "center",
|
|
133
|
+
alignItems: "center",
|
|
134
|
+
},
|
|
130
135
|
headerText: { color: "#fff", fontSize: 22, fontWeight: "600" },
|
|
131
|
-
row: {
|
|
136
|
+
row: {
|
|
137
|
+
padding: 16,
|
|
138
|
+
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
139
|
+
borderColor: "#eee",
|
|
140
|
+
},
|
|
132
141
|
});
|
|
133
142
|
```
|
|
134
143
|
|
|
@@ -142,39 +151,39 @@ const styles = StyleSheet.create({
|
|
|
142
151
|
|
|
143
152
|
The root container.
|
|
144
153
|
|
|
145
|
-
| Prop | Type
|
|
146
|
-
| ---------------------- |
|
|
147
|
-
| `headerHeight` | `number`
|
|
148
|
-
| `tabBarHeight` | `number`
|
|
149
|
-
| `children` | `TabReactElement \| TabReactElement[]`
|
|
150
|
-
| `initialTabName` | `string`
|
|
151
|
-
| `minHeaderHeight` | `number`
|
|
152
|
-
| `renderHeader` | `(props: HeaderProps) => ReactElement \| null`
|
|
153
|
-
| `renderTabBar` | `(props: TabBarProps) => ReactElement \| null`
|
|
154
|
-
| `containerStyle` | `StyleProp<ViewStyle>`
|
|
155
|
-
| `headerContainerStyle` | `StyleProp<ViewStyle>`
|
|
156
|
-
| `pagerProps` | `Omit<PagerViewProps, "onPageScroll" \| "initialPage">`
|
|
157
|
-
| `onIndexChange` | `(index: number) => void`
|
|
154
|
+
| Prop | Type | Required | Description |
|
|
155
|
+
| ---------------------- | ------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
|
|
156
|
+
| `headerHeight` | `number` | ✅ | Fixed height of the header content (above the tab bar). |
|
|
157
|
+
| `tabBarHeight` | `number` | ✅ | Fixed height of the tab bar. |
|
|
158
|
+
| `children` | `TabReactElement \| TabReactElement[]` | ✅ | One or more `<Tab>` children. |
|
|
159
|
+
| `initialTabName` | `string` | | Tab to focus on mount. Defaults to the first child. |
|
|
160
|
+
| `minHeaderHeight` | `number` | | Minimum visible header height once collapsed. Default `0`. |
|
|
161
|
+
| `renderHeader` | `(props: HeaderProps) => ReactElement \| null` | | Render function for the header content. |
|
|
162
|
+
| `renderTabBar` | `(props: TabBarProps) => ReactElement \| null` | | Render function for a custom tab bar. Falls back to `<DefaultTabBar>` if not provided. |
|
|
163
|
+
| `containerStyle` | `StyleProp<ViewStyle>` | | Style for the outer container. |
|
|
164
|
+
| `headerContainerStyle` | `StyleProp<ViewStyle>` | | Style for the absolutely-positioned header wrapper. |
|
|
165
|
+
| `pagerProps` | `Omit<PagerViewProps, "onPageScroll" \| "initialPage">` | | Extra props forwarded to `PagerView`. |
|
|
166
|
+
| `onIndexChange` | `(index: number) => void` | | Fired after the focused tab changes. |
|
|
158
167
|
|
|
159
168
|
### `<Tab />`
|
|
160
169
|
|
|
161
170
|
Wraps a single tab's content. Should be a direct child of `<CollapseTabs>`.
|
|
162
171
|
|
|
163
|
-
| Prop | Type | Required | Description
|
|
164
|
-
| ---------- | ----------------- | -------- |
|
|
165
|
-
| `name` | `string` | ✅ | Unique identifier — must match the inner list's `name`.
|
|
172
|
+
| Prop | Type | Required | Description |
|
|
173
|
+
| ---------- | ----------------- | -------- | ---------------------------------------------------------------------- |
|
|
174
|
+
| `name` | `string` | ✅ | Unique identifier — must match the inner list's `name`. |
|
|
166
175
|
| `label` | `string` | | Optional display label (currently used by `DefaultTabBar` via `name`). |
|
|
167
|
-
| `children` | `React.ReactNode` | ✅ | Tab content — usually a wrapped `<FlatList>` or `<ScrollView>`.
|
|
176
|
+
| `children` | `React.ReactNode` | ✅ | Tab content — usually a wrapped `<FlatList>` or `<ScrollView>`. |
|
|
168
177
|
|
|
169
178
|
### `<FlatList />` and `<ScrollView />`
|
|
170
179
|
|
|
171
180
|
Drop-in replacements for the standard components, pre-wired to the collapse-tabs scroll system.
|
|
172
181
|
|
|
173
|
-
| Prop | Type
|
|
174
|
-
| ---------- |
|
|
175
|
-
| `name` | `string`
|
|
182
|
+
| Prop | Type | Required | Description |
|
|
183
|
+
| ---------- | --------------------------------------- | -------- | ----------------------------------------------------------------------------------- |
|
|
184
|
+
| `name` | `string` | ✅ | Must match the parent `<Tab name="..." />`. |
|
|
176
185
|
| `onScroll` | `(event) => void` or Reanimated worklet | | Forwarded after the internal handler runs. Works with both JS and worklet handlers. |
|
|
177
|
-
| ... | —
|
|
186
|
+
| ... | — | | All other standard `FlatList` / `ScrollView` props. |
|
|
178
187
|
|
|
179
188
|
> They automatically apply `paddingTop: headerHeight + tabBarHeight` to the content so your first item starts below the header.
|
|
180
189
|
|
|
@@ -204,11 +213,11 @@ const {
|
|
|
204
213
|
tabBarHeight,
|
|
205
214
|
headerScrollDistance,
|
|
206
215
|
tabNames,
|
|
207
|
-
index,
|
|
208
|
-
indexDecimal,
|
|
209
|
-
focusedTab,
|
|
210
|
-
scrollY,
|
|
211
|
-
headerTranslateY
|
|
216
|
+
index, // SharedValue<number>
|
|
217
|
+
indexDecimal, // SharedValue<number>
|
|
218
|
+
focusedTab, // SharedValue<string>
|
|
219
|
+
scrollY, // SharedValue<Record<string, number>>
|
|
220
|
+
headerTranslateY, // SharedValue<number>
|
|
212
221
|
containerRef,
|
|
213
222
|
} = useTabsContext();
|
|
214
223
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orionarm/react-native-collapse-tabs",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"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.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|