WEBVTT

1
00:00:00.160 --> 00:00:01.980
Hi and welcome to this tutorial.

2
00:00:02.010 --> 00:00:05.650
Today we're going to dive into the
exciting topic of event handling.

3
00:00:05.680 --> 00:00:07.820
Event handling is an essential concept

4
00:00:07.850 --> 00:00:11.300
in any type of programming,
and React Native is no exception.

5
00:00:11.330 --> 00:00:15.260
It allows us to create interactive
and dynamic applications by responding

6
00:00:15.290 --> 00:00:18.980
to user input and other events
that happen within our app.

7
00:00:19.010 --> 00:00:23.020
Now let's dive into the code
and see how event handling works.

8
00:00:23.040 --> 00:00:24.340
You're now looking at my screen

9
00:00:24.370 --> 00:00:28.020
with my edit opened exactly where
we left off in the last lesson.

10
00:00:28.050 --> 00:00:33.500
I have the simulator running and I have
the Metro bundler running here as well.

11
00:00:33.530 --> 00:00:35.820
For example, let's go back to my text

12
00:00:35.850 --> 00:00:38.820
component that we created
a couple of lessons ago.

13
00:00:38.850 --> 00:00:40.600
And let's set up an alert when.

14
00:00:40.630 --> 00:00:42.300
The text is clicked.

15
00:00:42.330 --> 00:00:46.340
First of all, what we need to do
is use the Mytext component here.

16
00:00:46.370 --> 00:00:49.740
So let's change the item here and.

17
00:00:49.770 --> 00:00:52.980
Let'S import Mytext component instead.

18
00:00:53.010 --> 00:00:57.300
And then let's use
the Mytext component here.

19
00:00:57.330 --> 00:01:01.020
Great.
We now see our text as we saw before.

20
00:01:01.050 --> 00:01:03.420
Now let's go to Mytext component.

21
00:01:03.450 --> 00:01:10.020
And here let's set up an event that will
show us an alert when text is clicked.

22
00:01:10.050 --> 00:01:12.700
This is made possible by handling the.

23
00:01:12.730 --> 00:01:16.210
Onpress event of the text component.

24
00:01:16.240 --> 00:01:17.850
And we're going to be attaching the.

25
00:01:17.880 --> 00:01:22.180
Function to this event and we're going
to specify what should happen when the.

26
00:01:22.210 --> 00:01:23.780
User clicks the text.

27
00:01:23.810 --> 00:01:33.380
So let's say a function should execute
here called Handle Text click.

28
00:01:33.410 --> 00:01:37.600
And let's set up this function here.

29
00:01:43.560 --> 00:01:53.060
And let's make it show us an alert
that the text has been clicked.

30
00:01:53.090 --> 00:01:55.490
Let's save this and then let's just.

31
00:01:55.520 --> 00:01:58.900
Go here and click on our text component.

32
00:01:58.930 --> 00:02:05.060
And once we click, we see an alert
and it says the text has been clicked.

33
00:02:05.090 --> 00:02:07.100
Event handling is important because it

34
00:02:07.130 --> 00:02:10.140
allows us to create interactive
and responsive application,

35
00:02:10.170 --> 00:02:13.820
and it a fundamental building
block in React Native development.

36
00:02:13.850 --> 00:02:18.020
With the help of event handling,
we can create variety of interactions

37
00:02:18.050 --> 00:02:22.700
including button clicks, text input,
swipe gestures, and much more.

38
00:02:22.730 --> 00:02:26.060
So now you know the basics
of event handling in React Native.

39
00:02:26.090 --> 00:02:31.170
Give it a try and start creating dynamic
and interactive applications today.

40
00:02:31.200 --> 00:02:33.280
Thanks for watching.
See you in the next video.