@delacour/react-native-ui 0.3.0-alpha.20261019125933 → 0.4.0-alpha.20261020083124

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.3.0-alpha.20261019125933",
+	"version": "0.4.0-alpha.20261020083124",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -118,21 +118,21 @@
 		"gen-exports": "bun scripts/gen-exports.ts"
 	},
 	"dependencies": {
-		"cn": "^0.4.0",
+		"cn": "^0.5.0",
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.3.1"
 	},
 	"peerDependencies": {
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": ">=0.1.0",
+		"@delacour/react-native-bottom-sheet": "0.2.0-alpha.20261020083124",
 		"@delacour/react-native-charts": ">=0.1.0",
 		"@legendapp/list": ">=3.3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",
 		"react": ">=19",
-		"react-native": ">=0.81",
-		"react-native-gesture-handler": ">=2.28",
+		"react-native": ">=0.88",
+		"react-native-gesture-handler": ">=3.3",
 		"react-native-keyboard-controller": ">=1.18",
 		"react-native-pulsar": "^1.7.0",
 		"react-native-reanimated": ">=4",
@@ -175,8 +175,8 @@
 		"@delacour/tsconfig": "workspace:*",
 		"@types/bun": "^1.3.8",
 		"@types/react": "catalog:",
-		"expo-router": "~57.0.15",
+		"expo-router": "~58.0.24",
 		"react-native-teleport": "^1.2.2",
-		"typescript": "^5.9.3"
+		"typescript": "~6.0.3"
 	}
 }

package/src/components/avatar/avatar.tsx

@@ -1,12 +1,5 @@
 import { type ReactElement, type ReactNode, useMemo, useState } from "react";
-import {
-	Image,
-	type ImageErrorEventData,
-	type ImageProps,
-	type ImageSourcePropType,
-	type NativeSyntheticEvent,
-	View,
-} from "react-native";
+import { Image, type ImageErrorEvent, type ImageProps, type ImageSourcePropType, View } from "react-native";
 import { IconPeople } from "../../icons/central";
 import { cn } from "../../lib/cn";
 import { Icon } from "../icon";
@@ -88,7 +81,7 @@ function AvatarRoot({
 	const initials = fallback?.trim() || resolveAvatarInitials(name);
 	const label = resolveAvatarAccessibilityLabel({ accessibilityLabel, name, fallback });
 
-	const onImageError = (event: NativeSyntheticEvent<ImageErrorEventData>) => {
+	const onImageError = (event: ImageErrorEvent) => {
 		setFailedKey(sourceKey);
 		imageProps?.onError?.(event);
 	};

package/src/components/bottom-sheet/bottom-sheet-text-input.tsx

@@ -1,6 +1,6 @@
 import { useBottomSheetTextInput } from "@delacour/react-native-bottom-sheet";
 import { type ReactElement, useCallback, useMemo } from "react";
-import type { BlurEvent, FocusEvent, TextInput } from "react-native";
+import type { BlurEvent, FocusEvent, TextInputInstance } from "react-native";
 import { composeRefs } from "../../lib/compose-refs";
 import { Input, type InputProps } from "../input";
 
@@ -22,7 +22,7 @@ export type BottomSheetTextInputProps = InputProps;
  */
 export function BottomSheetTextInput({ ref, onFocus, onBlur, ...props }: BottomSheetTextInputProps): ReactElement {
 	const handlers = useBottomSheetTextInput();
-	const composed = useMemo(() => composeRefs<TextInput | null>(ref, handlers.ref), [ref, handlers.ref]);
+	const composed = useMemo(() => composeRefs<TextInputInstance | null>(ref, handlers.ref), [ref, handlers.ref]);
 
 	const handleFocus = useCallback(
 		(event: FocusEvent) => {

package/src/components/calendar/calendar-picker.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement, useCallback, useMemo, useRef } from "react";
-import { type LayoutChangeEvent, ScrollView, View, type ViewProps } from "react-native";
+import { type LayoutChangeEvent, ScrollView, type ScrollViewInstance, View, type ViewProps } from "react-native";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import { useCalmMotion } from "../../hooks/use-calm-motion";
 import { cn } from "../../lib/cn";
@@ -42,7 +42,7 @@ export function CalendarPicker({ className, ...props }: CalendarPickerProps): Re
 		return list;
 	}, [yearSpan.from, yearSpan.to]);
 
-	const scroller = useRef<ScrollView>(null);
+	const scroller = useRef<ScrollViewInstance>(null);
 	const hasScrolled = useRef(false);
 	const handleCurrentLayout = useCallback((event: LayoutChangeEvent) => {
 		if (hasScrolled.current) return;

package/src/components/context-menu/context-menu-trigger.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
-import { type AccessibilityActionEvent, View, type ViewProps } from "react-native";
+import { type AccessibilityActionEvent, View, type ViewInstance, type ViewProps } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { scheduleOnRN } from "react-native-worklets";
 import { type MenuMeasurable, useMenuPart } from "../menu/menu.context";
@@ -75,9 +75,9 @@ export function ContextMenuTrigger({
 		registerContent(children);
 	}, [children, registerContent]);
 
-	const nodeRef = useRef<View | null>(null);
+	const nodeRef = useRef<ViewInstance | null>(null);
 	const setNode = useCallback(
-		(node: View | null) => {
+		(node: ViewInstance | null) => {
 			nodeRef.current = node;
 			triggerRef.current = node as MenuMeasurable | null;
 		},

package/src/components/dialog/dialog-content.tsx

@@ -34,7 +34,7 @@ export type DialogContentProps = ViewProps & {
 function focus(target: DialogFocusTarget | null): void {
 	if (target === null) return;
 	const handle = findNodeHandle(target as Parameters<typeof findNodeHandle>[0]);
-	if (handle !== null) AccessibilityInfo.setAccessibilityFocus(handle);
+	if (handle !== undefined) AccessibilityInfo.setAccessibilityFocus(handle);
 }
 
 /**

package/src/components/drawer/drawer-content.tsx

@@ -41,7 +41,7 @@ export type DrawerContentProps = ViewProps & {
 function focus(target: DrawerFocusTarget | null): void {
 	if (target === null) return;
 	const handle = findNodeHandle(target as Parameters<typeof findNodeHandle>[0]);
-	if (handle !== null) AccessibilityInfo.setAccessibilityFocus(handle);
+	if (handle !== undefined) AccessibilityInfo.setAccessibilityFocus(handle);
 }
 
 /**

package/src/components/drawer/use-drawer-pan.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Gesture, type PanGesture } from "react-native-gesture-handler";
+import { Gesture, type LegacyPanGesture } from "react-native-gesture-handler";
 import { cancelAnimation, Easing, type SharedValue, useSharedValue, withTiming } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
 import { OVERLAY_MOTION } from "../overlay/overlay.variants";
@@ -48,7 +48,7 @@ const PAN_RANGE: [number, number] = [-DRAWER_PAN_ACTIVE_OFFSET, DRAWER_PAN_ACTIV
  * Per-gesture memory lives in shared values: each worklet gets its own copy of
  * a captured `let`.
  */
-export function useDrawerPan({ edge, extent, isEnabled, drag, onDismiss }: UseDrawerPanOptions): PanGesture {
+export function useDrawerPan({ edge, extent, isEnabled, drag, onDismiss }: UseDrawerPanOptions): LegacyPanGesture {
 	const isDragging = useSharedValue(false);
 	const isPastThreshold = useSharedValue(false);
 

package/src/components/input/input-group.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode, useCallback, useMemo, useRef, useState } from "react";
-import type { TextInput } from "react-native";
+import type { TextInputInstance } from "react-native";
 import { useButtonGroupItemContext } from "../button/button.context";
 import { resolveButtonSizeStep } from "../button/button.variants";
 import { useFieldContext } from "../field/field.context";
@@ -36,7 +36,7 @@ function InputGroupRoot({
 	className,
 	children,
 }: InputGroupProps): ReactElement {
-	const fieldRef = useRef<TextInput | null>(null);
+	const fieldRef = useRef<TextInputInstance | null>(null);
 	const field = useFieldContext();
 	const [isFocused, setFocused] = useState(false);
 

package/src/components/input/input.context.tsx

@@ -1,5 +1,5 @@
 import { createContext, type ReactElement, type ReactNode, type RefObject, use } from "react";
-import type { TextInput } from "react-native";
+import type { TextInputInstance } from "react-native";
 import type { InputSize, InputVariant } from "./input.variants";
 
 export type InputGroupContextValue = {
@@ -22,7 +22,7 @@ export type InputGroupContextValue = {
 	 * the middle of the box, and a tap on the padding either side would otherwise
 	 * do nothing.
 	 */
-	fieldRef: RefObject<TextInput | null>;
+	fieldRef: RefObject<TextInputInstance | null>;
 };
 
 const InputGroupContext = createContext<InputGroupContextValue | null>(null);

package/src/components/input/input.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement, type Ref, useCallback, useState } from "react";
-import { TextInput, type TextInputProps } from "react-native";
+import { TextInput, type TextInputInstance, type TextInputProps } from "react-native";
 import { composeRefs } from "../../lib/compose-refs";
 import { useButtonGroupItemContext } from "../button/button.context";
 import { resolveButtonSizeStep } from "../button/button.variants";
@@ -49,7 +49,7 @@ export type InputProps = Omit<TextInputProps, "placeholderTextColorClassName"> &
 	 * primary token, or the destructive one while the field is invalid.
 	 */
 	selectionColorClassName?: string;
-	ref?: Ref<TextInput>;
+	ref?: Ref<TextInputInstance>;
 };
 
 function InputRoot({

package/src/components/menu/menu.context.tsx

@@ -10,14 +10,14 @@ import {
 	useRef,
 	useState,
 } from "react";
-import type { View } from "react-native";
+import type { ViewInstance } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import { useControllableState } from "../../hooks/use-controllable-state";
 import type { HapticFeedback } from "../pressable/pressable";
 import type { MenuAnchorRect } from "./menu.variants";
 
 /** Anything `measureInWindow` can be called on — a host view, or an animated one. */
-export type MenuMeasurable = Pick<View, "measureInWindow">;
+export type MenuMeasurable = Pick<ViewInstance, "measureInWindow">;
 
 export type MenuContextValue = {
 	isOpen: boolean;

package/src/components/screen/screen-section-list.tsx

@@ -1,5 +1,5 @@
 import { type ForwardedRef, forwardRef, type ReactElement, type RefAttributes, useMemo } from "react";
-import { type DefaultSectionT, SectionList, type SectionListProps, View } from "react-native";
+import { SectionList, type SectionListProps, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { cn } from "../../lib/cn";
 import type { ScreenScrollableProps } from "./screen.types";
@@ -7,6 +7,9 @@ import { screenVariants } from "./screen.variants";
 import { resolveListComponent } from "./screen-list-component";
 import { useScreenScrollInsets } from "./use-screen-scroll-insets";
 
+/** React Native's default `SectionT`, which its strict API no longer exports. */
+type DefaultSectionT = Record<string, unknown>;
+
 // `Animated.createAnimatedComponent` erases the generic parameters; the recast
 // puts them back so `sections` and `renderItem` still check against each other.
 const AnimatedSectionList = Animated.createAnimatedComponent(SectionList) as unknown as typeof SectionList;

package/src/components/screen/screen.types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { ScrollView, ViewProps } from "react-native";
+import type { ScrollViewInstance, ViewProps } from "react-native";
 import type { ScreenEdge, ScreenPlacement } from "./screen.variants";
 
 /**
@@ -19,7 +19,7 @@ import type { ScreenEdge, ScreenPlacement } from "./screen.variants";
  * `never` — which still compiles everywhere, silently accepts any ref, and
  * gives a caller a `.current` it can do nothing with.
  */
-export type ScreenScrollViewRef = ScrollView;
+export type ScreenScrollViewRef = ScrollViewInstance;
 
 /**
  * The shape of a container that can inset itself against the safe area.