Hi and welcome to our tutorial on stylesheets in React native.
React native provides a powerful way text
styles your comments and create a consistent look and feel for your app.
In this video we'll be discussing what
sheets are how they work and providing
examples of how to use them in your React native app.
A style sheet in React native is a way
to apply a set of styles to a component or a set of components.
It works similar to CSS in web development where you can define a set of styles
and then apply them to different elements in your app.
In React native, a style sheet is a JavaScript object
that contains a set of properties and values that define the styles for a component.
These styles can include things like
color, font size, and layout of a component.
So let's get to coding.
You now see my screen where I have my simulator open.
My Metro is running so that every change
that I make will be visible in the simulator here.
And I have my editor opened at the same place where we left off the last time.
I have my text component shown here and we're going to dive into different
ways of creating styles for our components.
The first thing that we're going to be talking about is creating inline styles.
So what are inline styles?
Inline styles in React native refer
to a way of applying styles directly to a component instead of using a separate
style sheet that we are going to be discussing very soon.
Inline styles are defined as JavaScript
objects and are passed to the component as
a prop typically called style.
So if we want to use inline styles
to change the color of this text here, we're going to have to apply a prop called
style and we're going to have to open the brackets so that we'll let the React
native know that we're about to write a JavaScript expression here.
And we are going to be passing an object
here that is going to contain a style for our text.
So let's say that we want to create color for this text and let's
say that this color should be red.
If we save this file right now,
you're going to see that this has been changed to display a red text. In general,
it's recommended to use style sheets as
much as possible and only use inline styles when necessary.
So now let's create our first style sheet. For that
we're going to be creating a new
JavaScript file here and we're going to call it Style.
And then what we're going to be doing is
we're going to be importing stylesheet from React native and we're going to be
creating a new style of our own that we're going to be exporting
and then later on we're going to import it
in our component so that we can use this style there.
So let's call this style as well.
Our variable and then let's use stylesheet
to create a new object where we're going to be defining the red color of our text.
So let's say we call this text.
And we're going to be saying that we want a red color for our text.
Now to use this, as I said, we need to export the style variable
from here and we are now going to be replacing our
inline style with this style sheet that we defined.
So let's import the style that we defined from our file called Style.
And now let's see how we're going to be
applying the style text defined here to our component.
So let's talk about when do you want to use inline styles?
You would use inline styles in situations
where you need to apply styles only to a specific component or when you need
to apply styles that can't be achieved using style sheets.
They're also useful when you want to apply
styles dynamically based on the state or props of a component.
We're going to be talking about this later
on when we're going to learn more about states and props of the component.
It's also important to note that inline
styles can also be used to overwrite styles that are defined in a style sheet,
allowing for more specific styling of individual components.
So let's see an example of this.
So let's say that we have applied.
This color from styles and we want
to change and overwrite the red color with a green color.
If we want to apply more than one style
to a component, what we need to do is place them in an array.
This array can either be completely empty and if we do this we're going.
To go back to having the black
color or it can contain multiple styles.
It can either be from the style sheet.
So let's say we create one more variable
here and this variable will be defining our color as blue.
What we could do here is apply that style as well and this is.
Going to override and make our text blue.
However, our inline styles can also override all of the styles defined here.
So if we were to create an object directly here in our array and
say that our color should actually be
green, the inline style is going to override
these styles here and our text is going to appear as green.
However, it's worth noting that inline styles have some disadvantages.
They can make the code less readable and harder to maintain.
Because the styles are tied directly to the component.
This can make it difficult to make global changes to the app styling.
Furthermore, inline styles can also lead to performance issues if used excessively.
That's it for our tutorial on style sheets in React Native for beginners,
you should now have a basic understanding of what style sheets are, how they work,
and how to use them in your React native app.
Remember, text styles sheets are
a powerful tool that can be used to create a consistent look and feel for your app
and make it responsive to different devices and screen sizes.
Thanks for watching and see you in the next video.