Interface: SignatureInkProps

Props for the high-level <SignatureInk /> wrapper. Every prop is optional with sane native defaults.

Properties

Property	Type	Description
backgroundColor?	____ColorValue_Internal	Canvas background color. Use a dark color (e.g. #0c0c0c) plus a light penColor to render the surface in a dark theme. Defaults to transparent so the parent view's background shows through.
baselineColor?	____ColorValue_Internal	Baseline color. Defaults to a translucent system gray.
baselineOffsetFromBottom?	number	Distance in points/dp from the baseline to the bottom of the canvas drawing area. Used only when showToolbar is false. When the built-in toolbar is visible the baseline auto-anchors to the toolbar's top edge so the visual gap above and below the icons stays symmetric. Default: 8 on iOS, 16 on Android.
baselineStyle?	BaselineStyle	Line style for the baseline. 'solid' draws a continuous line; 'dashed' draws short dash segments (the default); 'dotted' draws evenly spaced round dots. Defaults to 'dashed'.
baselineWidth?	number	Baseline stroke width in points/dp. Pass any positive value to override the per-style default; pass 0 (or omit) to use the style-tuned default: 1 for 'solid'/'dashed', and a slightly thicker value for 'dotted' so the round dots stay visible. On Android the value is interpreted as dp (density-adjusted at draw time), so 1 looks the same on every screen density.
defaultInkType?	InkType	iOS only initial PencilKit ink type. Ignored on Android.
onBegin?	() => void	Fires when a stroke begins (finger / pencil down).
onChange?	(event) => void	Fires whenever the visible drawing changes.
onEnd?	() => void	Fires when a stroke ends (finger / pencil up).
onReplayProgress?	(event) => void	Fires per-frame while a replay() is running.
onToolbarAction?	(event) => void	Fires after a built-in toolbar button is tapped.
pencilOnly?	boolean	iOS only. When true, the canvas accepts input exclusively from an Apple Pencil (PKCanvasViewDrawingPolicy.pencilOnly); finger touches are silently dropped. On Android, when true, only events with TOOL_TYPE_STYLUS are accepted.
penColor?	____ColorValue_Internal	Ink color. On iOS this is captured literally (PencilKit's dark-mode auto-inversion is disabled), so pass concrete colors like #111 or 'white', not trait-adaptive ones like 'label'. Applies to new strokes; existing strokes keep their color. Default: black on iOS, #111111 on Android.
penMaxWidth?	number	Maximum stroke width at the slowest pen velocity, in the same density-independent units as penMinWidth. Default: 3.
penMinWidth?	number	Minimum stroke width at the fastest pen velocity, expressed in density-independent units (points on iOS, dp on Android). The physical thickness rendered for a given value is the same on both platforms across all screen densities. Default: 1. On iOS PencilKit does its own width modulation: the tool width is the midpoint of penMinWidth and penMaxWidth (2 by default).
showBaseline?	boolean	Show the signing baseline near the bottom of the canvas.
showToolbar?	boolean	Render the built-in native toolbar (undo / redo / clear / copy). When false, render your own buttons that call the imperative API.
showToolPicker?	boolean	iOS only. When true, attaches PencilKit's system tool picker (PKToolPicker) so the user can switch ink / color / width / eraser interactively. Silently ignored on Android.
style?	StyleProp<Readonly<Omit<Readonly<Omit<Readonly<{ }>, | "pointerEvents" | "filter" | "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "transform" | "transformOrigin" | "backfaceVisibility" | "backgroundColor" | "borderColor" | "borderCurve" | "borderBottomColor" | "borderEndColor" | "borderLeftColor" | "borderRightColor" | "borderStartColor" | "borderTopColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderRadius" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderEndEndRadius" | "borderEndStartRadius" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "borderStyle" | "borderWidth" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "opacity" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "elevation" | "cursor" | "boxShadow" | "mixBlendMode" | "experimental_backgroundImage" | "experimental_backgroundSize" | "experimental_backgroundPosition" | "experimental_backgroundRepeat" | "isolation"> & Omit<Readonly<Omit<..., ...> & Omit<..., ...>>, | "pointerEvents" | "filter" | "transform" | "transformOrigin" | "backfaceVisibility" | "backgroundColor" | "borderColor" | "borderCurve" | "borderBottomColor" | "borderEndColor" | "borderLeftColor" | "borderRightColor" | "borderStartColor" | "borderTopColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderRadius" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderEndEndRadius" | "borderEndStartRadius" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "borderStyle" | "borderWidth" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "opacity" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "elevation" | "cursor" | "boxShadow" | "mixBlendMode" | "experimental_backgroundImage" | "experimental_backgroundSize" | "experimental_backgroundPosition" | "experimental_backgroundRepeat" | "isolation"> & Omit<Readonly<{ }>, | "pointerEvents" | "filter" | "backfaceVisibility" | "backgroundColor" | "borderColor" | "borderCurve" | "borderBottomColor" | "borderEndColor" | "borderLeftColor" | "borderRightColor" | "borderStartColor" | "borderTopColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderRadius" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderEndEndRadius" | "borderEndStartRadius" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "borderStyle" | "borderWidth" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "opacity" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "elevation" | "cursor" | "boxShadow" | "mixBlendMode" | "experimental_backgroundImage" | "experimental_backgroundSize" | "experimental_backgroundPosition" | "experimental_backgroundRepeat" | "isolation"> & Omit<Readonly<{ }>, never>>, never> & Omit<Readonly<{ }>, never>>>	Standard React Native view style. Sizing/positioning live here.
toolbarBackgroundColor?	____ColorValue_Internal	Toolbar fill color. Defaults to transparent.
toolbarButtons?	readonly ToolbarItem[]	The toolbar buttons, in the order they appear. Each entry is a ToolbarItem object. Built-in ids (undo / redo / clear / copy) carry native behavior and a default icon; any other id is a custom, "headless" button that only fires onToolbarAction and must declare an icon and/or text. Defaults to DEFAULT_TOOLBAR_BUTTONS. Example toolbarButtons={[ { id: ToolbarAction.Undo }, { id: ToolbarAction.Clear, text: 'Clear' }, { id: 'save', icon: ToolbarIcon.Save, text: 'Save' }, ]}
toolbarHeight?	number	Toolbar height in points/dp. Controls the symmetric vertical gap between the icons and the baseline / bottom edge (= (toolbarHeight - iconVisualHeight) / 2 on each side). Defaults to ~44 on iOS / 48 on Android.
toolbarIconSpacing?	number	Horizontal gap in points/dp between adjacent toolbar buttons. Defaults to ~8 on both platforms.
toolbarMaxVisibleButtons?	number	Hard cap on the number of buttons rendered inline; any beyond this collapse into an overflow ("…") menu. When omitted (or 0), the visible count is computed at layout time from the available width.
toolbarPosition?	ToolbarPosition	Toolbar anchor edge. Defaults to 'bottom'.
toolbarTintColor?	____ColorValue_Internal	Color applied to the toolbar icons (SF Symbols on iOS, vector drawables on Android). When omitted, iOS uses the view's tint color and Android draws each icon in its own drawable color (black for undo / redo / clear / copy, white for the others and the overflow button), so set it explicitly when you use custom icons on Android.
velocityFilterWeight?	number	0..1 weight of the most recent velocity sample in the velocity smoother (Android only; PencilKit handles smoothing itself). Higher values feel snappier; lower values produce smoother (laggier) tapering. Default: 0.7.