WEBVTT

1
00:00:00.400 --> 00:00:04.100
Hi and welcome to our tutorial
on stylesheets in React native.

2
00:00:04.130 --> 00:00:06.300
React native provides a powerful way text

3
00:00:06.330 --> 00:00:10.340
styles your comments and create
a consistent look and feel for your app.

4
00:00:10.360 --> 00:00:12.560
In this video we'll be
discussing what

5
00:00:12.590 --> 00:00:15.060
sheets are how they work and providing

6
00:00:15.090 --> 00:00:18.220
examples of how to use them
in your React native app.

7
00:00:18.240 --> 00:00:20.300
A style sheet in React native is a way

8
00:00:20.330 --> 00:00:23.940
to apply a set of styles
to a component or a set of components.

9
00:00:23.970 --> 00:00:28.660
It works similar to CSS in web development
where you can define a set of styles

10
00:00:28.690 --> 00:00:32.380
and then apply them to different
elements in your app.

11
00:00:32.410 --> 00:00:35.340
In React native,
a style sheet is a JavaScript object

12
00:00:35.370 --> 00:00:40.300
that contains a set of properties and values
that define the styles for a component.

13
00:00:40.320 --> 00:00:42.420
These styles can include things like

14
00:00:42.450 --> 00:00:46.180
color, font size,
and layout of a component.

15
00:00:46.210 --> 00:00:47.740
So let's get to coding.

16
00:00:47.770 --> 00:00:50.900
You now see my screen where
I have my simulator open.

17
00:00:50.930 --> 00:00:52.980
My Metro is running so that every change

18
00:00:53.010 --> 00:00:56.420
that I make will be visible
in the simulator here.

19
00:00:56.450 --> 00:01:01.660
And I have my editor opened at the same
place where we left off the last time.

20
00:01:01.680 --> 00:01:06.260
I have my text component shown here
and we're going to dive into different

21
00:01:06.290 --> 00:01:09.770
ways of creating styles
for our components.

22
00:01:09.800 --> 00:01:14.620
The first thing that we're going to be
talking about is creating inline styles.

23
00:01:14.650 --> 00:01:16.850
So what are inline styles?

24
00:01:16.880 --> 00:01:18.980
Inline styles in React native refer

25
00:01:19.010 --> 00:01:23.660
to a way of applying styles directly
to a component instead of using a separate

26
00:01:23.690 --> 00:01:27.850
style sheet that we are going
to be discussing very soon.

27
00:01:27.880 --> 00:01:30.140
Inline styles are defined as JavaScript

28
00:01:30.170 --> 00:01:32.820
objects and are passed
to the component as

29
00:01:32.850 --> 00:01:35.620
a prop typically called style.

30
00:01:35.650 --> 00:01:38.260
So if we want to use inline styles

31
00:01:38.290 --> 00:01:43.850
to change the color of this text here,
we're going to have to apply a prop called

32
00:01:43.880 --> 00:01:49.020
style and we're going to have to open
the brackets so that we'll let the React

33
00:01:49.050 --> 00:01:52.850
native know that we're about to write
a JavaScript expression here.

34
00:01:52.880 --> 00:01:55.290
And we are going to be passing an object

35
00:01:55.320 --> 00:01:59.900
here that is going to contain
a style for our text.

36
00:01:59.930 --> 00:02:04.620
So let's say that we want to create
color for this text and let's

37
00:02:04.650 --> 00:02:08.320
say that this color should be red.

38
00:02:08.480 --> 00:02:10.500
If we save this file right now,

39
00:02:10.530 --> 00:02:16.780
you're going to see that this has been
changed to display a red text. In general,

40
00:02:16.810 --> 00:02:18.800
it's recommended to use style sheets as

41
00:02:18.830 --> 00:02:22.450
much as possible and only use
inline styles when necessary.

42
00:02:22.480 --> 00:02:27.610
So now let's create our
first style sheet. For that

43
00:02:27.640 --> 00:02:29.380
we're going to be creating a new

44
00:02:29.410 --> 00:02:34.260
JavaScript file here and we're
going to call it Style.

45
00:02:34.280 --> 00:02:36.170
And then what we're going to be doing is

46
00:02:36.200 --> 00:02:43.940
we're going to be importing stylesheet
from React native and we're going to be

47
00:02:43.970 --> 00:02:48.300
creating a new style of our own
that we're going to be exporting

48
00:02:48.330 --> 00:02:50.720
and then later on we're going to import it

49
00:02:50.750 --> 00:02:54.610
in our component so that we
can use this style there.

50
00:02:54.640 --> 00:02:59.700
So let's call this style as well.

51
00:02:59.730 --> 00:03:02.980
Our variable and then let's use stylesheet

52
00:03:03.010 --> 00:03:09.460
to create a new object where we're going
to be defining the red color of our text.

53
00:03:09.490 --> 00:03:14.100
So let's say we call this text.

54
00:03:14.130 --> 00:03:20.020
And we're going to be saying that we
want a red color for our text.

55
00:03:20.050 --> 00:03:24.740
Now to use this, as I said,
we need to export the style variable

56
00:03:24.770 --> 00:03:30.900
from here
and we are now going to be replacing our

57
00:03:30.930 --> 00:03:35.660
inline style with this style
sheet that we defined.

58
00:03:35.690 --> 00:03:44.610
So let's import the style that we defined
from our file called Style.

59
00:03:44.640 --> 00:03:47.580
And now let's see how we're going to be

60
00:03:47.610 --> 00:03:53.220
applying the style text
defined here to our component.

61
00:03:53.250 --> 00:03:57.100
So let's talk about when do
you want to use inline styles?

62
00:03:57.130 --> 00:03:59.660
You would use inline styles in situations

63
00:03:59.690 --> 00:04:03.800
where you need to apply styles only
to a specific component or when you need

64
00:04:03.830 --> 00:04:07.180
to apply styles that can't be
achieved using style sheets.

65
00:04:07.210 --> 00:04:09.460
They're also useful when you want to apply

66
00:04:09.490 --> 00:04:14.060
styles dynamically based on the state
or props of a component.

67
00:04:14.080 --> 00:04:16.100
We're going to be talking about this later

68
00:04:16.130 --> 00:04:20.740
on when we're going to learn more about
states and props of the component.

69
00:04:20.770 --> 00:04:23.220
It's also important to note that inline

70
00:04:23.250 --> 00:04:28.060
styles can also be used to overwrite
styles that are defined in a style sheet,

71
00:04:28.090 --> 00:04:32.300
allowing for more specific
styling of individual components.

72
00:04:32.330 --> 00:04:34.500
So let's see an example of this.

73
00:04:34.530 --> 00:04:37.220
So let's say that we have applied.

74
00:04:37.250 --> 00:04:41.100
This color from styles and we want

75
00:04:41.130 --> 00:04:46.700
to change and overwrite the red
color with a green color.

76
00:04:46.720 --> 00:04:49.740
If we want to apply more than one style

77
00:04:49.770 --> 00:04:56.660
to a component, what we need
to do is place them in an array.

78
00:04:56.690 --> 00:05:02.000
This array can either be completely
empty and if we do this we're going.

79
00:05:02.030 --> 00:05:04.380
To go back to having the black

80
00:05:04.410 --> 00:05:08.700
color or it can contain multiple styles.

81
00:05:08.720 --> 00:05:11.420
It can either be from the style sheet.

82
00:05:11.450 --> 00:05:14.420
So let's say we create one more variable

83
00:05:14.450 --> 00:05:20.860
here and this variable will be
defining our color as blue.

84
00:05:20.890 --> 00:05:26.380
What we could do here is apply
that style as well and this is.

85
00:05:26.410 --> 00:05:31.020
Going to override and make our text blue.

86
00:05:31.040 --> 00:05:37.860
However, our inline styles can also
override all of the styles defined here.

87
00:05:37.890 --> 00:05:44.580
So if we were to create an object
directly here in our array and

88
00:05:44.600 --> 00:05:46.760
say that our color should actually be

89
00:05:46.790 --> 00:05:52.220
green,
the inline style is going to override

90
00:05:52.250 --> 00:05:57.220
these styles here and our text
is going to appear as green.

91
00:05:57.250 --> 00:06:01.500
However, it's worth noting that inline
styles have some disadvantages.

92
00:06:01.530 --> 00:06:05.500
They can make the code less
readable and harder to maintain.

93
00:06:05.530 --> 00:06:08.940
Because the styles are tied
directly to the component.

94
00:06:08.970 --> 00:06:13.340
This can make it difficult to make
global changes to the app styling.

95
00:06:13.360 --> 00:06:19.380
Furthermore, inline styles can also lead
to performance issues if used excessively.

96
00:06:19.410 --> 00:06:23.340
That's it for our tutorial on style sheets
in React Native for beginners,

97
00:06:23.360 --> 00:06:27.420
you should now have a basic understanding
of what style sheets are, how they work,

98
00:06:27.450 --> 00:06:29.820
and how to use them
in your React native app.

99
00:06:29.840 --> 00:06:31.220
Remember, text styles sheets are

100
00:06:31.250 --> 00:06:35.740
a powerful tool that can be used to create
a consistent look and feel for your app

101
00:06:35.770 --> 00:06:39.140
and make it responsive to different
devices and screen sizes.

102
00:06:39.170 --> 00:06:41.740
Thanks for watching and see
you in the next video.