@rific/scroll-view 0.6.1 → 0.6.2

package/dist/index.d.mts

@@ -6,7 +6,7 @@ import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
 import * as react_native_reanimated from 'react-native-reanimated';
 import { SharedValue } from 'react-native-reanimated';
 
-type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress'> & {
+type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress' | 'children'> & {
     label?: ReactNode;
 };
 
@@ -122,7 +122,7 @@ declare const ScrollView: typeof ScrollViewInner;
 type ScrollViewContextType = {
     blur: boolean;
     footerAboveKeyboard: boolean;
-    footerHeight: number;
+    footerHeight: number | null;
     footerHeightShared: SharedValue<number>;
     footerFixed: boolean;
     footerOffset: SharedValue<number>;
@@ -141,7 +141,7 @@ type ScrollViewContextType = {
     progressing: boolean;
     scrollHeight: number;
     scrollPosition: SharedValue<number>;
-    setFooterHeight: (h: number) => void;
+    setFooterHeight: (h: number | null) => void;
     setHeaderHeight: (h: number | null) => void;
     setProgress: (p: number | null) => void;
     setProgressing: (b: boolean) => void;
@@ -158,7 +158,7 @@ declare const ScrollViewFooter: ({ children, style }: ScrollViewFooterProps) =>
 type ScrollViewHeaderProps = {
     actionSize?: number;
     actionStyle?: ViewStyle;
-    backAction?: () => void;
+    backAction?: (() => void) | ReactNode;
     backActionAccessibilityLabel?: string;
     backActionFixed?: boolean;
     caption?: string;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
 import * as react_native_reanimated from 'react-native-reanimated';
 import { SharedValue } from 'react-native-reanimated';
 
-type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress'> & {
+type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress' | 'children'> & {
     label?: ReactNode;
 };
 
@@ -122,7 +122,7 @@ declare const ScrollView: typeof ScrollViewInner;
 type ScrollViewContextType = {
     blur: boolean;
     footerAboveKeyboard: boolean;
-    footerHeight: number;
+    footerHeight: number | null;
     footerHeightShared: SharedValue<number>;
     footerFixed: boolean;
     footerOffset: SharedValue<number>;
@@ -141,7 +141,7 @@ type ScrollViewContextType = {
     progressing: boolean;
     scrollHeight: number;
     scrollPosition: SharedValue<number>;
-    setFooterHeight: (h: number) => void;
+    setFooterHeight: (h: number | null) => void;
     setHeaderHeight: (h: number | null) => void;
     setProgress: (p: number | null) => void;
     setProgressing: (b: boolean) => void;
@@ -158,7 +158,7 @@ declare const ScrollViewFooter: ({ children, style }: ScrollViewFooterProps) =>
 type ScrollViewHeaderProps = {
     actionSize?: number;
     actionStyle?: ViewStyle;
-    backAction?: () => void;
+    backAction?: (() => void) | ReactNode;
     backActionAccessibilityLabel?: string;
     backActionFixed?: boolean;
     caption?: string;

package/dist/index.js

@@ -64,15 +64,18 @@ var RefreshControl = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(impo
 // src/internal/ScrollViewChip.tsx
 var import_auto_paper = require("@rific/auto-paper");
 var import_react_native2 = require("react-native");
+var import_react_native_paper = require("react-native-paper");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }) => {
-  const { label, style: chipStyle, ...restChipProps } = chipProps ?? {};
+  const { colors } = (0, import_react_native_paper.useTheme)();
+  const { label, selectedColor, style: chipStyle, ...restChipProps } = chipProps ?? {};
   const handlePress = onChipPress ? () => {
     onPress();
     onChipPress();
   } : onPress;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_reanimated.default.View, { style: [styles.chip, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper.Chip, { compact: true, ...restChipProps, icon: isHorizontal ? "chevron-left" : "chevron-up", onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
+  const iconColor = selectedColor ?? (restChipProps.mode === "outlined" ? colors.onSurfaceVariant : colors.onSecondaryContainer);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_reanimated.default.View, { style: [styles.chip, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper.Chip, { compact: true, selectedColor, ...restChipProps, avatar: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: isHorizontal ? "chevron-left" : "chevron-up", size: 18, color: iconColor }), onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
 };
 var styles = import_react_native2.StyleSheet.create({
   chip: { alignItems: "center", left: 0, position: "absolute", right: 0, zIndex: 3 },
@@ -88,7 +91,7 @@ var import_react = require("react");
 var ScrollViewContext = (0, import_react.createContext)({
   blur: true,
   footerAboveKeyboard: false,
-  footerHeight: 0,
+  footerHeight: null,
   footerHeightShared: null,
   footerFixed: false,
   footerOffset: null,
@@ -556,7 +559,7 @@ var import_react_native_gesture_handler2 = require("react-native-gesture-handler
 var import_auto_paper2 = require("@rific/auto-paper");
 var import_react7 = require("react");
 var import_react_native7 = require("react-native");
-var import_react_native_paper = require("react-native-paper");
+var import_react_native_paper2 = require("react-native-paper");
 var import_react_native_reanimated7 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -586,7 +589,7 @@ var HorizontalDots = ({ total }) => {
   const { blur, footerHeightShared, scrollPosition } = (0, import_react7.useContext)(ScrollViewContext);
   const { width } = (0, import_react_native7.useWindowDimensions)();
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const theme = (0, import_react_native_paper.useTheme)();
+  const theme = (0, import_react_native_paper2.useTheme)();
   const insetsBottom = insets.bottom;
   const activeColor = theme.colors.primary;
   const inactiveColor = theme.colors.outlineVariant;
@@ -880,12 +883,12 @@ var FlatList = (0, import_react9.memo)(FlatListInner);
 // src/PullSearch.tsx
 var import_react10 = require("react");
 var import_react_native9 = require("react-native");
-var import_react_native_paper2 = require("react-native-paper");
+var import_react_native_paper3 = require("react-native-paper");
 var import_react_native_reanimated9 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce, onChangeText, onHeightChange, placeholder, value: propValue }, ref) {
   const { headerHeight, scrollPosition } = (0, import_react10.useContext)(ScrollViewContext);
-  const theme = (0, import_react_native_paper2.useTheme)();
+  const theme = (0, import_react_native_paper3.useTheme)();
   const inputRef = (0, import_react10.useRef)(null);
   const [barHeight, setBarHeight] = (0, import_react10.useState)(0);
   const [value, setValue] = (0, import_react10.useState)(propValue ?? "");
@@ -943,7 +946,7 @@ var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce,
     const hideY = -h + barHeight;
     return { opacity: (0, import_react_native_reanimated9.interpolate)(scrollPosition.value, [showY, hideY], [1, 0], import_react_native_reanimated9.Extrapolation.CLAMP) };
   }, [barHeight, headerHeight, scrollPosition]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated9.default.View, { onLayout: handleLayout, style: [styles5.container, animatedStyle], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper2.Searchbar, { autoCorrect: false, onChangeText: (text) => setValue((text || "").trimStart()), onClearIconPress: handleClear, placeholder, placeholderTextColor: theme.colors.onSurfaceVariant, ref: inputRef, spellCheck: false, style: styles5.input, value }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated9.default.View, { onLayout: handleLayout, style: [styles5.container, animatedStyle], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper3.Searchbar, { autoCorrect: false, onChangeText: (text) => setValue((text || "").trimStart()), onClearIconPress: handleClear, placeholder, placeholderTextColor: theme.colors.onSurfaceVariant, ref: inputRef, spellCheck: false, style: styles5.input, value }) });
 });
 var styles5 = import_react_native9.StyleSheet.create({
   container: { paddingVertical: 8 },
@@ -1058,14 +1061,20 @@ var import_react13 = require("react");
 var import_react_native11 = require("react-native");
 var import_react_native_reanimated11 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime8 = (
+  // bottom: tabBarHeight (not the styles.footer default of 0) - a consuming app's own persistent
+  // tab bar (a fixture outside this package's header/footer concepts entirely, same as
+  // useScrollList's content-inset reservation) sits below this at the true screen bottom, so this
+  // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
+  require("react/jsx-runtime")
+);
 var ScrollViewFooter = ({ children, style }) => {
-  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = (0, import_react13.useContext)(ScrollViewContext);
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = (0, import_react13.useContext)(ScrollViewContext);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const keyboardHeight = useKeyboardInset();
   (0, import_react13.useEffect)(
     () => () => {
-      setFooterHeight(0);
+      setFooterHeight(null);
     },
     [setFooterHeight]
   );
@@ -1081,17 +1090,17 @@ var ScrollViewFooter = ({ children, style }) => {
     if (snapBackFooterShared.value) return { transform: [{ translateY: footerOffset.value }] };
     const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
-    return { transform: [{ translateY: Math.min(effective, footerHeight) }] };
+    return { transform: [{ translateY: Math.min(effective, footerHeight ?? 0) }] };
   }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset]);
   const containerPaddingBottom = footerFixed && footerAboveKeyboard ? keyboardHeight : 0;
   const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_reanimated11.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { paddingBottom: containerPaddingBottom }, footerStyle], children: [
-    footerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper3.BlurView, { blur, style: import_react_native11.StyleSheet.absoluteFill }),
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_reanimated11.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle], children: [
+    (footerHeight ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper3.BlurView, { blur, style: import_react_native11.StyleSheet.absoluteFill }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: [styles6.row, { paddingBottom: rowPaddingBottom }, style], children })
   ] });
 };
 var styles6 = import_react_native11.StyleSheet.create({
-  footer: { bottom: 0, left: 0, position: "absolute", right: 0, zIndex: 2 },
+  footer: { left: 0, position: "absolute", right: 0, zIndex: 2 },
   row: { alignItems: "center", flexDirection: "row", zIndex: 1 }
 });
 
@@ -1099,17 +1108,17 @@ var styles6 = import_react_native11.StyleSheet.create({
 var import_auto_paper4 = require("@rific/auto-paper");
 var import_react14 = require("react");
 var import_react_native12 = require("react-native");
-var import_react_native_paper3 = require("react-native-paper");
+var import_react_native_paper4 = require("react-native-paper");
 var import_react_native_reanimated12 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper4.BlurView, { blur: true, style: import_react_native12.StyleSheet.absoluteFill }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Surface, { style: import_react_native12.StyleSheet.absoluteFill, elevation: 1, children: null }) });
+var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper4.BlurView, { blur: true, style: import_react_native12.StyleSheet.absoluteFill }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Surface, { style: import_react_native12.StyleSheet.absoluteFill, elevation: 1, children: null }) });
 var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAccessibilityLabel, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset = true, trailingAction, trailingActionFixed = true }) => {
   const { blur, headerHeight, headerFixed, headerHeightShared, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = (0, import_react14.useContext)(ScrollViewContext);
   const { settings } = (0, import_react14.useContext)(ScrollViewSettingsContext);
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed;
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
-  const theme = (0, import_react_native_paper3.useTheme)();
+  const theme = (0, import_react_native_paper4.useTheme)();
   const top = topInset ? insets.top : 0;
   const measuredShared = (0, import_react_native_reanimated12.useSharedValue)(false);
   const handleLayout = ({
@@ -1161,13 +1170,13 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
       ] }) }),
       !blur && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [styles7.divider, { backgroundColor: theme.colors.outlineVariant }] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated12.default.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated12.default.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
     backAction && (effectiveBackActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated12.default.View, { style: leadingStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated12.default.View, { style: [leadingStyle, translateStyle], children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] })),
     trailingAction && (trailingActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native12.View, { style: trailingStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
@@ -1207,7 +1216,7 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader;
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter;
   const [headerHeight, setHeaderHeightState] = (0, import_react15.useState)(null);
-  const [footerHeight, setFooterHeightState] = (0, import_react15.useState)(0);
+  const [footerHeight, setFooterHeightState] = (0, import_react15.useState)(null);
   const [progress, setProgress] = (0, import_react15.useState)(null);
   const [progressing, setProgressing] = (0, import_react15.useState)(false);
   const scrollPosition = (0, import_react_native_reanimated13.useSharedValue)(0);
@@ -1247,12 +1256,13 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   }, [headerHeight]);
   const setFooterHeight = (0, import_react15.useCallback)(
     (h) => {
+      if (h === 0 && footerHeight) return;
       setFooterHeightState(h);
-      footerHeightShared.value = h;
+      footerHeightShared.value = h ?? 0;
     },
-    [footerHeightShared]
+    [footerHeight, footerHeightShared]
   );
-  const scrollHeight = (0, import_react15.useMemo)(() => import_react_native13.Dimensions.get("window").height - (headerHeight ?? 0) - footerHeight, [headerHeight, footerHeight]);
+  const scrollHeight = (0, import_react15.useMemo)(() => import_react_native13.Dimensions.get("window").height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight]);
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed);
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed);
   const value = (0, import_react15.useMemo)(() => ({ blur: effectiveBlur, footerAboveKeyboard, footerHeight, footerHeightShared, footerFixed: effectiveFooterFixed, footerOffset, headerHeight, headerHeightShared, headerFixed: effectiveHeaderFixed, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, setProgress, setProgressing, snapBackFooterShared, snapBackHeaderShared, tabBarHeight }), [effectiveBlur, footerAboveKeyboard, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, tabBarHeight]);

package/dist/index.mjs

@@ -12,15 +12,18 @@ var RefreshControl = (props) => /* @__PURE__ */ jsx(RNRefreshControl, { refreshi
 // src/internal/ScrollViewChip.tsx
 import { Chip } from "@rific/auto-paper";
 import { StyleSheet } from "react-native";
+import { Icon, useTheme } from "react-native-paper";
 import Animated from "react-native-reanimated";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }) => {
-  const { label, style: chipStyle, ...restChipProps } = chipProps ?? {};
+  const { colors } = useTheme();
+  const { label, selectedColor, style: chipStyle, ...restChipProps } = chipProps ?? {};
   const handlePress = onChipPress ? () => {
     onPress();
     onChipPress();
   } : onPress;
-  return /* @__PURE__ */ jsx2(Animated.View, { style: [styles.chip, style], children: /* @__PURE__ */ jsx2(Chip, { compact: true, ...restChipProps, icon: isHorizontal ? "chevron-left" : "chevron-up", onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
+  const iconColor = selectedColor ?? (restChipProps.mode === "outlined" ? colors.onSurfaceVariant : colors.onSecondaryContainer);
+  return /* @__PURE__ */ jsx2(Animated.View, { style: [styles.chip, style], children: /* @__PURE__ */ jsx2(Chip, { compact: true, selectedColor, ...restChipProps, avatar: /* @__PURE__ */ jsx2(Icon, { source: isHorizontal ? "chevron-left" : "chevron-up", size: 18, color: iconColor }), onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
 };
 var styles = StyleSheet.create({
   chip: { alignItems: "center", left: 0, position: "absolute", right: 0, zIndex: 3 },
@@ -36,7 +39,7 @@ import { createContext } from "react";
 var ScrollViewContext = createContext({
   blur: true,
   footerAboveKeyboard: false,
-  footerHeight: 0,
+  footerHeight: null,
   footerHeightShared: null,
   footerFixed: false,
   footerOffset: null,
@@ -504,7 +507,7 @@ import { Gesture as Gesture2, GestureDetector as GestureDetector2 } from "react-
 import { BlurView } from "@rific/auto-paper";
 import { useContext as useContext5 } from "react";
 import { StyleSheet as StyleSheet3, useWindowDimensions, View as View2 } from "react-native";
-import { useTheme } from "react-native-paper";
+import { useTheme as useTheme2 } from "react-native-paper";
 import Animated2, { interpolateColor, useAnimatedStyle as useAnimatedStyle2 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -534,7 +537,7 @@ var HorizontalDots = ({ total }) => {
   const { blur, footerHeightShared, scrollPosition } = useContext5(ScrollViewContext);
   const { width } = useWindowDimensions();
   const insets = useSafeAreaInsets2();
-  const theme = useTheme();
+  const theme = useTheme2();
   const insetsBottom = insets.bottom;
   const activeColor = theme.colors.primary;
   const inactiveColor = theme.colors.outlineVariant;
@@ -828,12 +831,12 @@ var FlatList = memo2(FlatListInner);
 // src/PullSearch.tsx
 import { forwardRef, useCallback as useCallback5, useContext as useContext8, useEffect as useEffect3, useImperativeHandle, useRef as useRef5, useState as useState4 } from "react";
 import { StyleSheet as StyleSheet4 } from "react-native";
-import { Searchbar, useTheme as useTheme2 } from "react-native-paper";
+import { Searchbar, useTheme as useTheme3 } from "react-native-paper";
 import Animated3, { Extrapolation, interpolate, runOnJS as runOnJS3, useAnimatedReaction, useAnimatedStyle as useAnimatedStyle3 } from "react-native-reanimated";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var PullSearch = forwardRef(function PullSearch2({ debounce, onChangeText, onHeightChange, placeholder, value: propValue }, ref) {
   const { headerHeight, scrollPosition } = useContext8(ScrollViewContext);
-  const theme = useTheme2();
+  const theme = useTheme3();
   const inputRef = useRef5(null);
   const [barHeight, setBarHeight] = useState4(0);
   const [value, setValue] = useState4(propValue ?? "");
@@ -1008,12 +1011,12 @@ import Animated5, { useAnimatedStyle as useAnimatedStyle4 } from "react-native-r
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ScrollViewFooter = ({ children, style }) => {
-  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext10(ScrollViewContext);
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = useContext10(ScrollViewContext);
   const insets = useSafeAreaInsets3();
   const keyboardHeight = useKeyboardInset();
   useEffect4(
     () => () => {
-      setFooterHeight(0);
+      setFooterHeight(null);
     },
     [setFooterHeight]
   );
@@ -1029,17 +1032,23 @@ var ScrollViewFooter = ({ children, style }) => {
     if (snapBackFooterShared.value) return { transform: [{ translateY: footerOffset.value }] };
     const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
-    return { transform: [{ translateY: Math.min(effective, footerHeight) }] };
+    return { transform: [{ translateY: Math.min(effective, footerHeight ?? 0) }] };
   }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset]);
   const containerPaddingBottom = footerFixed && footerAboveKeyboard ? keyboardHeight : 0;
   const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom;
-  return /* @__PURE__ */ jsxs5(Animated5.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { paddingBottom: containerPaddingBottom }, footerStyle], children: [
-    footerHeight > 0 && /* @__PURE__ */ jsx8(BlurView2, { blur, style: StyleSheet5.absoluteFill }),
-    /* @__PURE__ */ jsx8(View5, { style: [styles6.row, { paddingBottom: rowPaddingBottom }, style], children })
-  ] });
+  return (
+    // bottom: tabBarHeight (not the styles.footer default of 0) - a consuming app's own persistent
+    // tab bar (a fixture outside this package's header/footer concepts entirely, same as
+    // useScrollList's content-inset reservation) sits below this at the true screen bottom, so this
+    // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
+    /* @__PURE__ */ jsxs5(Animated5.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle], children: [
+      (footerHeight ?? 0) > 0 && /* @__PURE__ */ jsx8(BlurView2, { blur, style: StyleSheet5.absoluteFill }),
+      /* @__PURE__ */ jsx8(View5, { style: [styles6.row, { paddingBottom: rowPaddingBottom }, style], children })
+    ] })
+  );
 };
 var styles6 = StyleSheet5.create({
-  footer: { bottom: 0, left: 0, position: "absolute", right: 0, zIndex: 2 },
+  footer: { left: 0, position: "absolute", right: 0, zIndex: 2 },
   row: { alignItems: "center", flexDirection: "row", zIndex: 1 }
 });
 
@@ -1047,7 +1056,7 @@ var styles6 = StyleSheet5.create({
 import { BlurView as BlurView3 } from "@rific/auto-paper";
 import { useContext as useContext11 } from "react";
 import { StyleSheet as StyleSheet6, Text, View as View6 } from "react-native";
-import { Appbar, ProgressBar, Surface, useTheme as useTheme3 } from "react-native-paper";
+import { Appbar, ProgressBar, Surface, useTheme as useTheme4 } from "react-native-paper";
 import Animated6, { useAnimatedStyle as useAnimatedStyle5, useSharedValue as useSharedValue6 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -1057,7 +1066,7 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   const { settings } = useContext11(ScrollViewSettingsContext);
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed;
   const insets = useSafeAreaInsets4();
-  const theme = useTheme3();
+  const theme = useTheme4();
   const top = topInset ? insets.top : 0;
   const measuredShared = useSharedValue6(false);
   const handleLayout = ({
@@ -1112,10 +1121,10 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
     /* @__PURE__ */ jsx9(Animated6.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ jsx9(ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
     backAction && (effectiveBackActionFixed ? /* @__PURE__ */ jsxs6(Animated6.View, { style: leadingStyle, children: [
       /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      typeof backAction === "function" ? /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] }) : /* @__PURE__ */ jsxs6(Animated6.View, { style: [leadingStyle, translateStyle], children: [
       /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      typeof backAction === "function" ? /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] })),
     trailingAction && (trailingActionFixed ? /* @__PURE__ */ jsxs6(View6, { style: trailingStyle, children: [
       /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
@@ -1155,7 +1164,7 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader;
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter;
   const [headerHeight, setHeaderHeightState] = useState5(null);
-  const [footerHeight, setFooterHeightState] = useState5(0);
+  const [footerHeight, setFooterHeightState] = useState5(null);
   const [progress, setProgress] = useState5(null);
   const [progressing, setProgressing] = useState5(false);
   const scrollPosition = useSharedValue7(0);
@@ -1195,12 +1204,13 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   }, [headerHeight]);
   const setFooterHeight = useCallback7(
     (h) => {
+      if (h === 0 && footerHeight) return;
       setFooterHeightState(h);
-      footerHeightShared.value = h;
+      footerHeightShared.value = h ?? 0;
     },
-    [footerHeightShared]
+    [footerHeight, footerHeightShared]
   );
-  const scrollHeight = useMemo5(() => Dimensions3.get("window").height - (headerHeight ?? 0) - footerHeight, [headerHeight, footerHeight]);
+  const scrollHeight = useMemo5(() => Dimensions3.get("window").height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight]);
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed);
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed);
   const value = useMemo5(() => ({ blur: effectiveBlur, footerAboveKeyboard, footerHeight, footerHeightShared, footerFixed: effectiveFooterFixed, footerOffset, headerHeight, headerHeightShared, headerFixed: effectiveHeaderFixed, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, setProgress, setProgressing, snapBackFooterShared, snapBackHeaderShared, tabBarHeight }), [effectiveBlur, footerAboveKeyboard, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, tabBarHeight]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",

package/src/ScrollViewContext.ts

@@ -4,7 +4,7 @@ import { SharedValue } from 'react-native-reanimated'
 export type ScrollViewContextType = {
   blur: boolean
   footerAboveKeyboard: boolean
-  footerHeight: number
+  footerHeight: number | null
   footerHeightShared: SharedValue<number>
   footerFixed: boolean
   footerOffset: SharedValue<number>
@@ -28,7 +28,7 @@ export type ScrollViewContextType = {
   progressing: boolean
   scrollHeight: number
   scrollPosition: SharedValue<number>
-  setFooterHeight: (h: number) => void
+  setFooterHeight: (h: number | null) => void
   setHeaderHeight: (h: number | null) => void
   setProgress: (p: number | null) => void
   setProgressing: (b: boolean) => void
@@ -38,7 +38,7 @@ export type ScrollViewContextType = {
 export const ScrollViewContext = createContext<ScrollViewContextType>({
   blur: true,
   footerAboveKeyboard: false,
-  footerHeight: 0,
+  footerHeight: null,
   footerHeightShared: null as unknown as SharedValue<number>,
   footerFixed: false,
   footerOffset: null as unknown as SharedValue<number>,

package/src/ScrollViewFooter.tsx

@@ -13,12 +13,12 @@ export type ScrollViewFooterProps = {
 }
 
 export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) => {
-  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext(ScrollViewContext)
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = useContext(ScrollViewContext)
   const insets = useSafeAreaInsets()
   const keyboardHeight = useKeyboardInset()
   useEffect(
     () => () => {
-      setFooterHeight(0)
+      setFooterHeight(null)
     },
     [setFooterHeight]
   )
@@ -38,7 +38,7 @@ export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) =>
     if (snapBackFooterShared.value) return { transform: [{ translateY: footerOffset.value }] }
     const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value
     if (effective <= 0) return { transform: [{ translateY: 0 }] }
-    return { transform: [{ translateY: Math.min(effective, footerHeight) }] }
+    return { transform: [{ translateY: Math.min(effective, footerHeight ?? 0) }] }
   }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset])
   // Floating above the keyboard is done by GROWING this container (via paddingBottom) rather than
   // translating it. Translating the whole bar left its bottom edge — and the BlurView filling it —
@@ -66,14 +66,18 @@ export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) =>
   // of dropping past it and correcting back up.
   const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom
   return (
-    <Animated.View onLayout={handleLayout} pointerEvents='box-none' style={[styles.footer, { paddingBottom: containerPaddingBottom }, footerStyle]}>
-      {footerHeight > 0 && <BlurView blur={blur} style={StyleSheet.absoluteFill} />}
+    // bottom: tabBarHeight (not the styles.footer default of 0) - a consuming app's own persistent
+    // tab bar (a fixture outside this package's header/footer concepts entirely, same as
+    // useScrollList's content-inset reservation) sits below this at the true screen bottom, so this
+    // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
+    <Animated.View onLayout={handleLayout} pointerEvents='box-none' style={[styles.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle]}>
+      {(footerHeight ?? 0) > 0 && <BlurView blur={blur} style={StyleSheet.absoluteFill} />}
       <View style={[styles.row, { paddingBottom: rowPaddingBottom }, style]}>{children}</View>
     </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
-  footer: { bottom: 0, left: 0, position: 'absolute', right: 0, zIndex: 2 },
+  footer: { left: 0, position: 'absolute', right: 0, zIndex: 2 },
   row: { alignItems: 'center', flexDirection: 'row', zIndex: 1 }
 })

package/src/ScrollViewHeader.tsx

@@ -11,7 +11,14 @@ import { ScrollViewSettingsContext } from './ScrollViewSettingsContext'
 export type ScrollViewHeaderProps = {
   actionSize?: number
   actionStyle?: ViewStyle
-  backAction?: () => void
+  // A plain callback renders the default Appbar.BackAction (themed onSurface, sized/positioned by
+  // actionSize/iconSize below) — the common case, unchanged from before. Passing a ReactNode
+  // instead skips that default entirely and renders the given element in its place, same escape
+  // hatch trailingAction already gave the other corner: a caller that wants its own color, icon,
+  // or component altogether (a colored IconButton, say) isn't stuck fighting Appbar.BackAction's
+  // own fixed color/no-customization API to get it. backActionAccessibilityLabel/iconSize below
+  // only apply to the default-rendered case — a custom element carries its own.
+  backAction?: (() => void) | ReactNode
   backActionAccessibilityLabel?: string
   backActionFixed?: boolean
   caption?: string
@@ -147,12 +154,12 @@ export const ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, bac
         (effectiveBackActionFixed ? (
           <Animated.View style={leadingStyle}>
             <ActionBg blur={blur} style={actionStyle} />
-            <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} />
+            {typeof backAction === 'function' ? <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} /> : backAction}
           </Animated.View>
         ) : (
           <Animated.View style={[leadingStyle, translateStyle]}>
             <ActionBg blur={blur} style={actionStyle} />
-            <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} />
+            {typeof backAction === 'function' ? <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} /> : backAction}
           </Animated.View>
         ))}
       {trailingAction &&

package/src/ScrollViewProvider.tsx

@@ -26,7 +26,7 @@ export const ScrollViewProvider = ({ blur, children, fixed = false, footerAboveK
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter
   const [headerHeight, setHeaderHeightState] = useState<number | null>(null)
-  const [footerHeight, setFooterHeightState] = useState(0)
+  const [footerHeight, setFooterHeightState] = useState<number | null>(null)
   const [progress, setProgress] = useState<number | null>(null)
   const [progressing, setProgressing] = useState(false)
   const scrollPosition = useSharedValue(0)
@@ -71,13 +71,20 @@ export const ScrollViewProvider = ({ blur, children, fixed = false, footerAboveK
     return () => clearTimeout(timeout)
   }, [headerHeight])
   const setFooterHeight = useCallback(
-    (h: number) => {
+    (h: number | null) => {
+      // Same race setHeaderHeight guards against, on the footer side: react-native-screens' web
+      // shim (and a footer's own unmount cleanup below, which now passes null instead of 0 for
+      // exactly this reason) can report/force a spurious 0 while a real footer is effectively
+      // still on screen (e.g. a wizard cycling through several <ScrollViewFooter> instances).
+      // Never let that clobber a known height — only an explicit null (genuinely no footer
+      // mounted) may reset it.
+      if (h === 0 && footerHeight) return
       setFooterHeightState(h)
-      footerHeightShared.value = h
+      footerHeightShared.value = h ?? 0
     },
-    [footerHeightShared]
+    [footerHeight, footerHeightShared]
   )
-  const scrollHeight = useMemo(() => Dimensions.get('window').height - (headerHeight ?? 0) - footerHeight, [headerHeight, footerHeight])
+  const scrollHeight = useMemo(() => Dimensions.get('window').height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight])
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed)
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed)
   const value = useMemo(() => ({ blur: effectiveBlur, footerAboveKeyboard, footerHeight, footerHeightShared, footerFixed: effectiveFooterFixed, footerOffset, headerHeight, headerHeightShared, headerFixed: effectiveHeaderFixed, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, setProgress, setProgressing, snapBackFooterShared, snapBackHeaderShared, tabBarHeight }), [effectiveBlur, footerAboveKeyboard, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, tabBarHeight])

package/src/internal/ScrollViewChip.tsx

@@ -1,9 +1,16 @@
 import { Chip, type ChipProps as AutoPaperChipProps } from '@rific/auto-paper'
 import { type ReactNode } from 'react'
 import { StyleSheet, type ViewStyle } from 'react-native'
+import { Icon, useTheme } from 'react-native-paper'
 import Animated, { type AnimatedStyle } from 'react-native-reanimated'
 
-export type ChipProps = Omit<AutoPaperChipProps, 'compact' | 'icon' | 'onPress'> & {
+// 'children' omitted alongside the rest — this chip's own text always comes from `label` (or the
+// isHorizontal-driven 'Start'/'Top' default below), passed as the real JSX children the underlying
+// Chip renders with, which is what actually wins: React always takes the children an element is
+// given between its tags over one merely passed as a "children" prop via spread. A `children` in
+// chipProps would therefore type-check but silently do nothing at runtime — omitting it here means
+// TypeScript catches that mismatch instead of a caller finding out the hard way.
+export type ChipProps = Omit<AutoPaperChipProps, 'compact' | 'icon' | 'onPress' | 'children'> & {
   label?: ReactNode
 }
 
@@ -16,16 +23,27 @@ type Props = {
 }
 
 export const ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }: Props) => {
-  const { label, style: chipStyle, ...restChipProps } = (chipProps ?? {}) as Partial<ChipProps>
+  const { colors } = useTheme()
+  const { label, selectedColor, style: chipStyle, ...restChipProps } = (chipProps ?? {}) as Partial<ChipProps>
   const handlePress = onChipPress
     ? () => {
         onPress()
         onChipPress()
       }
     : onPress
+  // Rendered via `avatar`, not Chip's own `icon` prop: react-native-paper's MD3 Chip hardcodes
+  // `icon`'s color to theme.colors.primary and ignores `selectedColor` entirely (its own doc
+  // comment: "With theme version 3 selectedColor doesn't apply to the icon. If you want [a]
+  // custom color for the icon, render your own Icon component") — a chip whose own background
+  // IS theme.colors.primary (this library's callers all set that; see Hangman's own vivid-chip
+  // convention) renders that icon invisible against itself. `avatar` has no such override; it
+  // clones whatever element/color it's given. Falls back to the same default Paper itself would
+  // resolve for unselected/non-outlined text (onSecondaryContainer) or outlined text
+  // (onSurfaceVariant), so the icon still matches the label color when no selectedColor is set.
+  const iconColor = selectedColor ?? (restChipProps.mode === 'outlined' ? colors.onSurfaceVariant : colors.onSecondaryContainer)
   return (
     <Animated.View style={[styles.chip, style]}>
-      <Chip compact {...restChipProps} icon={isHorizontal ? 'chevron-left' : 'chevron-up'} onPress={handlePress} style={[styles.chipInner, chipStyle]}>
+      <Chip compact selectedColor={selectedColor} {...restChipProps} avatar={<Icon source={isHorizontal ? 'chevron-left' : 'chevron-up'} size={18} color={iconColor} />} onPress={handlePress} style={[styles.chipInner, chipStyle]}>
         {label ?? (isHorizontal ? 'Start' : 'Top')}
       </Chip>
     </Animated.View>