Switch

A custom switch with label, caption & error fields props.

Usage

Enable Awesome Feature

function SwitchUsage() {
  return (
    <View>
      <Switch label="Enable Awesome Feature" />
    </View>
  )
}

Positions

Left Adjacent Position

Right Adjacent Position

Left Position

Right Position

function SwitchPositions() {
  return (
    <View>
      <Switch
        label="Left Adjacent Position"
        containerStyle={styles.container}
      />
      <Switch
        label="Right Adjacent Position"
        position="right"
        containerStyle={styles.container}
      />
      <Switch
        label="Left Position"
        adjacent={false}
        containerStyle={styles.container}
      />
      <Switch
        label="Right Position"
        position="right"
        adjacent={false}
        containerStyle={styles.container}
      />
    </View>
  )
}

Status

primary

accent

success

info

warning

error

function SwitchStatuses() {
  return (
    <View style={{justifyContent: 'space-evenly'}}>
      <Switch
        status="primary"
        label="primary"
        containerStyle={styles.container}
      />
      <Switch
        status="accent"
        label="accent"
        containerStyle={styles.container}
      />
      <Switch
        status="success"
        label="success"
        containerStyle={styles.container}
      />
      <Switch status="info" label="info" containerStyle={styles.container} />
      <Switch
        status="warning"
        label="warning"
        containerStyle={styles.container}
      />
      <Switch status="error" label="error" containerStyle={styles.container} />
    </View>
  )
}

Size

small

medium

large

function SwitchSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Switch label="small" size="small" />
      <Switch label="medium" size="medium" />
      <Switch label="large" size="large" />
    </View>
  )
}

Disabled

Disabled

Disabled

Disabled

function SwitchDisabled() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Switch size="small" label="Disabled" disabled />
      <Switch size="small" label="Disabled" value status="primary" disabled />
      <Switch size="small" label="Disabled" disabled />
    </View>
  )
}

Custom

Agree to T&C

Click here to see Privacy Policy

Custom color switch

function SwitchCustom() {
  const [isOn, setIsOn] = useState(true)

  return (
    <View style={{justifyContent: 'space-evenly'}}>
      <Switch
        label="Agree to T&C"
        caption="Click here to see Privacy Policy"
        status="info"
        size="large"
        adjacent={false}
        value={isOn}
        onValueChange={setIsOn}
        error={isOn ? '' : 'Please Agree to T&C to continue'}
        containerStyle={styles.container}
      />
      <Switch
        label="Custom color switch"
        status="info"
        color="green"
        value={isOn}
        size="medium"
        onValueChange={setIsOn}
        containerStyle={styles.container}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 4,
  },
  label: {
    marginEnd: 8,
  },
})

Props

Prop	Data Type	Default Value	Description
Extends	SwitchProps$1	--	Inherits properties from SwitchProps$1
position	"left" | "right"	right	Control the position of the field
adjacent	boolean	true	Set it to false to position them apart i.e. space-between
color	string	--	Set custom color
label	string	--	Label text above the input
caption	string	--	Caption text below the text input
error	string	--	Error text in error `status` below caption text
containerStyle	StyleProp<ViewStyle>	--	Container view style
labelStyle	StyleProp<TextStyle>	--	Label text style
captionStyle	StyleProp<TextStyle>	--	Caption text style
errorStyle	StyleProp<TextStyle>	--	Error text style
status	BlossomStatus	primary	--
size	BlossomSize	medium	--