The foundational button primitive. Provides full control over layout, animation, ripple, and state via a render-prop children API. All other button components are built on top of BaseButton.
The style prop accepts a function receiving the current pressable state (pressed, focused, hovered) so you can apply different styles without any JS state.
ripple.tsx
Props
Prop
Type
Default
Description
children
req
ReactNode | (state) => ReactNode
—
Content or render-prop with { currentTextColor, isFocused }.
onPress
(event) => any
—
Called on tap.
backgroundColor
ColorValue
'white'
Default background color.
selectedBackgroundColor
ColorValue
'white'
Background when focused or hovered.
pressedBackgroundColor
ColorValue
'white'
Background when pressed.
textColor
ColorValue
'black'
Text color when not focused.
focusedTextColor
ColorValue
'black'
Text color when focused or hovered.
style
PressableStyle
—
Style object or callback with { pressed, focused, hovered }.
pressedScale
number
—
Scale applied when the button is pressed.
animationConfig
AnimationConfig
—
Reanimated timing config for state transitions.
enableRipple
boolean
false
Enable ripple press feedback.
rippleColor
ColorValue
—
Ripple effect color.
centerRipple
boolean
false
Start ripple from button center.
rippleDuration
number
—
Ripple animation duration in ms.
className
string
—
Web CSS class for NativeWind/Tailwind.
orientation
'horizontal' | 'vertical'
—
Spatial navigation orientation.
Accessibility
BaseButton wraps a React Native Pressable and forwards all standard Pressable props. Add accessibilityLabel and accessibilityRole="button" for proper screen reader support.