Components
Toggle
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, andfalse
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} />;