Switch

Toggle component from Magnus UI, moved to colorScheme prop from Chakra UI.

Import

import { Switch } from 'react-native-ficus-ui';

Usage

Default

const SimpleSwitch = () => {
  const [on, toggle] = React.useState(false);

  return (
    <Switch on={on} onPress={() => toggle(!on)} />
  );
}
render(<SimpleSwitch />)

Change color

const SimpleSwitch = () => {
  const [on, toggle] = React.useState(false);

  return (
    <Switch colorScheme="red" on={on} onPress={() => toggle(!on)} />
  );
}
render(<SimpleSwitch />)

Change thumb size

const SimpleSwitch = () => {
  const [on, toggle] = React.useState(false);

  return (
    <Switch thumbSize={8} on={on} onPress={() => toggle(!on)} />
  );
}
render(<SimpleSwitch />)

Props

colorScheme

The colorScheme property, will define background color of switch when is active.

activeBg

The background color of switch when is active.

bg

The background color property (backgroundColor style prop in StyleSheet)

thumbBg

The background color of thumb component (circle).

activeThumbBg

The background color of thumb when toggle is on.

thumbSize

The size of thumb component.

isDisabled

Disables onPress handler when true.

onPress

onPress event handler.

on

makes the toggle active when true.

m

The margin property (margin style prop in StyleSheet)

mt

The margin top property (marginTop style prop in StyleSheet)

mb

The margin bottom property (marginBottom style prop in StyleSheet)

mr

The margin right property (marginRight style prop in StyleSheet)

ml

The margin left property (marginLeft style prop in StyleSheet)

mx

The margin horizontal property (marginHorizontal style prop in StyleSheet)

my

The margin vertical property (marginVertical style prop in StyleSheet)

p

The padding property (padding style prop in StyleSheet)

pt

The padding top property (paddingTop style prop in StyleSheet)

pb

The padding bottom property (paddingBottom style prop in StyleSheet)

pr

The padding right property (paddingRight style prop in StyleSheet)

pl

The padding left property (paddingLeft style prop in StyleSheet)

px

The padding horizontal property (paddingHorizontal style prop in StyleSheet)

py

The padding vertical property (paddingVertical style prop in StyleSheet)

h

The height property (height style prop in StyleSheet)

w

The width property (width style prop in StyleSheet)

borderRadius

The border radius property (borderRadius style prop in StyleSheet)

borderTopRadius

The border radius top property (borderTopLeftRadius and borderTopRightRadius style props in StyleSheet)

borderBottomRadius

The border radius bottom property (borderBottomLeftRadius and borderBottomRightRadius style props in StyleSheet)

borderLeftRadius

The border radius left property (borderTopLeftRadius and borderBottomLeftRadius style props in StyleSheet)

borderRightRadius

The border radius right property (borderTopRightRadius and borderBottomRightRadius style props in StyleSheet)

borderTopLeftRadius

The border radius top left property (borderTopLeftRadius style prop in StyleSheet)

borderTopRightRadius

The border radius top right property (borderTopRightRadius style prop in StyleSheet)

borderBottomLeftRadius

The border radius bottom left property (borderBottomLeftRadius style prop in StyleSheet)

borderBottomRightRadius

The border radius bottom right property (borderBottomRightRadius style prop in StyleSheet)

borderColor

The border color property (borderColor style prop in StyleSheet)

borderTopColor

The border top color property (borderTopColor style prop in StyleSheet)

borderBottomColor

The border bottom color property (borderBottomColor style prop in StyleSheet)

borderRightColor

The border right color property (borderRightColor style prop in StyleSheet)

borderLeftColor

The border left color property (borderLeftColor style prop in StyleSheet)

borderWidth

The border width property (borderWidth style prop in StyleSheet)

borderTopWidth

The border top width property (borderTopWidth style prop in StyleSheet)

borderBottomWidth

The border bottom width property (borderBottomWidth style prop in StyleSheet)

borderRightWidth

The border right width property (borderRightWidth style prop in StyleSheet)

borderLeftWidth

The border left width property (borderLeftWidth style prop in StyleSheet)