WEBVTT

1
00:00:00.320 --> 00:00:02.020
Hi and welcome to this video.

2
00:00:02.040 --> 00:00:03.600
Today we're going to be discussing one

3
00:00:03.600 --> 00:00:05.860
of the most important
concepts in react native.

4
00:00:05.890 --> 00:00:08.460
That is the useref hook.

5
00:00:08.490 --> 00:00:11.700
Useref hook is a hook that lets you keep

6
00:00:11.730 --> 00:00:17.180
a reference to a DOM node or
react element across renders.

7
00:00:17.210 --> 00:00:21.860
It is useful when you need to interact
with DOM directly or when you need to keep

8
00:00:21.890 --> 00:00:26.620
a value that does not
change between renders.

9
00:00:26.650 --> 00:00:30.140
So let's take an example
to understand this better.

10
00:00:30.170 --> 00:00:34.620
Let's say you have a component
that displays a list of items and you want

11
00:00:34.640 --> 00:00:42.340
to add a button that when clicked, scrolls
the list to the top of the scroll view.

12
00:00:42.370 --> 00:00:46.540
To do this, we're going to need
to import a scroll view.

13
00:00:46.570 --> 00:00:51.880
First of all,
we're going to have to put it here.

14
00:00:53.480 --> 00:00:55.540
And let's say that this scroll view

15
00:00:55.570 --> 00:01:00.100
component has bunch of hello world
text components inside of it.

16
00:01:00.130 --> 00:01:03.180
So let's say that we have 100.

17
00:01:03.210 --> 00:01:06.100
So let's create an array with

18
00:01:06.130 --> 00:01:10.460
actually let's do 1000
and let's fill this with zeros.

19
00:01:10.490 --> 00:01:14.100
This is just going to create array
with thousand elements full of zeros.

20
00:01:14.130 --> 00:01:19.260
But we are going to use this to map

21
00:01:19.290 --> 00:01:24.210
and then let's do value
and this returns a text.

22
00:01:24.240 --> 00:01:30.140
And let's say the key because we'll
need it is let's take the index.

23
00:01:30.170 --> 00:01:35.340
Let's just make the index the key
and I missed the parenthesis here.

24
00:01:35.370 --> 00:01:37.290
Right now if I save this,

25
00:01:37.320 --> 00:01:42.900
I have a bunch of hello world
texts that I have to scroll through.

26
00:01:42.930 --> 00:01:47.290
Okay, and now let's create a button.

27
00:01:47.320 --> 00:01:57.060
And this button on press should scroll
at the top of the handle click.

28
00:01:57.090 --> 00:02:00.180
At the top of this scroll view.

29
00:02:00.210 --> 00:02:03.490
Now I get an error because I
don't have the handle click.

30
00:02:03.520 --> 00:02:11.660
Let's give this a title and say scroll
to top.

31
00:02:11.690 --> 00:02:18.220
And let's create the handle click
function that will do nothing so far.

32
00:02:18.250 --> 00:02:22.580
And let's import the button
components here.

33
00:02:22.610 --> 00:02:25.500
And this is our button
here, scroll to top.

34
00:02:25.530 --> 00:02:27.340
Okay, it does nothing so far.

35
00:02:27.370 --> 00:02:34.100
So if we wanted to be able to access
the scroll and say that we want to scroll

36
00:02:34.130 --> 00:02:38.580
it to the top, what we would need
is the reference to the DOM.

37
00:02:38.610 --> 00:02:43.020
And I really want you to understand
very clearly why this is needed.

38
00:02:43.050 --> 00:02:48.020
So in react native you create user
interfaces using a set of predefined

39
00:02:48.050 --> 00:02:50.860
components that are part
of the react native API.

40
00:02:50.890 --> 00:02:52.540
For example, scroll view, right?

41
00:02:52.570 --> 00:02:54.740
We didn't create that component ourselves.

42
00:02:54.760 --> 00:02:56.020
It's not a custom components.

43
00:02:56.050 --> 00:02:59.340
We grabbed it from react native's library.

44
00:02:59.370 --> 00:03:01.140
So these components are implemented

45
00:03:01.170 --> 00:03:06.540
in JavaScript and allow you to create
platform specific UIs for iOS or Android.

46
00:03:06.570 --> 00:03:08.820
However, sometimes you need to access

47
00:03:08.850 --> 00:03:12.940
functionality that is not provided
by the standard react native API.

48
00:03:12.970 --> 00:03:16.700
There are some functions that might
come with react native API.

49
00:03:16.720 --> 00:03:18.660
For example, on scroll event that comes

50
00:03:18.690 --> 00:03:21.610
with scroll view is one
of the things that you could use.

51
00:03:21.640 --> 00:03:23.880
But sometimes the functions that you might

52
00:03:23.910 --> 00:03:29.100
need specifically might not be available
when you want to use it in a specific way.

53
00:03:29.130 --> 00:03:31.180
And this is where references come in.

54
00:03:31.210 --> 00:03:35.780
References allow you to access
the underlying native components and their

55
00:03:35.810 --> 00:03:39.940
properties and methods that are not
available through the react native API.

56
00:03:39.960 --> 00:03:41.580
In case of scrolling a scroll view

57
00:03:41.610 --> 00:03:46.580
to the top on a bottom press we would need
access to a method called scrollTo

58
00:03:46.610 --> 00:03:51.540
that is provided by the underlying
native components of the scroll view.

59
00:03:51.570 --> 00:03:56.140
This method is not part of the standard
react native API and therefore cannot be

60
00:03:56.170 --> 00:03:59.940
accessed using a standard
react native component.

61
00:03:59.970 --> 00:04:04.540
So now let's see how we could use
references to make this happen.

62
00:04:04.570 --> 00:04:10.340
To use a reference we would
have to use useref hook.

63
00:04:10.370 --> 00:04:12.080
Okay?

64
00:04:12.600 --> 00:04:19.260
We import the useref here and all you need
to do to access the scroll view reference

65
00:04:19.280 --> 00:04:24.980
is just say ref and then whatever
we define as a reference.

66
00:04:25.010 --> 00:04:32.960
So let's create for example,
scroll view reference and use ref null,

67
00:04:33.000 --> 00:04:39.100
okay, with no initial value and let's
assign it to the scroll view.

68
00:04:39.130 --> 00:04:44.540
And here I just quickly want
to mention how useref hooks work.

69
00:04:44.570 --> 00:04:46.780
So useref hook is used to store

70
00:04:46.800 --> 00:04:52.140
a reference to a value and in this case
this value is scroll view component.

71
00:04:52.160 --> 00:04:55.060
The initial value of the scroll view ref

72
00:04:55.090 --> 00:05:01.580
is set to null but as soon as
the component is rendered and the ref prop

73
00:05:01.600 --> 00:05:07.740
is passed to the scroll view component,
the scroll view ref dot current property

74
00:05:07.770 --> 00:05:12.260
gets updated to reference
the actual scroll view component.

75
00:05:12.280 --> 00:05:15.100
So when the component is first rendered,

76
00:05:15.130 --> 00:05:19.680
scroll view ref is created using
the useref hook and its initial value is

77
00:05:19.710 --> 00:05:24.700
set to null and then ref prop is
passed to the scroll view component.

78
00:05:24.720 --> 00:05:29.620
And when the scroll view component is
rendered, react updates the scroll view

79
00:05:29.650 --> 00:05:35.220
ref current property to reference
the actual scroll view component.

80
00:05:35.250 --> 00:05:39.620
And when the button is going to be clicked

81
00:05:39.650 --> 00:05:44.140
that we're about to set up and we are
going to call a function,

82
00:05:44.170 --> 00:05:51.540
it accesses the scroll views component
using scrollviewref current and calls

83
00:05:51.570 --> 00:05:55.780
whatever function comes
with that current value method.

84
00:05:55.800 --> 00:06:02.840
And that's how we are going to update
our scroll view to scroll to the top.

85
00:06:03.320 --> 00:06:05.260
Let's save this.

86
00:06:05.290 --> 00:06:12.100
And if we were to use the scroll views
reference we could just do it like this.

87
00:06:12.130 --> 00:06:15.020
We're going to say scroll view ref

88
00:06:15.040 --> 00:06:19.420
dot and then we're going to get
the current value

89
00:06:19.450 --> 00:06:24.380
from the Dom and we are going to use
the Dom's values,

90
00:06:24.410 --> 00:06:28.940
one of the functions that comes
with the scroll view components that is

91
00:06:28.970 --> 00:06:34.020
called scrollTo and then we're going
to say where each should scroll to.

92
00:06:34.040 --> 00:06:35.640
So we're just going to say that we want

93
00:06:35.670 --> 00:06:40.580
to go to the top and let's say
that it should be animated.

94
00:06:40.600 --> 00:06:46.380
Okay, let's save this animated rate.

95
00:06:46.410 --> 00:06:49.060
And now if we scroll

96
00:06:49.090 --> 00:06:54.620
and then we click on scroll to top we are
going to see this animated view

97
00:06:54.650 --> 00:06:59.540
of scrolling to the top and if it's not
completely visible we could say something

98
00:06:59.570 --> 00:07:05.180
like hello world and then use the index
here so that we see where we are.

99
00:07:05.210 --> 00:07:09.580
Okay, let's scroll to the middle and let's

100
00:07:09.600 --> 00:07:13.420
click this again and we
see that we go to the top.

101
00:07:13.450 --> 00:07:17.580
As you can see, we have used the useref
hook to create a reference to the scroll

102
00:07:17.600 --> 00:07:24.140
view component and we use this reference
later to access the DOM of scroll view

103
00:07:24.170 --> 00:07:29.740
and use its function scroll to so that we
scroll the scroll view to the top.

104
00:07:29.770 --> 00:07:31.540
So that's it for our tutorial.

105
00:07:31.570 --> 00:07:36.420
Use Ref in React Native I hope this
tutorial has been helpful in understanding

106
00:07:36.450 --> 00:07:41.500
why we might want to use ref and how to
use it in your React native projects.

107
00:07:41.530 --> 00:07:44.760
Thanks for watching and I'll
see you in the next video.