React Native's Controlled Switch Component
The Switch component is a 'controlled' input; it doesn't manage its own state. You use it for on/off settings by telling it what to display via the value prop and updating that state in the onValueChange callback. The footgun is forgetting this link.
Why it exists
The Switch component exists to provide a standard, platform-native toggle for boolean (true/false) user inputs. It ensures a familiar look and feel for on/off settings across both iOS and Android without you having to build it from scratch.
The mental model
Think of the Switch as a puppet, and your app's state is the puppeteer. The component is 'controlled,' meaning it doesn't have its own internal on/off state. It only displays the boolean value you pass to it and reports when a user wants to change that value.
How it works
The flow is a simple loop: First, the Switch renders based on its value prop (e.g., value={true} shows it as 'on'). Second, when the user taps it, the onValueChange callback fires with the new proposed value. Third, in that callback, you must update your app's state. Finally, the component re-renders with the new value from your state, completing the visual change. If you miss the third step, the value prop never changes, and the switch will appear to snap back to its original position, ignoring the user's tap.
When to use it
Use the Switch for any binary setting that a user can toggle. Common examples include enabling dark mode, turning notifications on or off, or agreeing to terms and conditions.
When not to use it
Avoid using a Switch for actions that are not state changes. For a one-time action like 'Submit' or 'Send', a Button is more appropriate. For selecting one option from a list of many, use a Picker or a custom radio button group.
One canonical example
To make a Switch work, you connect a state variable to its props. For example, you would declare state like const [isNotificationsEnabled, setNotificationsEnabled] = useState(false);. Then, you would render the component like this:
<Switch
onValueChange={newValue => setNotificationsEnabled(newValue)}
value={isNotificationsEnabled}/> Here, value reads from the state, and onValueChange writes back to it.
Interview question
What is the primary consequence if you forget to update your app's state within the onValueChange callback for a React Native Switch?
- a.The application will crash due to an unhandled state inconsistency.
- b.The Switch will visually revert to its previous state after the user interaction.Correct
- c.The onValueChange callback will not be triggered when the user taps the Switch.
- d.The Switch will visually appear toggled, but its associated state variable will not change.
Why? this is the answer
The card explicitly states that if the state isn't updated, "the switch will appear to snap back to its original position." This is because the Switch's visual state is controlled by the 'value' prop, which won't change if the underlying state isn't updated. Option D is incorrect because the visual state does not persist; it reverts.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #component
- #state-management
- #ui
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles