@rific/scroll-view 0.8.2 → 0.9.0
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 +175 -1
- package/dist/index.d.mts +21 -3
- package/dist/index.d.ts +21 -3
- package/dist/index.js +332 -153
- package/dist/index.mjs +308 -133
- package/package.json +3 -4
- package/src/ScrollViewChromeContext.ts +37 -0
- package/src/ScrollViewChromeProvider.tsx +65 -0
- package/src/ScrollViewContext.ts +16 -0
- package/src/ScrollViewFooter.tsx +51 -15
- package/src/ScrollViewHeader.tsx +24 -3
- package/src/ScrollViewProvider.tsx +96 -23
- package/src/index.ts +3 -0
- package/src/internal/ChromeRegistrar.tsx +37 -0
- package/src/internal/chrome.ts +19 -0
- package/src/internal/useScrollHandler.ts +26 -5
- package/src/internal/useScrollHandlerJS.ts +31 -7
- package/src/internal/useScrollList.ts +22 -5
- package/src/useScrollViewChrome.ts +41 -0
package/README.md
CHANGED
|
@@ -70,6 +70,7 @@ Screen-level provider that owns header/footer state and scroll position. Must wr
|
|
|
70
70
|
| Prop | Type | Default | Description |
|
|
71
71
|
|------|------|---------|-------------|
|
|
72
72
|
| `blur` | `boolean` | system | Enable frosted-glass backdrop on header/footer |
|
|
73
|
+
| `chrome` | `boolean` | `true` | Join an enclosing [`ScrollViewChromeProvider`](#scrollviewchromeprovider) when there is one. Pass `false` to opt out — for a nested provider that isn't a screen, such as a picker or form modal. No effect when nothing hosts |
|
|
73
74
|
| `fixed` | `boolean` | `false` | Pin both header and footer (overrides `headerFixed`/`footerFixed`) |
|
|
74
75
|
| `footerAboveKeyboard` | `boolean` | `false` | With a fixed footer, float it above the keyboard instead of letting the keyboard cover it — see [Keyboard awareness](#keyboard-awareness) |
|
|
75
76
|
| `headerFixed` | `boolean` | `false` | Pin header; overrides settings default |
|
|
@@ -77,7 +78,23 @@ Screen-level provider that owns header/footer state and scroll position. Must wr
|
|
|
77
78
|
| `snapBack` | `boolean` | `false` | Snap header and footer back when scrolling up |
|
|
78
79
|
| `snapBackHeader` | `boolean` | — | Override `snapBack` for header only |
|
|
79
80
|
| `snapBackFooter` | `boolean` | — | Override `snapBack` for footer only |
|
|
80
|
-
| `tabBarHeight` | `number` | `0` | Extra bottom inset reserved for a host app's own persistent tab bar (added on top of the safe-area inset, independent of any `ScrollViewFooter`) |
|
|
81
|
+
| `tabBarHeight` | `number` | `0` | Extra bottom inset reserved for a host app's own persistent tab bar (added on top of the safe-area inset, independent of any `ScrollViewFooter`). Ignored inside a `ScrollViewChromeProvider` — the host's `footprint` replaces it (see [Persistent bottom chrome](#persistent-bottom-chrome-hiding-a-tab-bar-with-scroll)) |
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
### `ScrollViewChromeProvider`
|
|
86
|
+
|
|
87
|
+
Hosts a persistent bottom bar (a tab bar) so it hides on scroll together with each screen's `ScrollViewFooter`. Mount it once, above the navigator. Every focused `ScrollViewProvider` below it joins automatically. See [Persistent bottom chrome](#persistent-bottom-chrome-hiding-a-tab-bar-with-scroll) for the full picture.
|
|
88
|
+
|
|
89
|
+
| Prop | Type | Default | Description |
|
|
90
|
+
|------|------|---------|-------------|
|
|
91
|
+
| `children` | `ReactNode` | — | Usually the navigator (`<Tabs>`) |
|
|
92
|
+
| `footprint` | `number` | required | Height of the bar's resting box, including its bottom safe-area inset — how far above the screen bottom a hosted `ScrollViewFooter` has to sit to clear it. A plain number rather than something the bar reports back, so every screen has the right geometry on its very first render |
|
|
93
|
+
| `overhang` | `number` | `0` | How far the bar pokes *above* its resting box (a raised centre button, say). Hosted footers pad their bottom by this instead of the safe-area inset, and the hide distance covers it |
|
|
94
|
+
| `snapBack` | `boolean` | `true` | Hosted footers reveal on a short scroll-up instead of only near the top. A bar that hides on scroll has to be reachable from anywhere in a list, so leave this on unless you have a reason not to |
|
|
95
|
+
| `useIsActive` | `() => boolean` | `() => true` | A hook returning whether the calling screen is the focused one — pass react-navigation's `useIsFocused` (re-exported by `expo-router`). Only the focused screen drives the bar. Injected so this package carries no navigation dependency. **Must be a stable hook reference** (a module-level hook such as `useIsFocused`, never an inline arrow created per render): it is called as a hook on every render of every hosted provider |
|
|
96
|
+
|
|
97
|
+
The default `() => true` makes every mounted hosted screen claim the host, and the last one to mount owns it — only right for a navigator that keeps a single screen mounted. Use `useIsFocused` with `Tabs` or anything else that keeps visited screens alive.
|
|
81
98
|
|
|
82
99
|
---
|
|
83
100
|
|
|
@@ -112,6 +129,8 @@ Floating footer with blur backdrop. Place it as a direct child of `ScrollViewPro
|
|
|
112
129
|
| `children` | `ReactNode` | Footer content |
|
|
113
130
|
| `style` | `ViewStyle` | Style applied to the inner row |
|
|
114
131
|
|
|
132
|
+
Inside a [`ScrollViewChromeProvider`](#scrollviewchromeprovider) the footer sits above the host's persistent bar and hides and reveals together with it.
|
|
133
|
+
|
|
115
134
|
---
|
|
116
135
|
|
|
117
136
|
### `ScrollView`
|
|
@@ -311,6 +330,126 @@ Keyboard awareness is native-only — `useKeyboardInset` (and therefore `keyboar
|
|
|
311
330
|
|
|
312
331
|
---
|
|
313
332
|
|
|
333
|
+
## Persistent bottom chrome (hiding a tab bar with scroll)
|
|
334
|
+
|
|
335
|
+
A `ScrollViewFooter` hides on scroll, but an app's tab bar lives outside this package — it stays put, and the footer has to be lifted above it with `tabBarHeight`. `ScrollViewChromeProvider` turns the two into one rigid stack: the screen's footer and the tab bar share a single animated offset, so they hide and reveal together as one piece, frame for frame.
|
|
336
|
+
|
|
337
|
+
Three pieces make it work:
|
|
338
|
+
|
|
339
|
+
1. **Host** — mount `ScrollViewChromeProvider` above the navigator, giving it the bar's `footprint`.
|
|
340
|
+
2. **Screens** — nothing to change. Each `ScrollViewProvider` (and its `ScrollViewHeader`, `ScrollViewFooter`, scroll component) below the host joins it while its screen is focused.
|
|
341
|
+
3. **Bar** — your own tab bar reads the shared offset with `useScrollViewChromeStyle()` and applies it as an animated style. It has to overlay the screen (absolutely positioned at the bottom) with a resting box exactly `footprint` tall, since hosted footers are lifted by that number.
|
|
342
|
+
|
|
343
|
+
```tsx
|
|
344
|
+
// app/(tabs)/_layout.tsx
|
|
345
|
+
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs'
|
|
346
|
+
import { ScrollViewChromeProvider, useScrollViewChromeReveal, useScrollViewChromeStyle } from '@rific/scroll-view'
|
|
347
|
+
import { Tabs, useIsFocused } from 'expo-router'
|
|
348
|
+
import { Pressable, StyleSheet, Text } from 'react-native'
|
|
349
|
+
import Animated from 'react-native-reanimated'
|
|
350
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
351
|
+
|
|
352
|
+
const TAB_ROW = 48
|
|
353
|
+
|
|
354
|
+
const TabBar = ({ navigation, state }: BottomTabBarProps) => {
|
|
355
|
+
const insets = useSafeAreaInsets()
|
|
356
|
+
const chromeStyle = useScrollViewChromeStyle()
|
|
357
|
+
const reveal = useScrollViewChromeReveal()
|
|
358
|
+
return (
|
|
359
|
+
<Animated.View style={[styles.bar, { height: TAB_ROW + insets.bottom, paddingBottom: insets.bottom }, chromeStyle]}>
|
|
360
|
+
{state.routes.map((route, index) => (
|
|
361
|
+
<Pressable
|
|
362
|
+
key={route.key}
|
|
363
|
+
style={styles.tab}
|
|
364
|
+
onPress={() => {
|
|
365
|
+
navigation.navigate(route.name)
|
|
366
|
+
// Tapping the tab you're already on brings the bar back
|
|
367
|
+
if (state.index === index) reveal()
|
|
368
|
+
}}
|
|
369
|
+
>
|
|
370
|
+
<Text>{route.name}</Text>
|
|
371
|
+
</Pressable>
|
|
372
|
+
))}
|
|
373
|
+
</Animated.View>
|
|
374
|
+
)
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
export default function TabsLayout() {
|
|
378
|
+
const insets = useSafeAreaInsets()
|
|
379
|
+
return (
|
|
380
|
+
<ScrollViewChromeProvider footprint={TAB_ROW + insets.bottom} useIsActive={useIsFocused}>
|
|
381
|
+
<Tabs screenOptions={{ headerShown: false }} tabBar={(props) => <TabBar {...props} />} />
|
|
382
|
+
</ScrollViewChromeProvider>
|
|
383
|
+
)
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
const styles = StyleSheet.create({
|
|
387
|
+
bar: { bottom: 0, flexDirection: 'row', left: 0, position: 'absolute', right: 0 },
|
|
388
|
+
tab: { alignItems: 'center', flex: 1, height: TAB_ROW, justifyContent: 'center' }
|
|
389
|
+
})
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
Screens are written exactly as they were — there is no chrome-specific prop on the happy path:
|
|
393
|
+
|
|
394
|
+
```tsx
|
|
395
|
+
// app/(tabs)/library.tsx
|
|
396
|
+
export default function Library() {
|
|
397
|
+
return (
|
|
398
|
+
<ScrollViewProvider>
|
|
399
|
+
<ScrollViewHeader title="Library" />
|
|
400
|
+
<FlatList data={items} renderItem={renderItem} keyExtractor={(item) => item.id} />
|
|
401
|
+
<ScrollViewFooter>
|
|
402
|
+
<Button onPress={addItem}>Add</Button>
|
|
403
|
+
</ScrollViewFooter>
|
|
404
|
+
</ScrollViewProvider>
|
|
405
|
+
)
|
|
406
|
+
}
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
### Pinning the bar
|
|
410
|
+
|
|
411
|
+
`useScrollViewChromePin(active)` holds the bar fully revealed — and stops scroll from hiding it — for as long as `active` is `true`. Use it whenever something on screen needs the bar to stay put, such as a focused search field or a multi-select in progress. Pins are counted, so two independent pinners can't release each other, and it works from any component under the host (below a `ScrollViewProvider` too).
|
|
412
|
+
|
|
413
|
+
```tsx
|
|
414
|
+
function SearchField() {
|
|
415
|
+
const [focused, setFocused] = useState(false)
|
|
416
|
+
useScrollViewChromePin(focused)
|
|
417
|
+
return <Searchbar onBlur={() => setFocused(false)} onFocus={() => setFocused(true)} />
|
|
418
|
+
}
|
|
419
|
+
```
|
|
420
|
+
|
|
421
|
+
`useScrollViewChromeReveal()` returns a function that animates the bar back to fully revealed (200ms) — handy for a tab press or a "scroll to top" action, as in the example above.
|
|
422
|
+
|
|
423
|
+
### Nested providers that aren't screens
|
|
424
|
+
|
|
425
|
+
A `ScrollViewProvider` nested inside another one never sees the host: every hosted provider clears it for its own children, so a panel inside a screen can't compete with its parent. A picker or form modal is the exception — a portal can re-parent it out from under its screen's provider, and it would then claim the host and drive the bar from its own scrolling. Pass `chrome={false}` to opt those out:
|
|
426
|
+
|
|
427
|
+
```tsx
|
|
428
|
+
<ScrollViewProvider chrome={false} footerFixed>
|
|
429
|
+
<ScrollViewHeader title="Choose a category" />
|
|
430
|
+
<FlatList data={categories} renderItem={renderCategory} keyExtractor={(item) => item.id} />
|
|
431
|
+
</ScrollViewProvider>
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
`chrome={false}` gives you exactly the unhosted behavior described in the rest of this README.
|
|
435
|
+
|
|
436
|
+
### What changes for a hosted screen
|
|
437
|
+
|
|
438
|
+
- **The footer joins the stack.** It sits `footprint` above the screen bottom, translates by the shared offset (clamped to the full hide distance), and pads its bottom by `overhang` instead of the safe-area inset — the bar's `footprint` already includes that inset.
|
|
439
|
+
- **Hide distance.** The stack slides `footprint + max(footerHeight, overhang) + 2` points: the bar, plus the screen's footer (whose measured height already includes the `overhang` padding; with no footer, just the `overhang`), plus 2 points of slack so a soft shadow bleeding past the bar's box doesn't leave a sliver at the screen edge.
|
|
440
|
+
- **Footer snap-back is forced.** A hosted footer follows the host's `snapBack` (default `true`) whatever the provider, `snapBackFooter` or settings values say, so the stack reveals on a short scroll-up from anywhere in a list. The header's own snap-back is untouched.
|
|
441
|
+
- **Scrolling stops at an end.** Hiding tracks the scroll 1:1, so a drag can end with the stack half hidden. When a drag ends without momentum, or momentum ends, the stack animates (200ms) to whichever end is nearer — fully shown or fully hidden, never cut off.
|
|
442
|
+
- **Short lists never hide.** A list that can't scroll at least the hide distance would strand the stack half hidden, so it never starts hiding and stays revealed.
|
|
443
|
+
- **Footer Lock keeps it revealed.** A fixed footer (`footerFixed`, `fixed`, or the settings default) stops the scroll handlers from writing the offset, and turning it on while the stack is hidden animates the stack back. The hosted footer still reads the shared offset rather than pinning itself to zero, so the footer and the bar stay equal on every frame, including that animation.
|
|
444
|
+
- **The focused screen owns the bar.** Screens that are mounted but unfocused never write the offset. Whenever ownership changes — switching tabs, or landing on a screen with no `ScrollViewProvider` at all — the stack resets to fully revealed instead of staying wherever the last screen parked it. A pin engaging does the same.
|
|
445
|
+
- **The reserved bottom inset stays constant while hidden.** Scroll content reserves `footprint` plus the overhang (or a fixed footer's height) at the bottom. That space can't animate, so it stays reserved as the bar slides away rather than the list resizing mid-scroll — the last row can always scroll clear of a revealed bar, and nothing shifts when the bar hides.
|
|
446
|
+
- **`tabBarHeight` is ignored.** The host's `footprint` is the same "reserve this much at the bottom" number, just known exactly, and takes its place.
|
|
447
|
+
- **With a fixed footer floating above the keyboard** (`footerFixed` + `footerAboveKeyboard`), the footer sits above whichever is taller, the bar or the keyboard, instead of floating a whole bar-height above the keyboard.
|
|
448
|
+
|
|
449
|
+
Outside a host — or in a provider with `chrome={false}` — none of this applies and every behavior in the rest of this README is unchanged. `useScrollViewChromeStyle`, `useScrollViewChromePin` and `useScrollViewChromeReveal` are also inert there (a permanent zero translate, a no-op pin and a no-op reveal), so a shared tab bar component can call them unconditionally.
|
|
450
|
+
|
|
451
|
+
---
|
|
452
|
+
|
|
314
453
|
## Hooks
|
|
315
454
|
|
|
316
455
|
### `useScrollView`
|
|
@@ -363,6 +502,39 @@ const keyboardHeight = useKeyboardInset()
|
|
|
363
502
|
|
|
364
503
|
---
|
|
365
504
|
|
|
505
|
+
### `useScrollViewChromeStyle`
|
|
506
|
+
|
|
507
|
+
For the persistent bar hosted by [`ScrollViewChromeProvider`](#scrollviewchromeprovider). Returns an animated style (`translateY` from the shared offset) to apply to an `Animated.View`, so the bar moves in lockstep with the focused screen's footer. Outside a host it is a permanent zero translate.
|
|
508
|
+
|
|
509
|
+
```tsx
|
|
510
|
+
const chromeStyle = useScrollViewChromeStyle()
|
|
511
|
+
return <Animated.View style={[styles.bar, chromeStyle]}>{/* tabs */}</Animated.View>
|
|
512
|
+
```
|
|
513
|
+
|
|
514
|
+
---
|
|
515
|
+
|
|
516
|
+
### `useScrollViewChromePin`
|
|
517
|
+
|
|
518
|
+
Holds the hosted bar fully revealed, and stops scroll from hiding it, while `active` is `true`. Pins are ref-counted, so independent pinners can't release each other. Inert outside a host.
|
|
519
|
+
|
|
520
|
+
```tsx
|
|
521
|
+
useScrollViewChromePin(searchFocused)
|
|
522
|
+
```
|
|
523
|
+
|
|
524
|
+
---
|
|
525
|
+
|
|
526
|
+
### `useScrollViewChromeReveal`
|
|
527
|
+
|
|
528
|
+
Returns a `() => void` that animates the hosted bar back to fully revealed (200ms). Returns a no-op outside a host.
|
|
529
|
+
|
|
530
|
+
```tsx
|
|
531
|
+
const reveal = useScrollViewChromeReveal()
|
|
532
|
+
```
|
|
533
|
+
|
|
534
|
+
See [Persistent bottom chrome](#persistent-bottom-chrome-hiding-a-tab-bar-with-scroll) for all three in context.
|
|
535
|
+
|
|
536
|
+
---
|
|
537
|
+
|
|
366
538
|
## Redux integration
|
|
367
539
|
|
|
368
540
|
If your app uses Redux, you can drive scroll settings from the store instead of (or in addition to) `ScrollViewSettingsProvider`.
|
|
@@ -400,3 +572,5 @@ store.dispatch(scrollViewActions.initialize({ snapBack: true, headerFixed: false
|
|
|
400
572
|
| `backActionFixed` | `true` | Keep back button visible as header scrolls away |
|
|
401
573
|
|
|
402
574
|
Settings cascade: `ScrollViewSettingsProvider` → `ScrollViewProvider` → individual scroll component props. More specific values always win.
|
|
575
|
+
|
|
576
|
+
One exception: inside a `ScrollViewChromeProvider`, a footer's snap-back comes from the host's `snapBack` prop rather than this cascade (see [Persistent bottom chrome](#persistent-bottom-chrome-hiding-a-tab-bar-with-scroll)).
|
package/dist/index.d.mts
CHANGED
|
@@ -6,7 +6,7 @@ import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
|
|
|
6
6
|
import * as _rific_core from '@rific/core';
|
|
7
7
|
import { SettingsContextValue, SettingsProviderProps } from '@rific/core';
|
|
8
8
|
import * as react_native_reanimated from 'react-native-reanimated';
|
|
9
|
-
import { SharedValue } from 'react-native-reanimated';
|
|
9
|
+
import { SharedValue, AnimatedStyle } from 'react-native-reanimated';
|
|
10
10
|
|
|
11
11
|
type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress' | 'children'> & {
|
|
12
12
|
label?: ReactNode;
|
|
@@ -157,8 +157,20 @@ type ScrollViewProps = ScrollViewProps$1 & {
|
|
|
157
157
|
declare const ScrollViewInner: ({ chipProps, chipThreshold, children, contentContainerStyle: externalContentContainerStyle, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => react.JSX.Element;
|
|
158
158
|
declare const ScrollView: typeof ScrollViewInner;
|
|
159
159
|
|
|
160
|
+
type ScrollViewChromeProviderProps = {
|
|
161
|
+
children: ReactNode;
|
|
162
|
+
footprint: number;
|
|
163
|
+
overhang?: number;
|
|
164
|
+
snapBack?: boolean;
|
|
165
|
+
useIsActive?: () => boolean;
|
|
166
|
+
};
|
|
167
|
+
declare const ScrollViewChromeProvider: ({ children, footprint, overhang, snapBack, useIsActive }: ScrollViewChromeProviderProps) => react.JSX.Element;
|
|
168
|
+
|
|
160
169
|
type ScrollViewContextType = {
|
|
161
170
|
blur: boolean;
|
|
171
|
+
chromeHosted: boolean;
|
|
172
|
+
chromeOverhang: number;
|
|
173
|
+
chromeWritable: SharedValue<boolean>;
|
|
162
174
|
footerAboveKeyboard: boolean;
|
|
163
175
|
footerHeight: number | null;
|
|
164
176
|
footerHeightShared: SharedValue<number>;
|
|
@@ -183,6 +195,7 @@ type ScrollViewContextType = {
|
|
|
183
195
|
setHeaderHeight: (h: number | null) => void;
|
|
184
196
|
setProgress: (p: number | null) => void;
|
|
185
197
|
setProgressing: (b: boolean) => void;
|
|
198
|
+
stackHeightShared: SharedValue<number>;
|
|
186
199
|
tabBarHeight: number;
|
|
187
200
|
};
|
|
188
201
|
declare const ScrollViewContext: react.Context<ScrollViewContextType>;
|
|
@@ -213,6 +226,7 @@ declare const ScrollViewHeader: ({ actionSize, actionStyle, backAction, backActi
|
|
|
213
226
|
|
|
214
227
|
type ScrollViewProviderProps = {
|
|
215
228
|
blur?: boolean;
|
|
229
|
+
chrome?: boolean;
|
|
216
230
|
children: ReactNode;
|
|
217
231
|
fixed?: boolean;
|
|
218
232
|
footerAboveKeyboard?: boolean;
|
|
@@ -223,7 +237,7 @@ type ScrollViewProviderProps = {
|
|
|
223
237
|
snapBackHeader?: boolean;
|
|
224
238
|
tabBarHeight?: number;
|
|
225
239
|
};
|
|
226
|
-
declare const ScrollViewProvider: ({ blur, children, fixed, footerAboveKeyboard, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight }: ScrollViewProviderProps) => react.JSX.Element;
|
|
240
|
+
declare const ScrollViewProvider: ({ blur, chrome, children, fixed, footerAboveKeyboard, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight }: ScrollViewProviderProps) => react.JSX.Element;
|
|
227
241
|
|
|
228
242
|
type ScrollViewSettingsProviderProps = SettingsProviderProps<ScrollViewSettings>;
|
|
229
243
|
declare const ScrollViewSettingsProvider: (props: SettingsProviderProps<ScrollViewSettings>) => React.JSX.Element;
|
|
@@ -265,6 +279,10 @@ declare const useScrollView: () => {
|
|
|
265
279
|
setProgressing: (b: boolean) => void;
|
|
266
280
|
};
|
|
267
281
|
|
|
282
|
+
declare const useScrollViewChromeStyle: () => StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
|
|
283
|
+
declare const useScrollViewChromePin: (active: boolean) => void;
|
|
284
|
+
declare const useScrollViewChromeReveal: () => () => void;
|
|
285
|
+
|
|
268
286
|
declare const useScrollViewSettings: () => _rific_core.SettingsContextValue<ScrollViewSettings>;
|
|
269
287
|
|
|
270
|
-
export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewSettings };
|
|
288
|
+
export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewChromeProvider, type ScrollViewChromeProviderProps, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewChromePin, useScrollViewChromeReveal, useScrollViewChromeStyle, useScrollViewSettings };
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
|
|
|
6
6
|
import * as _rific_core from '@rific/core';
|
|
7
7
|
import { SettingsContextValue, SettingsProviderProps } from '@rific/core';
|
|
8
8
|
import * as react_native_reanimated from 'react-native-reanimated';
|
|
9
|
-
import { SharedValue } from 'react-native-reanimated';
|
|
9
|
+
import { SharedValue, AnimatedStyle } from 'react-native-reanimated';
|
|
10
10
|
|
|
11
11
|
type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress' | 'children'> & {
|
|
12
12
|
label?: ReactNode;
|
|
@@ -157,8 +157,20 @@ type ScrollViewProps = ScrollViewProps$1 & {
|
|
|
157
157
|
declare const ScrollViewInner: ({ chipProps, chipThreshold, children, contentContainerStyle: externalContentContainerStyle, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => react.JSX.Element;
|
|
158
158
|
declare const ScrollView: typeof ScrollViewInner;
|
|
159
159
|
|
|
160
|
+
type ScrollViewChromeProviderProps = {
|
|
161
|
+
children: ReactNode;
|
|
162
|
+
footprint: number;
|
|
163
|
+
overhang?: number;
|
|
164
|
+
snapBack?: boolean;
|
|
165
|
+
useIsActive?: () => boolean;
|
|
166
|
+
};
|
|
167
|
+
declare const ScrollViewChromeProvider: ({ children, footprint, overhang, snapBack, useIsActive }: ScrollViewChromeProviderProps) => react.JSX.Element;
|
|
168
|
+
|
|
160
169
|
type ScrollViewContextType = {
|
|
161
170
|
blur: boolean;
|
|
171
|
+
chromeHosted: boolean;
|
|
172
|
+
chromeOverhang: number;
|
|
173
|
+
chromeWritable: SharedValue<boolean>;
|
|
162
174
|
footerAboveKeyboard: boolean;
|
|
163
175
|
footerHeight: number | null;
|
|
164
176
|
footerHeightShared: SharedValue<number>;
|
|
@@ -183,6 +195,7 @@ type ScrollViewContextType = {
|
|
|
183
195
|
setHeaderHeight: (h: number | null) => void;
|
|
184
196
|
setProgress: (p: number | null) => void;
|
|
185
197
|
setProgressing: (b: boolean) => void;
|
|
198
|
+
stackHeightShared: SharedValue<number>;
|
|
186
199
|
tabBarHeight: number;
|
|
187
200
|
};
|
|
188
201
|
declare const ScrollViewContext: react.Context<ScrollViewContextType>;
|
|
@@ -213,6 +226,7 @@ declare const ScrollViewHeader: ({ actionSize, actionStyle, backAction, backActi
|
|
|
213
226
|
|
|
214
227
|
type ScrollViewProviderProps = {
|
|
215
228
|
blur?: boolean;
|
|
229
|
+
chrome?: boolean;
|
|
216
230
|
children: ReactNode;
|
|
217
231
|
fixed?: boolean;
|
|
218
232
|
footerAboveKeyboard?: boolean;
|
|
@@ -223,7 +237,7 @@ type ScrollViewProviderProps = {
|
|
|
223
237
|
snapBackHeader?: boolean;
|
|
224
238
|
tabBarHeight?: number;
|
|
225
239
|
};
|
|
226
|
-
declare const ScrollViewProvider: ({ blur, children, fixed, footerAboveKeyboard, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight }: ScrollViewProviderProps) => react.JSX.Element;
|
|
240
|
+
declare const ScrollViewProvider: ({ blur, chrome, children, fixed, footerAboveKeyboard, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight }: ScrollViewProviderProps) => react.JSX.Element;
|
|
227
241
|
|
|
228
242
|
type ScrollViewSettingsProviderProps = SettingsProviderProps<ScrollViewSettings>;
|
|
229
243
|
declare const ScrollViewSettingsProvider: (props: SettingsProviderProps<ScrollViewSettings>) => React.JSX.Element;
|
|
@@ -265,6 +279,10 @@ declare const useScrollView: () => {
|
|
|
265
279
|
setProgressing: (b: boolean) => void;
|
|
266
280
|
};
|
|
267
281
|
|
|
282
|
+
declare const useScrollViewChromeStyle: () => StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
|
|
283
|
+
declare const useScrollViewChromePin: (active: boolean) => void;
|
|
284
|
+
declare const useScrollViewChromeReveal: () => () => void;
|
|
285
|
+
|
|
268
286
|
declare const useScrollViewSettings: () => _rific_core.SettingsContextValue<ScrollViewSettings>;
|
|
269
287
|
|
|
270
|
-
export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewSettings };
|
|
288
|
+
export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewChromeProvider, type ScrollViewChromeProviderProps, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewChromePin, useScrollViewChromeReveal, useScrollViewChromeStyle, useScrollViewSettings };
|