Inline styles are very easy to apply but their downside is that the more complex your app gets and your
setup gets, your component gets, the harder it is to follow along with all these inline styles.
You will have a lot of code up there, in your jsx code and it can be hard to read it, to understand
it.
Therefore whilst you can use inline styles,
it's actually recommended to use a stylesheet object and that's exactly what's getting created down
there.
This uses stylesheet which is a class in the end provided by React Native which is why we import it
from there and this in the end creates a Javascript object which contains all your style configuration.
The difference to a vanilla Javascript object which you could also create on your own like this is simply
that Stylesheet.create could in the future also apply some performance optimizations and apply your
styles more efficiently in the end.
Therefore, you should use that because you lose nothing but in the future, you might benefit from additional
optimizations. Right now when I'm recording this, there is no difference though
but again you should use Stylesheet.create because it won't hurt and you might get additional performance
optimizations in the future. Another advantage of using the stylesheet is that
this will automatically add some validation which means that if you're using an incorrect style property
or an incorrect value, React Native will detect this and will throw an error which simply makes it easier
for you to spot such errors,
if there would be no validation, it would fail silently,
it would just not apply the style and you might not even see that instantly or you'll see that the styling
isn't correct but you don't really see why it's not working,
therefore this built-in validation is another advantage of using that stylesheet object here. To create,
you pass a Javascript object as an argument,
so the argument you pass here is a Javascript object and in that object, you can now define your
styles and you don't do this by adding padding 10 because it would be unclear where this should be
applied,
instead you use any property name of your choice, like for example screen, to setup the style for our
overall screen view,
so for this top level of you here and you could have chosen any name you want here,
this doesn't have to be screen. Here, you now have a nested Javascript object,
so the value for this property is another Javascript object
and there, you setup padding 50 for example,
so the styling we had up there as well.
Now we can remove that style up here,
I still have the style property but I no longer have the inline style object and instead here,
I now point at styles which is this constant which holds our stylesheet object,
I point at styles and then with dot, I point at the screen style and that's what I meant,
you can choose any name you want here,
if you would have named this root, then you would have just have to use root up there. So you can use
any name you want,
you just have to make sure that the names you use down there meet the names you use up here and now
just tells React Native that this view should get the styles defined for screen down there.
You can do the same for our input container
let's say, again this name is totally up to you, input container. Here
I will take this style object
I applied as an inline style to this view before and I applied this as my value for this input container.
Now here on that view, we reference styles.inputContainer,
now with some auto formatting which you by the way can do in Visual Studio Code by going to preferences,
keyboard shortcuts and then search for format document, that's the shortcut you want to press so that
autoformats the documents, the file. With that, we have some clean code structure here,
WE see these are our input container styles and we apply them here.
Another advantage of having this stylesheet object is also THAT you can apply the same style to multiple
views without copying it.
So if we want to have the input container style, not just on this view but also on this one down there,
we could simply write style styles.inputContainer, you can apply this style to as many components
as you want.
Now of course, I don't need it here but we could use it here if we would need it. Now the last style I
want to apply is on the text input here.
There, I'll just name this input,
too many curly braces, set up my styles here then and then on the text input, refer to styles.input,
like that. And with that if we save this, we have the same look as before
but now we're using the stylesheet object which makes sharing and reusing styles easier and which
possibly also yields us some future performance optimizations
and in addition, our jsx code here simply is much leaner now.