How to create a Toggle switch in react-native using Material Design library ?
Approach: In this article, we will see how to create a toggle switch in react-native using material design. We will use react-native-paper library material design to create it.
In this project, whenever the switch will be toggled, an alert message will appear that will show the status of the switch.
Below is the step by step implementation:
Step 1: Create a project in react-native using the following command:
npx react-native init DemoProject
Step 2: Install react-native paper using the following command:
npm install react-native-paper
Step 3: Create a components folder inside your project. Inside the components folder create a file ToggleSwitch.js
Project Structure: It will look like this.
Example: Write down the code in respective files. In ToggleSwitch.js , we will import Switch Component from ‘react-native-paper’ library .
Now import this file in your App.js file
Step to run the application: Run the application using the following command:
npx react-native run-android