Component

Switch

Theme-aware switch for immediate on/off settings.

React Native

Switch

Immediate on/off setting control.

Notifications enabled

import { useState } from 'react';
import { View } from 'react-native';
import { Switch, Text, useTheme } from '@sohantalukder/rn-kit';

export function NotificationSwitch() {
  const [enabled, setEnabled] = useState(true);
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_12]}>
      <Switch
        value={enabled}
        name="notifications"
        onPress={(nextValue) => setEnabled(nextValue)}
      />
      <Text>Push notifications</Text>
    </View>
  );
}

Live component

offondisabled

Use for settings that take effect immediately.
Avoid using switches for form submission.

Usage

import { Switch } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { View } from 'react-native';
import { Switch, Text, useTheme } from '@sohantalukder/rn-kit';

export function NotificationSwitch() {
  const [enabled, setEnabled] = useState(true);
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_12]}>
      <Switch
        value={enabled}
        name="notifications"
        onPress={(nextValue) => setEnabled(nextValue)}
      />
      <Text>Push notifications</Text>
    </View>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

valuestring | number | boolean-Controlled value rendered by the input or control.

nameunknown-Configures name for Switch.

activeColorunknown-Configures active color for Switch.

onPress() => void-Called when the pressable component is activated.

Theme

Switch reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

off
on
disabled

Best Practices

Use for settings that take effect immediately.
Avoid using switches for form submission.