Hi and welcome to our tutorial on the React native switch component.
In this video we'll be discussing what
a switch component is, why it's useful and what are
the differences in styling between Android and iOS platforms.
We'll also be creating an example of
how to use the switch component.
A switch components in React native is.
A toggleable button that can be turned on or off.
It's similar to a checkbox but its designed
to be more user friendly and touch friendly.
The switch components can be used
in various scenarios such as enabling or disabling
a feature or setting or a preference.
It is useful because it allows users
to quickly and easily toggle between two states.
It's also visually appealing and easy to
use, making it a great choice for settings or options in your applications.
Now let's explore how to create switch components and let's get coding.
You're now looking at my screen
with my editor opened, my simulator here and my Metro bundler running as well.
So we're going to see how a switch component works in React native. For this,
first of all we need to import the switch
component here and then let's say we want a switch button here to say whether we
should keep the user logged in or not once they log in.
So let's create the switch component here.
If we save this we're going to see the switch component
but we can't change its state because we need to create a state for that.
So let's create the state should keep logged in,
set should keep logged in and the default state is going to be true.
And then if we assign its value to should
keep logged in, we're going to see that this is going to be turned on.
If we want to keep track of what the user
does with this, then we can set up an onChange event.
So on value change we're going to get
the value and then we're going to set should keep plugged into this value.
And now if we press we're going to be able to toggle between
the two states and our state is also going to be changed here.
So we can also put a text here and keep
me logged in is what it's going to say.
And now we need a view container here
so that they are grouped together and let's import the view container.
And to keep them in the same line,
what we could do is use a flex style that we're going to introduce very soon
and we're just going to say flex direction row.
This will place them in the same line in a row.
And if we want to center the items as
well, we could use a line items center and this will center it vertically.
Now if we were to pass
all of this information to a form, we could get the information from here
which is continuing and building on the last lesson.
So if we just console log should keep logged in here.
And if we reload our application if we enter our email here
and if we enter some password and the submit button is available if we
click on here, we're going to see that the value of the switch component is true.
So the user does want us to keep them logged in.
That's it for our tutorial on the React native switch component.
I hope you find it helpful.
Don't forget to experiment with the styling options to make
the switch component look and feel like a perfect fit for your app.
Thanks for watching and see you in the next video.