@rific/auto-paper 0.12.4 → 0.13.0

package/README.md

@@ -34,7 +34,7 @@ npm install expo-blur             # frosted-glass BlurView
 npm install expo-navigation-bar   # (>= 56.0.0, SDK 54+) auto-syncs Android nav bar icon style to the theme when BottomNavigation is mounted
 ```
 
-These integrations are opt-in: pass them to `Provider` (`expoBlur`, `navigationBar`, and `reanimated` - see the prop table below), and the relevant wrappers pick them up automatically. Omit them and you still get working fallbacks: `BlurView` renders its solid (non-blur) look, `BottomNavigation` simply skips nav-bar syncing, and `Dialog` treats `animatedStyle` as a no-op unless a reanimated module is injected.
+These integrations are opt-in: pass them to `Provider` (`expoBlur`, `maskedView`, `navigationBar`, and `reanimated` - see the prop table below), and the relevant wrappers pick them up automatically. Omit them and you still get working fallbacks: `BlurView` renders its solid (non-blur) look, `FadingScrollView` scrolls without its fade on iOS and Android, `BottomNavigation` simply skips nav-bar syncing, and `Dialog` treats `animatedStyle` as a no-op unless a reanimated module is injected.
 
 The exported Redux slice has no dependency on `@reduxjs/toolkit`: it works with RTK stores, vanilla Redux, or no Redux at all.
 
@@ -266,6 +266,7 @@ export default function App() {
 | `children` | `ReactNode` | |
 | `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
 | `expoBlur` | `ExpoBlurModule` | Injects `expo-blur` (`import * as ExpoBlur from 'expo-blur'`) so `<BlurView>` renders the real frosted-glass effect. Omit to always render its solid fallback. On Android, expo-blur only blurs when given a `blurTarget` and a `blurMethod` (`'dimezisBlurView'`, or `'dimezisBlurViewSdk31Plus'` on API 31+); without both, `<BlurView>` renders the solid fallback there too, rather than expo-blur's unblurred translucent tint. |
+| `maskedView` | `MaskedViewModule` | Injects `@react-native-masked-view/masked-view` (`import MaskedView from '@react-native-masked-view/masked-view'`) so `<FadingScrollView>` fades its content out above a pinned footer on iOS and Android. Omit to have it scroll without the fade there; web needs nothing. |
 | `fontFamily` | `string` | Applied to every Paper typography variant (`bodyLarge`, `headlineMedium`, `labelSmall`, ...) via `configureFonts`'s flat-config mode - each variant keeps its own MD3 fontSize/lineHeight/weight, only fontFamily changes. Omit to keep each platform's system font. |
 | `navigationBar` | `ExpoNavigationBarModule` | Injects `expo-navigation-bar` (`import * as ExpoNavigationBar from 'expo-navigation-bar'`) so the Android nav bar icon style auto-syncs with the theme while a `BottomNavigation` is mounted. Omit (and don't pass `onNavBarChange`) to skip nav bar syncing entirely. |
 | `onNavBarChange` | `(color: string, dark: boolean) => void` | Overrides the built-in nav bar sync: called on Android when the theme changes while a `BottomNavigation` is mounted, instead of the automatic `navigationBar`-driven icon-style sync |
@@ -514,6 +515,26 @@ function SettingsDialog({ visible }: { visible: boolean }) {
 
 `DialogProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `DialogProps` with the `blur` and `animatedStyle` fields. Use `PaperDialogProps` if you need the base paper type.
 
+### `FadingScrollView`
+
+A vertical `ScrollView` whose content fades to transparent over `fadeHeight` (default `SCROLL_FADE_HEIGHT`, 24) at each edge while there is more to scroll past it: at the bottom until the end is reached (the cue that rows continue below a pinned footer, such as a dialog's Done button), and at the top once scrolled down (never at rest, so a header at the top is never dimmed). It masks the content instead of painting over it, so whatever is behind it (a blurred `Dialog`/`BlurView` surface or a solid one, light or dark) stays one continuous surface. A second `BlurView` as a frosted footer leaves a seam instead: a blur nested inside a blurred card can't frost the card's own content.
+
+```tsx
+import MaskedView from '@react-native-masked-view/masked-view'
+import { Dialog, FadingScrollView, Provider } from '@rific/auto-paper'
+
+<Provider maskedView={MaskedView}>
+  <Dialog visible onDismiss={close}>
+    <Dialog.ScrollArea>
+      <FadingScrollView>{rows}</FadingScrollView>
+    </Dialog.ScrollArea>
+    <Dialog.Actions>{done}</Dialog.Actions>
+  </Dialog>
+</Provider>
+```
+
+On iOS and Android it needs `maskedView` injected into `Provider` (and React Native 0.77+, for the native gradient it masks with); without it, it scrolls with no fade. On web it uses a CSS `mask-image` and needs nothing (react-native-masked-view's web build doesn't mask). `style` goes on the outer box, so `flexGrow`/`flexShrink`/`alignSelf` work as on a plain `ScrollView`; every other prop, `onScroll`/`onLayout`/`onContentSizeChange` included, reaches the `ScrollView`.
+
 ### `IconButton`
 
 A thin wrapper around `react-native-paper`'s `IconButton` that adds a `variant` prop for applying theme-derived container and icon colors.

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import * as react_native_paper_lib_typescript_utils_forwardRef from 'react-native-paper/lib/typescript/utils/forwardRef';
 import * as react_native from 'react-native';
-import { View, ViewProps, StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
+import { View, ViewProps, StyleProp, ViewStyle, ScrollViewProps, TextInput as TextInput$1, StatusBarProps } from 'react-native';
 import * as react_native_paper from 'react-native-paper';
 import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps as ChipProps$1, DialogProps as DialogProps$1, DialogTitleProps, DialogContentProps, DialogActionsProps, DialogScrollAreaProps, FABProps, IconButtonProps as IconButtonProps$1, MenuProps as MenuProps$1, MenuItemProps, TextInputProps } from 'react-native-paper';
 export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, FABProps, ChipProps as PaperChipProps, DialogProps as PaperDialogProps, IconButtonProps as PaperIconButtonProps, MenuProps as PaperMenuProps, TextInputProps } from 'react-native-paper';
 import * as react from 'react';
-import react__default, { RefObject, ReactNode, ComponentType } from 'react';
+import react__default, { RefObject, ReactNode, ComponentType, ReactElement } from 'react';
 import * as _rific_core from '@rific/core';
 import { SettingsContextValue } from '@rific/core';
 
@@ -181,6 +181,18 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
+type MaskedViewModule = ComponentType<{
+    children?: ReactNode;
+    maskElement: ReactElement;
+    style?: StyleProp<ViewStyle>;
+}>;
+declare const SCROLL_FADE_HEIGHT = 24;
+type FadingScrollViewProps = Omit<ScrollViewProps, 'style'> & {
+    style?: StyleProp<ViewStyle>;
+    fadeHeight?: number;
+};
+declare function FadingScrollView({ style, fadeHeight, onScroll, onLayout, onContentSizeChange, scrollEventThrottle, children, ...rest }: FadingScrollViewProps): react.JSX.Element;
+
 type Props = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
@@ -292,6 +304,7 @@ type NavBarContextType = {
 declare const useNavBarContext: () => NavBarContextType;
 declare const useBlurModule: () => ExpoBlurModule | undefined;
 declare const useReanimatedModule: () => ReanimatedModule | undefined;
+declare const useMaskedViewModule: () => MaskedViewModule | undefined;
 type ProviderProps = {
     children: ReactNode;
     defaults?: PaperDefaults;
@@ -304,6 +317,8 @@ type ProviderProps = {
      * to keep each platform's system font (MD3's own default). */
     fontFamily?: string;
     initialValue?: Partial<ThemeSettings>;
+    /** Injects @react-native-masked-view/masked-view so `<FadingScrollView>` can fade its content out above a pinned footer on iOS and Android. Pass `import MaskedView from '@react-native-masked-view/masked-view'`; omit to have it scroll without the fade there (web never needs it). */
+    maskedView?: MaskedViewModule;
     /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
     navigationBar?: ExpoNavigationBarModule;
     onChange?: (settings: ThemeSettings) => void;
@@ -314,7 +329,7 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
@@ -393,4 +408,4 @@ declare const isDarkColor: (value: string) => boolean;
 
 declare const resolveSeedColor: (color: string | TriadicPalette) => string;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, FadingScrollView, type FadingScrollViewProps, HarmonyPicker, IconButton, type IconButtonProps, type MaskedViewModule, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SCROLL_FADE_HEIGHT, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useMaskedViewModule, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_native_paper_lib_typescript_utils_forwardRef from 'react-native-paper/lib/typescript/utils/forwardRef';
 import * as react_native from 'react-native';
-import { View, ViewProps, StyleProp, ViewStyle, TextInput as TextInput$1, StatusBarProps } from 'react-native';
+import { View, ViewProps, StyleProp, ViewStyle, ScrollViewProps, TextInput as TextInput$1, StatusBarProps } from 'react-native';
 import * as react_native_paper from 'react-native-paper';
 import { AppbarHeaderProps, MD3Theme, BottomNavigationRoute, BottomNavigationProps, BottomNavigation as BottomNavigation$1, ButtonProps, ChipProps as ChipProps$1, DialogProps as DialogProps$1, DialogTitleProps, DialogContentProps, DialogActionsProps, DialogScrollAreaProps, FABProps, IconButtonProps as IconButtonProps$1, MenuProps as MenuProps$1, MenuItemProps, TextInputProps } from 'react-native-paper';
 export { AppbarHeaderProps, BottomNavigationProps, BottomNavigationRoute, ButtonProps, FABProps, ChipProps as PaperChipProps, DialogProps as PaperDialogProps, IconButtonProps as PaperIconButtonProps, MenuProps as PaperMenuProps, TextInputProps } from 'react-native-paper';
 import * as react from 'react';
-import react__default, { RefObject, ReactNode, ComponentType } from 'react';
+import react__default, { RefObject, ReactNode, ComponentType, ReactElement } from 'react';
 import * as _rific_core from '@rific/core';
 import { SettingsContextValue } from '@rific/core';
 
@@ -181,6 +181,18 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
+type MaskedViewModule = ComponentType<{
+    children?: ReactNode;
+    maskElement: ReactElement;
+    style?: StyleProp<ViewStyle>;
+}>;
+declare const SCROLL_FADE_HEIGHT = 24;
+type FadingScrollViewProps = Omit<ScrollViewProps, 'style'> & {
+    style?: StyleProp<ViewStyle>;
+    fadeHeight?: number;
+};
+declare function FadingScrollView({ style, fadeHeight, onScroll, onLayout, onContentSizeChange, scrollEventThrottle, children, ...rest }: FadingScrollViewProps): react.JSX.Element;
+
 type Props = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
@@ -292,6 +304,7 @@ type NavBarContextType = {
 declare const useNavBarContext: () => NavBarContextType;
 declare const useBlurModule: () => ExpoBlurModule | undefined;
 declare const useReanimatedModule: () => ReanimatedModule | undefined;
+declare const useMaskedViewModule: () => MaskedViewModule | undefined;
 type ProviderProps = {
     children: ReactNode;
     defaults?: PaperDefaults;
@@ -304,6 +317,8 @@ type ProviderProps = {
      * to keep each platform's system font (MD3's own default). */
     fontFamily?: string;
     initialValue?: Partial<ThemeSettings>;
+    /** Injects @react-native-masked-view/masked-view so `<FadingScrollView>` can fade its content out above a pinned footer on iOS and Android. Pass `import MaskedView from '@react-native-masked-view/masked-view'`; omit to have it scroll without the fade there (web never needs it). */
+    maskedView?: MaskedViewModule;
     /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
     navigationBar?: ExpoNavigationBarModule;
     onChange?: (settings: ThemeSettings) => void;
@@ -314,7 +329,7 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
@@ -393,4 +408,4 @@ declare const isDarkColor: (value: string) => boolean;
 
 declare const resolveSeedColor: (color: string | TriadicPalette) => string;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, AutoAppearancePicker, AutoPalettePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, FadingScrollView, type FadingScrollViewProps, HarmonyPicker, IconButton, type IconButtonProps, type MaskedViewModule, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SCROLL_FADE_HEIGHT, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeBridgeProps, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, resolveSeedColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useMaskedViewModule, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeBridgeProps, useThemeSettings };

package/dist/index.js

@@ -41,11 +41,13 @@ __export(index_exports, {
   ColorPicker: () => ColorPicker,
   Dialog: () => Dialog,
   FAB: () => FAB,
+  FadingScrollView: () => FadingScrollView,
   HarmonyPicker: () => HarmonyPicker,
   IconButton: () => IconButton,
   Menu: () => Menu,
   PalettePicker: () => PalettePicker,
   Provider: () => Provider,
+  SCROLL_FADE_HEIGHT: () => SCROLL_FADE_HEIGHT,
   SEMANTIC_BASE_COLORS: () => SEMANTIC_BASE_COLORS,
   TextInput: () => TextInput,
   ThemeSettingsContext: () => ThemeSettingsContext,
@@ -73,6 +75,7 @@ __export(index_exports, {
   useBlur: () => useBlur,
   useBlurModule: () => useBlurModule,
   useComputedTheme: () => useComputedTheme,
+  useMaskedViewModule: () => useMaskedViewModule,
   useNavBarContext: () => useNavBarContext,
   usePaperDefaults: () => usePaperDefaults,
   useReanimatedModule: () => useReanimatedModule,
@@ -684,11 +687,13 @@ var BlurModuleContext = (0, import_react5.createContext)(void 0);
 var useBlurModule = () => (0, import_react5.useContext)(BlurModuleContext);
 var ReanimatedModuleContext = (0, import_react5.createContext)(void 0);
 var useReanimatedModule = () => (0, import_react5.useContext)(ReanimatedModuleContext);
-function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeProviderBody, { defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
+var MaskedViewModuleContext = (0, import_react5.createContext)(void 0);
+var useMaskedViewModule = () => (0, import_react5.useContext)(MaskedViewModuleContext);
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
 }
 var ThemeSettingsProvider = themeSettingsProvider;
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const { settings } = useThemeSettingsInternal();
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
   const theme = (0, import_react5.useMemo)(() => {
@@ -706,7 +711,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigatio
   if (!theme) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper4.Provider, { theme, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) })
   ] });
 }
 var styles = import_react_native3.StyleSheet.create({
@@ -1038,59 +1043,141 @@ function FAB(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper13.FAB, { ...defaults.FAB, ...props });
 }
 
+// src/components/FadingScrollView.tsx
+var import_react11 = require("react");
+var import_react_native9 = require("react-native");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SCROLL_FADE_HEIGHT = 24;
+function FadingScrollView({ style, fadeHeight = SCROLL_FADE_HEIGHT, onScroll, onLayout, onContentSizeChange, scrollEventThrottle = 16, children, ...rest }) {
+  const MaskedView = useMaskedViewModule();
+  const sizes = (0, import_react11.useRef)({ viewport: 0, content: 0, offset: 0 });
+  const [edges, setEdges] = (0, import_react11.useState)(NO_EDGES);
+  const update = (0, import_react11.useCallback)(() => {
+    const { viewport, content, offset } = sizes.current;
+    const above = offset > 1;
+    const below = content - viewport - offset > 1;
+    setEdges((prev) => prev.above === above && prev.below === below ? prev : { above, below });
+  }, []);
+  const scroll = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_native9.ScrollView,
+    {
+      ...rest,
+      style: styles5.fill,
+      scrollEventThrottle,
+      onScroll: (e) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y;
+        update();
+        onScroll?.(e);
+      },
+      onLayout: (e) => {
+        sizes.current.viewport = e.nativeEvent.layout.height;
+        update();
+        onLayout?.(e);
+      },
+      onContentSizeChange: (width, height) => {
+        sizes.current.content = height;
+        update();
+        onContentSizeChange?.(width, height);
+      },
+      children
+    }
+  );
+  if (import_react_native9.Platform.OS === "web") return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: [styles5.box, style, (edges.above || edges.below) && webFadeStyle(fadeHeight, edges)], children: scroll });
+  if (!MaskedView) return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: [styles5.box, style], children: scroll });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    MaskedView,
+    {
+      style: [styles5.box, style],
+      maskElement: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native9.View, { style: styles5.fill, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: [{ height: fadeHeight }, edges.above ? FADE_IN_BAND : styles5.opaque] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: styles5.fillOpaque }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native9.View, { style: [{ height: fadeHeight }, edges.below ? FADE_OUT_BAND : styles5.opaque] })
+      ] }),
+      children: scroll
+    }
+  );
+}
+var FADE_IN_BAND = { experimental_backgroundImage: "linear-gradient(transparent, #000)" };
+var FADE_OUT_BAND = { experimental_backgroundImage: "linear-gradient(#000, transparent)" };
+var NO_EDGES = { above: false, below: false };
+function webFadeStyle(fadeHeight, edges) {
+  const top = edges.above ? `transparent 0, #000 ${fadeHeight}px` : "#000 0";
+  const bottom = edges.below ? `#000 calc(100% - ${fadeHeight}px), transparent 100%` : "#000 100%";
+  const mask = `linear-gradient(to bottom, ${top}, ${bottom})`;
+  return { maskImage: mask, WebkitMaskImage: mask };
+}
+var styles5 = import_react_native9.StyleSheet.create({
+  // A plain ScrollView's own flex defaults, so it sizes the same in its parent.
+  box: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  fill: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  fillOpaque: {
+    backgroundColor: "#000",
+    flexGrow: 1
+  },
+  opaque: {
+    backgroundColor: "#000"
+  }
+});
+
 // src/components/IconButton.tsx
 var import_react_native_paper14 = require("react-native-paper");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
   const { colors } = (0, import_react_native_paper14.useTheme)();
   const variantContainerColor = variant === "primary" ? colors.primaryContainer : variant === "secondary" ? colors.secondaryContainer : variant === "tertiary" ? colors.tertiaryContainer : variant === "surface" ? colors.surface : void 0;
   const variantIconColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
 // src/components/Menu.tsx
-var import_react11 = require("react");
-var import_react_native9 = require("react-native");
+var import_react12 = require("react");
+var import_react_native10 = require("react-native");
 var import_react_native_paper15 = require("react-native-paper");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ANIMATION_DURATION2 = 250;
-var EASING = import_react_native9.Easing.bezier(0.4, 0, 0.2, 1);
+var EASING = import_react_native10.Easing.bezier(0.4, 0, 0.2, 1);
 var DEFAULT_ELEVATION = 2;
 var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
 var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
-var AnimatedBlurView2 = import_react_native9.Animated.createAnimatedComponent(BlurView);
+var AnimatedBlurView2 = import_react_native10.Animated.createAnimatedComponent(BlurView);
 var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
   const { animation, roundness } = (0, import_react_native_paper15.useTheme)(themeOverrides);
-  const [opacity] = (0, import_react11.useState)(() => new import_react_native9.Animated.Value(0));
-  const [closing, setClosing] = (0, import_react11.useState)(false);
+  const [opacity] = (0, import_react12.useState)(() => new import_react_native10.Animated.Value(0));
+  const [closing, setClosing] = (0, import_react12.useState)(false);
   if (!visible && !closing) setClosing(true);
-  (0, import_react11.useEffect)(() => {
-    import_react_native9.Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
+  (0, import_react12.useEffect)(() => {
+    import_react_native10.Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
   }, [animation.scale, closing, opacity]);
   const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
 };
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  const web = import_react_native9.Platform.OS === "web";
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
+  const web = import_react_native10.Platform.OS === "web";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles6.content, web && styles6.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: import_react_native_paper15.Menu.Item
 });
-var styles5 = import_react_native9.StyleSheet.create({
+var styles6 = import_react_native10.StyleSheet.create({
   content: { backgroundColor: "transparent", paddingVertical: 0 },
   webSurface: { opacity: 1, shadowOpacity: 0 }
 });
 
 // src/components/TextInput.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TextInput = (0, import_react12.forwardRef)(function TextInput2(props, ref) {
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TextInput = (0, import_react13.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
@@ -1119,10 +1206,10 @@ var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
 // src/useThemeBridgeProps.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useThemeBridgeProps(props) {
   const { initialValue, onChange, onReady } = props;
-  return (0, import_react13.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+  return (0, import_react14.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
 }
 
 // src/utils/getThirdColor.ts
@@ -1219,11 +1306,13 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   ColorPicker,
   Dialog,
   FAB,
+  FadingScrollView,
   HarmonyPicker,
   IconButton,
   Menu,
   PalettePicker,
   Provider,
+  SCROLL_FADE_HEIGHT,
   SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
@@ -1251,6 +1340,7 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   useBlur,
   useBlurModule,
   useComputedTheme,
+  useMaskedViewModule,
   useNavBarContext,
   usePaperDefaults,
   useReanimatedModule,

package/dist/index.mjs

@@ -601,11 +601,13 @@ var BlurModuleContext = createContext2(void 0);
 var useBlurModule = () => useContext3(BlurModuleContext);
 var ReanimatedModuleContext = createContext2(void 0);
 var useReanimatedModule = () => useContext3(ReanimatedModuleContext);
-function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
-  return /* @__PURE__ */ jsx4(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ jsx4(ThemeProviderBody, { defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
+var MaskedViewModuleContext = createContext2(void 0);
+var useMaskedViewModule = () => useContext3(MaskedViewModuleContext);
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+  return /* @__PURE__ */ jsx4(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ jsx4(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style, children }) });
 }
 var ThemeSettingsProvider = themeSettingsProvider;
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const { settings } = useThemeSettingsInternal();
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
   const theme = useMemo(() => {
@@ -623,7 +625,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigatio
   if (!theme) return null;
   return /* @__PURE__ */ jsxs2(PaperProvider, { theme, children: [
     /* @__PURE__ */ jsx4(StatusBar2, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ jsx4(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx4(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx4(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx4(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx4(Portal.Host, { children: /* @__PURE__ */ jsx4(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) })
+    /* @__PURE__ */ jsx4(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx4(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx4(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx4(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx4(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ jsx4(Portal.Host, { children: /* @__PURE__ */ jsx4(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) })
   ] });
 }
 var styles = StyleSheet.create({
@@ -955,22 +957,104 @@ function FAB(props) {
   return /* @__PURE__ */ jsx14(PaperFAB, { ...defaults.FAB, ...props });
 }
 
+// src/components/FadingScrollView.tsx
+import { useCallback as useCallback2, useRef as useRef2, useState as useState6 } from "react";
+import { Platform as Platform4, ScrollView, StyleSheet as StyleSheet6, View as View6 } from "react-native";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var SCROLL_FADE_HEIGHT = 24;
+function FadingScrollView({ style, fadeHeight = SCROLL_FADE_HEIGHT, onScroll, onLayout, onContentSizeChange, scrollEventThrottle = 16, children, ...rest }) {
+  const MaskedView = useMaskedViewModule();
+  const sizes = useRef2({ viewport: 0, content: 0, offset: 0 });
+  const [edges, setEdges] = useState6(NO_EDGES);
+  const update = useCallback2(() => {
+    const { viewport, content, offset } = sizes.current;
+    const above = offset > 1;
+    const below = content - viewport - offset > 1;
+    setEdges((prev) => prev.above === above && prev.below === below ? prev : { above, below });
+  }, []);
+  const scroll = /* @__PURE__ */ jsx15(
+    ScrollView,
+    {
+      ...rest,
+      style: styles5.fill,
+      scrollEventThrottle,
+      onScroll: (e) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y;
+        update();
+        onScroll?.(e);
+      },
+      onLayout: (e) => {
+        sizes.current.viewport = e.nativeEvent.layout.height;
+        update();
+        onLayout?.(e);
+      },
+      onContentSizeChange: (width, height) => {
+        sizes.current.content = height;
+        update();
+        onContentSizeChange?.(width, height);
+      },
+      children
+    }
+  );
+  if (Platform4.OS === "web") return /* @__PURE__ */ jsx15(View6, { style: [styles5.box, style, (edges.above || edges.below) && webFadeStyle(fadeHeight, edges)], children: scroll });
+  if (!MaskedView) return /* @__PURE__ */ jsx15(View6, { style: [styles5.box, style], children: scroll });
+  return /* @__PURE__ */ jsx15(
+    MaskedView,
+    {
+      style: [styles5.box, style],
+      maskElement: /* @__PURE__ */ jsxs7(View6, { style: styles5.fill, children: [
+        /* @__PURE__ */ jsx15(View6, { style: [{ height: fadeHeight }, edges.above ? FADE_IN_BAND : styles5.opaque] }),
+        /* @__PURE__ */ jsx15(View6, { style: styles5.fillOpaque }),
+        /* @__PURE__ */ jsx15(View6, { style: [{ height: fadeHeight }, edges.below ? FADE_OUT_BAND : styles5.opaque] })
+      ] }),
+      children: scroll
+    }
+  );
+}
+var FADE_IN_BAND = { experimental_backgroundImage: "linear-gradient(transparent, #000)" };
+var FADE_OUT_BAND = { experimental_backgroundImage: "linear-gradient(#000, transparent)" };
+var NO_EDGES = { above: false, below: false };
+function webFadeStyle(fadeHeight, edges) {
+  const top = edges.above ? `transparent 0, #000 ${fadeHeight}px` : "#000 0";
+  const bottom = edges.below ? `#000 calc(100% - ${fadeHeight}px), transparent 100%` : "#000 100%";
+  const mask = `linear-gradient(to bottom, ${top}, ${bottom})`;
+  return { maskImage: mask, WebkitMaskImage: mask };
+}
+var styles5 = StyleSheet6.create({
+  // A plain ScrollView's own flex defaults, so it sizes the same in its parent.
+  box: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  fill: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  fillOpaque: {
+    backgroundColor: "#000",
+    flexGrow: 1
+  },
+  opaque: {
+    backgroundColor: "#000"
+  }
+});
+
 // src/components/IconButton.tsx
 import { IconButton as PaperIconButton, useTheme as useTheme8 } from "react-native-paper";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
   const { colors } = useTheme8();
   const variantContainerColor = variant === "primary" ? colors.primaryContainer : variant === "secondary" ? colors.secondaryContainer : variant === "tertiary" ? colors.tertiaryContainer : variant === "surface" ? colors.surface : void 0;
   const variantIconColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
-  return /* @__PURE__ */ jsx15(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
+  return /* @__PURE__ */ jsx16(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
 // src/components/Menu.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { Animated as Animated2, Easing as Easing2, Platform as Platform4, StyleSheet as StyleSheet6 } from "react-native";
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { Animated as Animated2, Easing as Easing2, Platform as Platform5, StyleSheet as StyleSheet7 } from "react-native";
 import { Menu as PaperMenu, useTheme as useTheme9 } from "react-native-paper";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var ANIMATION_DURATION2 = 250;
 var EASING = Easing2.bezier(0.4, 0, 0.2, 1);
 var DEFAULT_ELEVATION = 2;
@@ -979,24 +1063,24 @@ var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
 var AnimatedBlurView2 = Animated2.createAnimatedComponent(BlurView);
 var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
   const { animation, roundness } = useTheme9(themeOverrides);
-  const [opacity] = useState6(() => new Animated2.Value(0));
-  const [closing, setClosing] = useState6(false);
+  const [opacity] = useState7(() => new Animated2.Value(0));
+  const [closing, setClosing] = useState7(false);
   if (!visible && !closing) setClosing(true);
   useEffect5(() => {
     Animated2.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
   }, [animation.scale, closing, opacity]);
   const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
-  return /* @__PURE__ */ jsx16(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+  return /* @__PURE__ */ jsx17(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
 };
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  const web = Platform4.OS === "web";
-  return /* @__PURE__ */ jsx16(PaperMenu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ jsx16(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ jsx16(BlurView, { blur, children }) });
+  const web = Platform5.OS === "web";
+  return /* @__PURE__ */ jsx17(PaperMenu, { ...props, contentStyle: [styles6.content, web && styles6.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ jsx17(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ jsx17(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: PaperMenu.Item
 });
-var styles5 = StyleSheet6.create({
+var styles6 = StyleSheet7.create({
   content: { backgroundColor: "transparent", paddingVertical: 0 },
   webSurface: { opacity: 1, shadowOpacity: 0 }
 });
@@ -1004,10 +1088,10 @@ var styles5 = StyleSheet6.create({
 // src/components/TextInput.tsx
 import { forwardRef } from "react";
 import { TextInput as PaperTextInput } from "react-native-paper";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var TextInput = forwardRef(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ jsx17(PaperTextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ jsx18(PaperTextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
@@ -1135,11 +1219,13 @@ export {
   ColorPicker,
   Dialog,
   FAB,
+  FadingScrollView,
   HarmonyPicker,
   IconButton,
   Menu,
   PalettePicker,
   Provider,
+  SCROLL_FADE_HEIGHT,
   SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
@@ -1167,6 +1253,7 @@ export {
   useBlur,
   useBlurModule,
   useComputedTheme,
+  useMaskedViewModule,
   useNavBarContext,
   usePaperDefaults,
   useReanimatedModule,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.12.4",
+  "version": "0.13.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -71,6 +71,7 @@
     "@infinitetoken/eslint-config": "0.2.0",
     "@infinitetoken/jest-config": "^0.4.0",
     "@infinitetoken/tsconfig": "^0.5.0",
+    "@react-native-masked-view/masked-view": "^0.3.2",
     "@reduxjs/toolkit": "^2.0.0",
     "@rific/core": "^0.2.0",
     "@testing-library/dom": "^10.4.1",
@@ -94,6 +95,7 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
+    "@react-native-masked-view/masked-view": ">=0.3.0",
     "@rific/core": ">=0.1.1",
     "expo-blur": ">=56.0.0",
     "expo-navigation-bar": ">=56.0.0",
@@ -103,6 +105,9 @@
     "react-native-safe-area-context": "*"
   },
   "peerDependenciesMeta": {
+    "@react-native-masked-view/masked-view": {
+      "optional": true
+    },
     "expo-blur": {
       "optional": true
     },

package/src/ThemeProvider.tsx

@@ -4,6 +4,7 @@ import { configureFonts, Portal, Provider as PaperProvider } from 'react-native-
 
 import type { ExpoBlurModule } from './components/BlurView'
 import type { ReanimatedModule } from './components/Dialog'
+import type { MaskedViewModule } from './components/FadingScrollView'
 import type { ExpoNavigationBarModule } from './navigation-bar'
 import { type PaperDefaults, PaperDefaultsContext } from './PaperDefaultsContext'
 import { type ThemeSettings, themeSettingsProvider, useThemeSettingsInternal } from './ThemeSettingsContext'
@@ -24,6 +25,9 @@ export const useBlurModule = () => useContext(BlurModuleContext)
 const ReanimatedModuleContext = createContext<ReanimatedModule | undefined>(undefined)
 export const useReanimatedModule = () => useContext(ReanimatedModuleContext)
 
+const MaskedViewModuleContext = createContext<MaskedViewModule | undefined>(undefined)
+export const useMaskedViewModule = () => useContext(MaskedViewModuleContext)
+
 export type ProviderProps = {
   children: ReactNode
   defaults?: PaperDefaults
@@ -36,6 +40,8 @@ export type ProviderProps = {
    * to keep each platform's system font (MD3's own default). */
   fontFamily?: string
   initialValue?: Partial<ThemeSettings>
+  /** Injects @react-native-masked-view/masked-view so `<FadingScrollView>` can fade its content out above a pinned footer on iOS and Android. Pass `import MaskedView from '@react-native-masked-view/masked-view'`; omit to have it scroll without the fade there (web never needs it). */
+  maskedView?: MaskedViewModule
   /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
   navigationBar?: ExpoNavigationBarModule
   onChange?: (settings: ThemeSettings) => void
@@ -53,10 +59,10 @@ export type ProviderProps = {
 // wrapper for the settings half; ThemeProviderBody (an actual descendant, reached via
 // useThemeSettingsInternal()) does all the theme-computation/gating work the single combined
 // component used to do directly.
-export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
+export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
   return (
     <ThemeSettingsProvider initialValue={initialValue} onChange={onChange}>
-      <ThemeProviderBody defaults={defaults} expoBlur={expoBlur} fontFamily={fontFamily} navigationBar={navigationBar} onNavBarChange={onNavBarChange} onReady={onReady} reanimated={reanimated} statusBarProps={statusBarProps} style={style}>
+      <ThemeProviderBody defaults={defaults} expoBlur={expoBlur} fontFamily={fontFamily} maskedView={maskedView} navigationBar={navigationBar} onNavBarChange={onNavBarChange} onReady={onReady} reanimated={reanimated} statusBarProps={statusBarProps} style={style}>
         {children}
       </ThemeProviderBody>
     </ThemeSettingsProvider>
@@ -67,7 +73,7 @@ const ThemeSettingsProvider = themeSettingsProvider
 
 type ThemeProviderBodyProps = Omit<ProviderProps, 'initialValue' | 'onChange'>
 
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }: ThemeProviderBodyProps) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }: ThemeProviderBodyProps) {
   const { settings } = useThemeSettingsInternal()
 
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
@@ -99,17 +105,19 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigatio
         <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
           <BlurModuleContext.Provider value={expoBlur}>
             <ReanimatedModuleContext.Provider value={reanimated}>
-              {/* PaperProvider's own PortalHost sits above every context provided here, and Paper's
+              <MaskedViewModuleContext.Provider value={maskedView}>
+                {/* PaperProvider's own PortalHost sits above every context provided here, and Paper's
                   Portal only carries its theme and settings across, so anything rendered through a
                   Portal (this package's Dialog, Paper's Menu and Tooltip, or anything an app wraps
-                  in <Portal> itself) would otherwise lose expoBlur, reanimated, defaults and the nav
+                  in <Portal> itself) would otherwise lose expoBlur, reanimated, maskedView, defaults and the nav
                   bar hooks: Dialog/Menu's blur silently fell back to solid. This nested host is the
                   nearest one for every Portal under Provider, so their content mounts inside all of
                   these contexts instead. It wraps the styled View, not the other way round, so
                   portals still cover the full area regardless of `style`. */}
-              <Portal.Host>
-                <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
-              </Portal.Host>
+                <Portal.Host>
+                  <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+                </Portal.Host>
+              </MaskedViewModuleContext.Provider>
             </ReanimatedModuleContext.Provider>
           </BlurModuleContext.Provider>
         </NavBarContext.Provider>

package/src/components/FadingScrollView.tsx

@@ -0,0 +1,127 @@
+import { type ComponentType, type ReactElement, type ReactNode, useCallback, useRef, useState } from 'react'
+import { type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent, Platform, ScrollView, type ScrollViewProps, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+
+import { useMaskedViewModule } from '../ThemeProvider'
+
+// Minimal local shape of @react-native-masked-view/masked-view's default export, the same way
+// ExpoBlurModule stands in for expo-blur: the optional peer's real types are never imported, so a
+// consumer that never installed it doesn't need them. <Provider maskedView={MaskedView}> hands it in.
+export type MaskedViewModule = ComponentType<{ children?: ReactNode; maskElement: ReactElement; style?: StyleProp<ViewStyle> }>
+
+// How far in from each edge a FadingScrollView's content fades out while there is more past that edge.
+export const SCROLL_FADE_HEIGHT = 24
+
+export type FadingScrollViewProps = Omit<ScrollViewProps, 'style'> & {
+  // Placed on the outer box (the flex item), so a caller's flexGrow/flexShrink/alignSelf work as they
+  // did on a plain ScrollView.
+  style?: StyleProp<ViewStyle>
+  fadeHeight?: number
+}
+
+// A vertical ScrollView whose content fades to transparent along an edge while there is more to scroll
+// past it: at the bottom, the cue that rows continue below a pinned footer, like a dialog's Done
+// button; at the top, the same once rows have scrolled up past the edge (Jay, 2026-10-15: one treatment
+// at both ends instead of a hard cut at the top). It masks
+// the content itself rather than painting anything over it, so whatever is behind (a blurred
+// Dialog/BlurView surface, a plain one, light or dark) shows through unchanged: no band, no seam. (A
+// second BlurView as a frosted footer was tried in @tastic/hud first and left a seam on iOS and web: a
+// blur nested in a blurred card can't frost the card's own content.) Once the end is reached the fade
+// goes away, and the top fade only shows once scrolled down, so neither the last row nor the first
+// (a dialog's header, say) is ever dimmed at rest.
+//
+// iOS/Android: a MaskedView (from <Provider maskedView={...}>) whose top and bottom bands are React
+// Native's native linear gradient (experimental_backgroundImage). Without one passed in, content just scrolls
+// with no fade. Web: react-native-masked-view's web build renders only the mask element (it doesn't
+// mask), so the outer box gets a CSS mask-image instead, which react-native-web passes through; no
+// module needed there.
+export function FadingScrollView({ style, fadeHeight = SCROLL_FADE_HEIGHT, onScroll, onLayout, onContentSizeChange, scrollEventThrottle = 16, children, ...rest }: FadingScrollViewProps) {
+  const MaskedView = useMaskedViewModule()
+  // Sizes live in a ref and only the yes/no answers are state, so scrolling re-renders nothing until a
+  // fade has to appear or go.
+  const sizes = useRef({ viewport: 0, content: 0, offset: 0 })
+  const [edges, setEdges] = useState(NO_EDGES)
+  const update = useCallback(() => {
+    const { viewport, content, offset } = sizes.current
+    const above = offset > 1
+    const below = content - viewport - offset > 1
+    setEdges((prev) => (prev.above === above && prev.below === below ? prev : { above, below }))
+  }, [])
+
+  const scroll = (
+    <ScrollView
+      {...rest}
+      style={styles.fill}
+      scrollEventThrottle={scrollEventThrottle}
+      onScroll={(e: NativeSyntheticEvent<NativeScrollEvent>) => {
+        sizes.current.offset = e.nativeEvent.contentOffset.y
+        update()
+        onScroll?.(e)
+      }}
+      onLayout={(e: LayoutChangeEvent) => {
+        sizes.current.viewport = e.nativeEvent.layout.height
+        update()
+        onLayout?.(e)
+      }}
+      onContentSizeChange={(width: number, height: number) => {
+        sizes.current.content = height
+        update()
+        onContentSizeChange?.(width, height)
+      }}
+    >
+      {children}
+    </ScrollView>
+  )
+
+  if (Platform.OS === 'web') return <View style={[styles.box, style, (edges.above || edges.below) && webFadeStyle(fadeHeight, edges)]}>{scroll}</View>
+  if (!MaskedView) return <View style={[styles.box, style]}>{scroll}</View>
+
+  return (
+    <MaskedView
+      style={[styles.box, style]}
+      maskElement={
+        <View style={styles.fill}>
+          <View style={[{ height: fadeHeight }, edges.above ? FADE_IN_BAND : styles.opaque]} />
+          <View style={styles.fillOpaque} />
+          <View style={[{ height: fadeHeight }, edges.below ? FADE_OUT_BAND : styles.opaque]} />
+        </View>
+      }
+    >
+      {scroll}
+    </MaskedView>
+  )
+}
+
+// React Native's native linear gradient (0.77+, the New Architecture; the fleet's apps are on 0.86), not
+// in this package's own 0.76 dev types, hence the cast. A mask's alpha is what shows: opaque keeps the
+// content, transparent hides it.
+const FADE_IN_BAND = { experimental_backgroundImage: 'linear-gradient(transparent, #000)' } as unknown as ViewStyle
+const FADE_OUT_BAND = { experimental_backgroundImage: 'linear-gradient(#000, transparent)' } as unknown as ViewStyle
+
+const NO_EDGES = { above: false, below: false }
+
+// mask-image isn't in React Native's style types, but react-native-web passes it to the DOM as is.
+function webFadeStyle(fadeHeight: number, edges: { above: boolean; below: boolean }): ViewStyle {
+  const top = edges.above ? `transparent 0, #000 ${fadeHeight}px` : '#000 0'
+  const bottom = edges.below ? `#000 calc(100% - ${fadeHeight}px), transparent 100%` : '#000 100%'
+  const mask = `linear-gradient(to bottom, ${top}, ${bottom})`
+  return { maskImage: mask, WebkitMaskImage: mask } as unknown as ViewStyle
+}
+
+const styles = StyleSheet.create({
+  // A plain ScrollView's own flex defaults, so it sizes the same in its parent.
+  box: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  fill: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  fillOpaque: {
+    backgroundColor: '#000',
+    flexGrow: 1
+  },
+  opaque: {
+    backgroundColor: '#000'
+  }
+})

package/src/index.ts

@@ -15,6 +15,8 @@ export { ColorPicker, defaultColors } from './components/ColorPicker'
 export type { DialogProps, ReanimatedModule } from './components/Dialog'
 export { Dialog } from './components/Dialog'
 export { FAB } from './components/FAB'
+export type { FadingScrollViewProps, MaskedViewModule } from './components/FadingScrollView'
+export { FadingScrollView, SCROLL_FADE_HEIGHT } from './components/FadingScrollView'
 export { HarmonyPicker } from './components/HarmonyPicker'
 export type { IconButtonProps } from './components/IconButton'
 export { IconButton } from './components/IconButton'
@@ -29,7 +31,7 @@ export { usePaperDefaults } from './PaperDefaultsContext'
 export type { ThemeState } from './redux/themeSlice'
 export { createThemeReducer, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer } from './redux/themeSlice'
 export type { ProviderProps } from './ThemeProvider'
-export { Provider, useBlurModule, useNavBarContext, useReanimatedModule } from './ThemeProvider'
+export { Provider, useBlurModule, useMaskedViewModule, useNavBarContext, useReanimatedModule } from './ThemeProvider'
 export type { ThemeSettings, ThemeSettingsContextType } from './ThemeSettingsContext'
 export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
 export type { AutoPaperTheme, SemanticColorRoles, ThemeAppearance } from './useComputedTheme'