WEBVTT

1
00:00:00.480 --> 00:00:04.220
Hi and welcome to our tutorial
on the React native switch component.

2
00:00:04.240 --> 00:00:06.020
In this video we'll be discussing what

3
00:00:06.050 --> 00:00:09.090
a switch component is,
why it's useful and what are

4
00:00:09.120 --> 00:00:12.860
the differences in styling between
Android and iOS platforms.

5
00:00:12.890 --> 00:00:15.060
We'll also be creating an example of

6
00:00:15.090 --> 00:00:17.380
how to use the switch component.

7
00:00:17.400 --> 00:00:19.580
A switch components in React native is.

8
00:00:19.600 --> 00:00:23.060
A toggleable button that can
be turned on or off.

9
00:00:23.080 --> 00:00:25.620
It's similar to a checkbox but its designed

10
00:00:25.650 --> 00:00:28.620
to be more user friendly
and touch friendly.

11
00:00:28.650 --> 00:00:30.340
The switch components can be used

12
00:00:30.370 --> 00:00:34.140
in various scenarios such
as enabling or disabling

13
00:00:34.170 --> 00:00:37.460
a feature or setting or a preference.

14
00:00:37.490 --> 00:00:39.480
It is useful because it allows users

15
00:00:39.500 --> 00:00:42.380
to quickly and easily
toggle between two states.

16
00:00:42.410 --> 00:00:44.760
It's also visually appealing and easy to

17
00:00:44.790 --> 00:00:50.060
use, making it a great choice for settings
or options in your applications.

18
00:00:50.090 --> 00:00:54.620
Now let's explore how to create switch
components and let's get coding.

19
00:00:54.640 --> 00:00:56.180
You're now looking at my screen

20
00:00:56.210 --> 00:01:01.700
with my editor opened, my simulator here
and my Metro bundler running as well.

21
00:01:01.730 --> 00:01:06.700
So we're going to see how a switch
component works in React native. For this,

22
00:01:06.720 --> 00:01:08.770
first of all we need to import the switch

23
00:01:08.800 --> 00:01:16.100
component here and then let's say we want
a switch button here to say whether we

24
00:01:16.130 --> 00:01:20.660
should keep the user logged
in or not once they log in.

25
00:01:20.690 --> 00:01:25.180
So let's create the switch component here.

26
00:01:25.210 --> 00:01:29.380
If we save this we're going to see
the switch component

27
00:01:29.410 --> 00:01:34.100
but we can't change its state because
we need to create a state for that.

28
00:01:34.130 --> 00:01:41.290
So let's create the state
should keep logged in,

29
00:01:41.320 --> 00:01:50.140
set should keep logged in and the default
state is going to be true.

30
00:01:50.170 --> 00:01:53.930
And then if we assign its value to should

31
00:01:53.960 --> 00:01:57.100
keep logged in, we're going to see
that this is going to be turned on.

32
00:01:57.120 --> 00:01:59.020
If we want to keep track of what the user

33
00:01:59.050 --> 00:02:02.780
does with this, then we can
set up an onChange event.

34
00:02:02.810 --> 00:02:05.620
So on value change we're going to get

35
00:02:05.650 --> 00:02:13.580
the value and then we're going to set
should keep plugged into this value.

36
00:02:13.610 --> 00:02:18.100
And now if we press
we're going to be able to toggle between

37
00:02:18.130 --> 00:02:23.580
the two states and our state is
also going to be changed here.

38
00:02:23.610 --> 00:02:31.140
So we can also put a text here and keep

39
00:02:31.170 --> 00:02:36.640
me logged in is what it's going to say.

40
00:02:37.000 --> 00:02:43.780
And now we need a view
container here

41
00:02:43.810 --> 00:02:49.020
so that they are grouped together
and let's import the view container.

42
00:02:49.050 --> 00:02:52.060
And to keep them in the same line,

43
00:02:52.090 --> 00:03:01.260
what we could do is use a flex style
that we're going to introduce very soon

44
00:03:01.290 --> 00:03:06.940
and we're just going
to say flex direction row.

45
00:03:06.970 --> 00:03:11.610
This will place them
in the same line in a row.

46
00:03:11.640 --> 00:03:14.360
And if we want to center the items as

47
00:03:14.390 --> 00:03:23.300
well, we could use a line items center
and this will center it vertically.

48
00:03:23.330 --> 00:03:25.780
Now if we were to pass

49
00:03:25.810 --> 00:03:31.100
all of this information to a form,
we could get the information from here

50
00:03:31.130 --> 00:03:34.060
which is continuing and building
on the last lesson.

51
00:03:34.090 --> 00:03:39.100
So if we just console log
should keep logged in here.

52
00:03:39.130 --> 00:03:44.780
And if we reload our application if we
enter our email here

53
00:03:44.810 --> 00:03:49.060
and if we enter some password
and the submit button is available if we

54
00:03:49.090 --> 00:03:54.460
click on here, we're going to see that the
value of the switch component is true.

55
00:03:54.490 --> 00:03:59.340
So the user does want us
to keep them logged in.

56
00:03:59.370 --> 00:04:02.540
That's it for our tutorial
on the React native switch component.

57
00:04:02.570 --> 00:04:04.380
I hope you find it helpful.

58
00:04:04.400 --> 00:04:07.300
Don't forget to experiment
with the styling options to make

59
00:04:07.330 --> 00:04:11.380
the switch component look and feel
like a perfect fit for your app.

60
00:04:11.400 --> 00:04:13.600
Thanks for watching and see
you in the next video.