​
Overview

Toggle is a React Native component designed for creating a switch or toggle control. It offers easy customization through the isEnabled prop and automatically adjusts its appearance based on the device’s color scheme (light or dark mode).

​
Preview

Light mode

Dark mode

​
Installation

Include the Toggle.tsx file in your React Native project. File Link

​
Properties

  • isEnabled: boolean (Required) - The current state of the toggle. true means it’s enabled/on, and false means it’s disabled/off.
  • onToggle: (state: boolean) => void (Required) - Callback function that receives the new state of the toggle when it is toggled.

Note: The appearance of the toggle automatically adjusts based on the current color scheme (light/dark mode).

​
Usage

​
Basic Usage

Here’s how you can use the Toggle component:

const [isToggled, setToggled] = useState(false);

return <Toggle isEnabled={isToggled} onToggle={setToggled} />;
Toast