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} />;