↗
↗
↗
↗
☰
AutoDetectButtonsSlider
iOS
Android
Web
A segmented control that automatically detects its orientation from its container dimensions. Options accept a SliderOption object (label + optional textProps) instead of plain strings.
Import
tsx
import { AutoDetectButtonsSlider, type ButtonSliderProps, type SliderOption, } from 'react-native-cross-elements';
Usage
auto-detect-slider.tsx
One
Two
Three
Four
Selected: One
ℹ️
Unlike ButtonsSlider, orientation is detected automatically from the rendered width/height of the container. A wider container becomes horizontal; a taller one becomes vertical.
SliderOption type
ts
type SliderOption = { label: string; textProps?: TextProps; // any React Native TextInput props };
Use textProps to control text overflow, font, and other label characteristics per option.
Props
Prop
Type
Default
Description
options
req
SliderOption[]
—
Array of { label, textProps? } objects.
initialIndex
req
number
—
Initially selected index.
onSelect
req
(index: number) => void
—
Called when selection changes.
style
ViewStyle
—
Container style — determines the orientation via width/height ratio.
sliderContainerStyle
ViewStyle
—
Style for the outer track background.
sliderStyle
ViewStyle
—
Style for the animated selection indicator.
sliderItemButtonStyle
(state: SliderButtonStyle) => ViewStyle
—
Per-item button style callback.
sliderItemTextStyle
(state: SliderTextStyle) => TextStyle
—
Per-item text style callback.
buttonClassName
string
—
Web CSS class for item buttons.
textClassName
string
—
Web CSS class for item labels.
sliderRoundClassName
string
—
Web CSS class for the indicator.