Slider

A simple Switch component.

Import

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

Usage

Default

EDITABLE EXAMPLE

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

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

Change color

EDITABLE EXAMPLE

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

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

Sizes

EDITABLE EXAMPLE

const SimpleSwitch = () => {
  const [isChecked1, toggle1] = React.useState(false);
  const [isChecked2, toggle2] = React.useState(false);
  const [isChecked3, toggle3] = React.useState(false);
  const [isChecked4, toggle4] = React.useState(false);

  return (
    <HStack spacing="md">
      <Switch size="xs" isChecked={isChecked1} onPress={() => toggle1(!isChecked1)} />
      <Switch size="sm" colorScheme="blue" isChecked={isChecked2} onPress={() => toggle2(!isChecked2)} />
      <Switch size="md" colorScheme="orange" isChecked={isChecked3} onPress={() => toggle3(!isChecked3)} />
      <Switch size="lg" colorScheme="purple" isChecked={isChecked4} onPress={() => toggle4(!isChecked4)} />
    </HStack>
  );
}
render(<SimpleSwitch />)

Change animation duration

EDITABLE EXAMPLE

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

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

Disabled

EDITABLE EXAMPLE

const SimpleSwitch = () => {
  return (
    <HStack spacing="md">
      <Switch isDisabled isChecked={false} />
      <Switch isDisabled isChecked />
    </HStack>
  );
}
render(<SimpleSwitch />)

Props

Extends every Box props.

`colorScheme`

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

Type	Required	Default
string	No

`isDisabled`

Disables onPress handler when true.

Type	Required	Default
boolean	No

`isChecked`

Makes the toggle checked when true.

Type	Required	Default
boolean	No

`onPress`

onPress event handler.

Type	Required	Default
function	No

Slider Box