WEBVTT

1
00:00:00.320 --> 00:00:04.340
Hi and welcome to this tutorial on the
text input components in React native.

2
00:00:04.370 --> 00:00:08.380
The text input component is used
to gather text input from the user.

3
00:00:08.410 --> 00:00:10.420
It is a fundamental building block

4
00:00:10.450 --> 00:00:15.900
for creating forms, search bars and other
text-based user interfaces in React native.

5
00:00:15.930 --> 00:00:20.580
Now let's dive into coding and explore
what text input component has to offer us

6
00:00:20.600 --> 00:00:23.940
and how we can use it
for better user experience.

7
00:00:23.970 --> 00:00:27.780
Screen with my editor opened
and my simulator running and I have

8
00:00:27.810 --> 00:00:32.340
my Metro bundler running here as well so
that we see the changes in the simulator.

9
00:00:32.370 --> 00:00:37.780
And what I want to display to you
is how to use text input component.

10
00:00:37.810 --> 00:00:43.580
So first what we need to do is import
the text input component from React native

11
00:00:43.610 --> 00:00:47.660
and then we're going to be using
the text input component in here.

12
00:00:47.680 --> 00:00:50.260
After we save this,
you're going to see that nothing's

13
00:00:50.290 --> 00:00:54.580
displayed here even though the text input
component is actually present here.

14
00:00:54.610 --> 00:00:57.580
And the reason for this is
because we don't have any styles.

15
00:00:57.610 --> 00:00:59.620
So let's apply some styles to this

16
00:00:59.650 --> 00:01:07.490
and let's apply a border first
of all so that we see this.

17
00:01:07.520 --> 00:01:08.850
And here we go.

18
00:01:08.880 --> 00:01:10.700
Here's our text input component.

19
00:01:10.730 --> 00:01:17.410
We could make this more beautiful by
adding some padding to this, maybe ten.

20
00:01:17.440 --> 00:01:21.260
And we could make it have
the round borders as well.

21
00:01:21.290 --> 00:01:27.660
So we could give it some border radius,
let's say four.

22
00:01:27.690 --> 00:01:28.780
And here we go.

23
00:01:28.810 --> 00:01:31.380
We have the text input component now.

24
00:01:31.410 --> 00:01:36.200
So first and most important thing about
text input component is that you could

25
00:01:36.230 --> 00:01:41.620
give it a value and this will be
a current text value of the input field.

26
00:01:41.650 --> 00:01:43.900
So if you give it some default value,

27
00:01:43.930 --> 00:01:48.020
it could be empty which would
set it to no value.

28
00:01:48.050 --> 00:01:51.460
Or you could just say your name here,

29
00:01:51.490 --> 00:01:56.380
your name maybe and this would
actually be written here.

30
00:01:56.410 --> 00:01:59.140
So whenever you try to change it,

31
00:01:59.170 --> 00:02:05.180
this text could not change because we
don't have an event handler and you could

32
00:02:05.210 --> 00:02:08.730
have an event handler that's
called onChangeText.

33
00:02:08.760 --> 00:02:13.610
And this will be a callback function that
is called when the text value changes.

34
00:02:13.640 --> 00:02:15.500
So let's set this up for this.

35
00:02:15.530 --> 00:02:20.160
We're going to use the useState hook

36
00:02:20.240 --> 00:02:26.100
and we're going to create a variable here
and we're going to call it text value.

37
00:02:26.130 --> 00:02:30.660
And then we're going to create a set
of function for this that will be called

38
00:02:30.690 --> 00:02:38.730
set text value and the default value
will be set to an empty string.

39
00:02:38.760 --> 00:02:47.320
And now let's use this for our
default value here and onChangeText

40
00:02:47.760 --> 00:02:50.300
let's accept a value that's incoming

41
00:02:50.330 --> 00:02:56.700
from the user and say set
text value to this value.

42
00:02:56.720 --> 00:02:58.180
Right now what's going to happen is

43
00:02:58.200 --> 00:03:00.860
that if we're going to enter the text,
we're going to be seeing it.

44
00:03:00.890 --> 00:03:04.610
And every time we enter a value

45
00:03:04.640 --> 00:03:10.540
in the input field, we're going to get
the whole value in this function.

46
00:03:10.570 --> 00:03:16.580
So we could use a console log function
here to see how this functions.

47
00:03:16.610 --> 00:03:24.220
So let's reload our app
and say my name is Nata.

48
00:03:24.250 --> 00:03:28.880
So you see with each
character we get the value.

49
00:03:29.240 --> 00:03:30.660
Great.

50
00:03:30.690 --> 00:03:36.080
So the next thing that I want to discuss
is the placeholder prop and this will be

51
00:03:36.110 --> 00:03:40.980
a placeholder to let your user know
what kind of input is expected here.

52
00:03:41.010 --> 00:03:47.600
So we could say
please enter your name here.

53
00:03:48.080 --> 00:03:53.980
And if we reload our application,
we're going to see a placeholder here

54
00:03:54.000 --> 00:03:57.300
and the user will know that they are
going to have to type in their name.

55
00:03:57.330 --> 00:04:01.140
What we could also use is out of focus

56
00:04:01.170 --> 00:04:04.740
and we could pass it
a boolean value of True.

57
00:04:04.770 --> 00:04:09.800
And this way
when we reload our application,

58
00:04:09.960 --> 00:04:13.220
the input field will be
automatically focused.

59
00:04:13.250 --> 00:04:20.600
So notice that if we set this to false,
if we reload our application,

60
00:04:20.840 --> 00:04:23.620
the input field is not
going to be auto focused.

61
00:04:23.650 --> 00:04:28.940
So you'll have to enter and press
here so that you can enter some text.

62
00:04:28.970 --> 00:04:32.080
So let's set this to true.

63
00:04:32.240 --> 00:04:35.700
And the last thing that I want to discuss
is for example,

64
00:04:35.720 --> 00:04:40.620
how to handle the passwords if
the user wants to enter a password.

65
00:04:40.650 --> 00:04:42.620
So for this, let's create another text

66
00:04:42.650 --> 00:04:50.020
input component and let's say that we
are expecting a password here.

67
00:04:50.040 --> 00:04:59.540
Let's create another handler here
for password value, set password value

68
00:04:59.570 --> 00:05:04.980
that's going to be an empty
initial state as well.

69
00:05:05.010 --> 00:05:11.300
And then let's use this function here
and let's use the password value here.

70
00:05:11.330 --> 00:05:18.500
And then you could use secure text
entry which takes in a boolean value.

71
00:05:18.530 --> 00:05:22.340
And this determines whether
the input should be obscured.

72
00:05:22.360 --> 00:05:25.460
And it's typically used
for password fields.

73
00:05:25.480 --> 00:05:28.700
So if we say true for this,

74
00:05:28.730 --> 00:05:35.020
when we're going to be entering some input
here, it's going to appear as password.

75
00:05:35.040 --> 00:05:40.580
And notice that if we console log
the value here,

76
00:05:40.600 --> 00:05:45.340
we are actually going to be getting
the value that user is entering.

77
00:05:45.360 --> 00:05:51.480
So let's say that I'm
entering my password here.

78
00:05:55.080 --> 00:06:00.180
We're going to be receiving
the characters that I'm typing here.

79
00:06:00.200 --> 00:06:00.740
Great.

80
00:06:00.770 --> 00:06:04.380
So this is how the password text
input component would work.

81
00:06:04.410 --> 00:06:09.500
Now I also want to discuss
the properties called keyboard type.

82
00:06:09.530 --> 00:06:12.300
And this is used to specify the type

83
00:06:12.330 --> 00:06:16.700
of the keyboard that should be displayed
when the input field is focused.

84
00:06:16.730 --> 00:06:20.860
And the default value for this is default.

85
00:06:20.890 --> 00:06:29.500
So keyboard type default would
give us the default keyboard type.

86
00:06:29.530 --> 00:06:34.260
And if we want to see how the keyboard
would look, we could go

87
00:06:34.290 --> 00:06:39.700
here and we could just say toggle
keyboard for the software.

88
00:06:39.730 --> 00:06:42.500
So this is the default keyboard.

89
00:06:42.530 --> 00:06:44.582
But if we were to change

90
00:06:44.782 --> 00:06:47.660
the type of the keyboard to numeric,

91
00:06:47.690 --> 00:06:53.540
for example,
you would see the numeric keyboard here.

92
00:06:53.570 --> 00:06:58.560
What you could also do is have a phone pad

93
00:06:58.960 --> 00:07:04.180
value
that would give you different things here

94
00:07:04.210 --> 00:07:09.420
such as plus, just in case you're
calling internationally, let's say.

95
00:07:09.450 --> 00:07:15.460
And you could also have a keyboard
specifically for emails.

96
00:07:15.480 --> 00:07:21.460
So let's copy this for example
and paste it here.

97
00:07:21.480 --> 00:07:26.200
And let's set up an email
input field as well.

98
00:07:26.760 --> 00:07:29.300
So let's say email,

99
00:07:29.330 --> 00:07:36.580
set email and then let's have email here
and set email and we're going to say

100
00:07:36.600 --> 00:07:42.380
please enter your email here and let's

101
00:07:42.410 --> 00:07:50.000
give it the keyboard type of email.

102
00:07:51.200 --> 00:07:59.260
Actually it's email address
and then if we press here

103
00:07:59.290 --> 00:08:05.180
we're going to see that email key
is present here for easy access.

104
00:08:05.210 --> 00:08:08.300
This is good for the user experience.

105
00:08:08.330 --> 00:08:14.020
Now I also want to discuss a property
called return key type

106
00:08:14.040 --> 00:08:19.620
and return key type is used to specify
the type of return key that should be

107
00:08:19.650 --> 00:08:24.460
displayed on the keyboard and I will
discuss some of the possibilities.

108
00:08:24.480 --> 00:08:27.060
So this is the return key here.

109
00:08:27.090 --> 00:08:34.500
So let's say
we set up the return key type here.

110
00:08:34.530 --> 00:08:37.220
Some of the possibilities for here is

111
00:08:37.250 --> 00:08:44.540
for example done and if we press into this
again we're going to see done here.

112
00:08:44.560 --> 00:08:50.060
We could also have a return key type of Go

113
00:08:50.080 --> 00:08:56.500
and let's try to rerender this keyboard
and you're going to see Go here instead.

114
00:08:56.530 --> 00:09:03.620
You could use the Go key when the input
is used for a search or other action.

115
00:09:03.650 --> 00:09:06.300
You could also use a return key type

116
00:09:06.320 --> 00:09:10.740
of Next for example,
and this would typically be used when

117
00:09:10.770 --> 00:09:14.740
the input is part of a form
with multiple fields.

118
00:09:14.770 --> 00:09:18.180
And then you could also use

119
00:09:18.200 --> 00:09:23.700
a search value
for the return key type and let's rerender

120
00:09:23.730 --> 00:09:28.580
our keyboard again and you
can have search here.

121
00:09:28.610 --> 00:09:32.140
And this is typically used when
the input is used for searching.

122
00:09:32.170 --> 00:09:35.620
That's a basic overview of the text
input component in react native.

123
00:09:35.640 --> 00:09:37.520
Thanks for watching and see
you in the next video.