Switch

Switches toggle the state of a single item on or off. Follows the Material Design 3 Switch specification.

Usage

Open on Snack ↗

import { Switch } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [isOn, setIsOn] = useState(false)
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Switch value={isOn} onValueChange={setIsOn} />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

With Icons

By default, the selected state shows a check icon on the thumb. You can customize both selected and unselected icons.

Open on Snack ↗

import { Switch } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [a, setA] = useState(true)
  const [b, setB] = useState(true)
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }}>
          <Switch value={a} onValueChange={setA} selectedIcon="check" />
          <Switch
            value={b}
            onValueChange={setB}
            selectedIcon="bell"
            unselectedIcon="bell-off"
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

When unselectedIcon is provided, the thumb renders at the larger selected size in both states.

Disabled

Open on Snack ↗

import { Switch } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <Switch value={false} onValueChange={() => {}} disabled />
          <Switch value onValueChange={() => {}} disabled />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
value	boolean		No	Whether the switch is toggled on.
onValueChange	(value: boolean) => void	-	No	Callback fired when the switch is toggled. Receives the new value.
selectedIcon	IconSource	check	No	Icon shown on the thumb when selected. Accepts a string name (resolved via the theme's `iconResolver`, defaulting to `MaterialCommunityIcons`), a pre-rendered element, or a render function that receives `{ size, color }`.
unselectedIcon	IconSource	-	No	Icon shown on the thumb when unselected. When provided, the thumb renders at the larger selected size. Same accepted forms as `selectedIcon`.
containerColor	string	-	No	Override the track color. State-layer colors (hover, press) are derived automatically.
contentColor	string	-	No	Override the thumb and icon color.
style	StyleProp<ViewStyle>	-	No	Style applied to the root container. Static form only — the function form `(state) => style` is not supported because the component drives its container background through Reanimated. Use `containerColor` / `contentColor` for state-aware styling.
onKeyDown	(event: { nativeEvent: { key?: string; }; }) => void	-	No	-