↗

â†—

↗

☰

NativeButton

iOS

Android

Web

A text-based button with optional leading/trailing icons and an async loading indicator. Built on BaseButton — supports all BaseButton props.

Import

tsx

import { NativeButton } from 'react-native-cross-elements';

Basic usage

native-button.tsx

Waiting for a press

Props

showIndicator

enableRipple

Async loading

When onPress returns a Promise and showIndicator is true, a spinner replaces the text while the promise is pending.

tsx

// Async onPress automatically shows a loading indicator <NativeButton text="Save changes" onPress={async () => { await api.save(); }} showIndicator backgroundColor="#18181b" selectedBackgroundColor="#27272a" pressedBackgroundColor="#3f3f46" textColor="#a1a1aa" focusedTextColor="#ffffff" style={{ paddingHorizontal: 20, paddingVertical: 14, borderRadius: 12 }} />

With icons

Use leftIconComponent and rightIconComponent to render icons that automatically receive the current text color.

tsx

<NativeButton text="Open" onPress={() => {}} leftIconComponent={(color) => ( <Text style={{ color, marginRight: 8 }}>��</Text> )} rightIconComponent={(color) => ( <Text style={{ color, marginLeft: 8 }}>→</Text> )} backgroundColor="#0f766e" selectedBackgroundColor="#115e59" pressedBackgroundColor="#134e4a" textColor="#ccfbf1" focusedTextColor="#ffffff" style={{ paddingHorizontal: 20, paddingVertical: 12, borderRadius: 12 }} />

Props

ℹ️

NativeButton extends BaseButton — all BaseButton props are also accepted.

Prop

Type

Default

Description

text

req

string

—

Button label text.

onPress

(event) => any

—

Called on tap. If async, a loading indicator is shown while pending.

showIndicator

boolean

false

Show loading spinner while async onPress is running.

leftIconComponent

(color: ColorValue) => ReactNode

—

Icon rendered before the text.

rightIconComponent

(color: ColorValue) => ReactNode

—

Icon rendered after the text.

backgroundColor

ColorValue

'white'

Default background.

selectedBackgroundColor

ColorValue

'white'

Background when focused or hovered.

pressedBackgroundColor

ColorValue

'white'

Background when pressed.

textColor

ColorValue

'black'

Label color when not focused.

focusedTextColor

ColorValue

'black'

Label color when focused or hovered.

style

PressableStyle

—

Style or callback with pressed/focused/hovered state.

enableRipple

boolean

false

Enable ripple press feedback.

pressedScale

number

—

Scale on press.

animationConfig

AnimationConfig

—

Reanimated timing config.