Cursos /
Foundations of React Native
Switch Component
Before working with the following React Native components, we had to delve into the principles of hooks and navigation. Now, we can revert to native mobile concepts.
Theory
The Switch
component in React Native is used to toggle between two states - typically representing an "on/off" or "true/false" selection. It provides users with a visual indicator of the current state and allows them to change it with a simple tap.
Why Do We Need It?
- Binary Selection:
- Useful for scenarios where you need users to make a binary choice;
- Commonly used for settings, preferences, or toggling certain features.
- User-Friendly:
- Provides a simple and intuitive interface for toggling between states;
- Offers a visual cue of the current state, enhancing user experience.
How to Work with Switch
- The
Switch
component is controlled through itsvalue
prop, which determines whether it is in the "on" or "off" state; - We can use the
onValueChange
prop to specify a callback function that will be called when the user toggles the switch.
Example
Code Description
-
Line 5: We use the useState hook to create a state variable
isEnabled
, which holds the current state of the switch (true
for "on",false
for "off"). -
Lines 7-9:The
toggleSwitch
function is a callback function attached to theonValueChange
prop of theSwitch
component.
When invoked, it toggles the value ofisEnabled
, updating the state to the opposite of its previous value. -
Line 15:The background color of the
View
component is set dynamically using a JavaScript ternary operator.
WhenisEnabled
istrue
(indicating the switch is "on"), the background color is set to#81b0ff
, representing a blue color.
WhenisEnabled
isfalse
(indicating the switch is "off"), the background color is set to#ffffff
, representing white. -
Lines 18-24: The
Switch
component is rendered within theView
component.
Itsvalue
prop is controlled by theisEnabled
state variable, and its appearance is customized using thetrackColor
andthumbColor
props.
Result
In Practice
Tudo estava claro?
Seção 4. Capítulo 1
Conteúdo do Curso
Foundations of React Native
Foundations of React Native
Switch Component
Before working with the following React Native components, we had to delve into the principles of hooks and navigation. Now, we can revert to native mobile concepts.
Theory
The Switch
component in React Native is used to toggle between two states - typically representing an "on/off" or "true/false" selection. It provides users with a visual indicator of the current state and allows them to change it with a simple tap.
Why Do We Need It?
- Binary Selection:
- Useful for scenarios where you need users to make a binary choice;
- Commonly used for settings, preferences, or toggling certain features.
- User-Friendly:
- Provides a simple and intuitive interface for toggling between states;
- Offers a visual cue of the current state, enhancing user experience.
How to Work with Switch
- The
Switch
component is controlled through itsvalue
prop, which determines whether it is in the "on" or "off" state; - We can use the
onValueChange
prop to specify a callback function that will be called when the user toggles the switch.
Example
Code Description
-
Line 5: We use the useState hook to create a state variable
isEnabled
, which holds the current state of the switch (true
for "on",false
for "off"). -
Lines 7-9:The
toggleSwitch
function is a callback function attached to theonValueChange
prop of theSwitch
component.
When invoked, it toggles the value ofisEnabled
, updating the state to the opposite of its previous value. -
Line 15:The background color of the
View
component is set dynamically using a JavaScript ternary operator.
WhenisEnabled
istrue
(indicating the switch is "on"), the background color is set to#81b0ff
, representing a blue color.
WhenisEnabled
isfalse
(indicating the switch is "off"), the background color is set to#ffffff
, representing white. -
Lines 18-24: The
Switch
component is rendered within theView
component.
Itsvalue
prop is controlled by theisEnabled
state variable, and its appearance is customized using thetrackColor
andthumbColor
props.
Result
In Practice
Tudo estava claro?
Seção 4. Capítulo 1