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).


Light mode

Dark mode


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


  • 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).


Basic Usage

Here’s how you can use the Toggle component:

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

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