Зміст курсу

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 its value 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

import React, { useState } from "react";
import { View, Switch, StyleSheet } from "react-native";

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);

  const toggleSwitch = () => {
    setIsEnabled((previousState) => !previousState);
  };

  return (
    <View
      style={[
        styles.container,
        { backgroundColor: isEnabled ? "#81b0ff" : "#ffffff" },
      ]}
    >
      <Switch
        trackColor={{ false: "#767577", true: "#f4f3f4" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
};

export default App;

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 the onValueChange prop of the Switch component.
When invoked, it toggles the value of isEnabled, 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.
When isEnabled is true (indicating the switch is "on"), the background color is set to #81b0ff, representing a blue color.
When isEnabled is false (indicating the switch is "off"), the background color is set to #ffffff, representing white.
Lines 18-24: The Switch component is rendered within the View component.
Its value prop is controlled by the isEnabled state variable, and its appearance is customized using the trackColor and thumbColor props.

Result

In Practice

Все було зрозуміло?

Секція 4. Розділ 1