↗
↗
↗
↗
☰
CustomButton
iOS
Android
Web
TV
A fully custom-content button. Provide any layout as children via a render-prop and receive the current color and focus state. Supports async loading and all BaseButton features.
Import
tsx
import { CustomButton } from 'react-native-cross-elements';
Basic usage
custom-button.tsx
Waiting for a press
Props
showIndicator
enableRipple
With async loading
When onPress is async and showIndicator is true, the children are replaced with a spinner while the promise resolves.
tsx
<CustomButton onPress={async () => { await uploadFile(); }} showIndicator backgroundColor="#1d4ed8" selectedBackgroundColor="#1e40af" pressedBackgroundColor="#1e3a8a" textColor="#dbeafe" focusedTextColor="#ffffff" style={{ paddingHorizontal: 20, paddingVertical: 14, borderRadius: 12 }} > {({ currentTextColor }) => ( <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}> <Text style={{ color: currentTextColor }}>Upload</Text> <Text style={{ color: currentTextColor }}>⬆️</Text> </View> )} </CustomButton>
Props
ℹ️
CustomButton extends BaseButton — all BaseButton props are also valid.
Prop
Type
Default
Description
children
req
(state: { currentTextColor, isFocused }) => ReactNode
—
Render-prop for button content.
onPress
(event) => any
—
Called on tap. Async onPress triggers loading state.
showIndicator
boolean
false
Show loading spinner while async onPress is pending.
backgroundColor
ColorValue
'white'
Default background.
selectedBackgroundColor
ColorValue
'white'
Background when focused or hovered.
pressedBackgroundColor
ColorValue
'white'
Background when pressed.
textColor
ColorValue
'black'
Color passed to children when not focused.
focusedTextColor
ColorValue
'black'
Color passed to children when focused.
style
PressableStyle
—
Style or callback with pressed/focused/hovered.
enableRipple
boolean
false
Enable ripple feedback.
pressedScale
number
—
Scale on press.
animationConfig
AnimationConfig
—
Reanimated timing config.