We've now got our Harrod component created and it is being displayed by the app but the styling could 2
still use a lot of work. 3
In particular the headers displaying the network bar on the iOS version the app on the Android version 4
is probably showing in the right spot but we definitely need to fix this up a little bit. 5
So in this section we're going to start by working on styling for our applications specifically the 6
header. 7
Now styling with re-act native I can't tell you right now it's a bit of a touchy subject. 8
If you've worked on web applications with H.C. now and CSSA you might have grabbed some you know bootstrap 9
CSSA file dropped in your project and poof all of a sudden everything looks nice and pretty right. 10
Well unfortunately Riak native doesn't quite have the same tools available. 11
There isn't really a great default package just styling out there that you can just install and suddenly 12
have great looking components. 13
There are one or two open source packages out there that kind of help but there's still a long way from 14
being ready for prime time. 15
So what I'm trying to say here is that Firaaq native We have to do all the styling by ourselves all 16
do it by hand but that's OK because we're going to learn a lot while we're doing it. 17
So just to be clear when I'm saying styling I'm referring to our ability to change what the text and 18
other elements look like on screen like size color placement all that kind of stuff. 19
So rather than creating a separate CSSA file as we might do if were working on a web app we place all 20
of our styles inside of our component file. 21
So inside of the header file I'm going to place some styling that's going to use for this component 22
right here. 23
By convention will usually make a new object underneath our component called styles. 24
And then inside of this object we'll add styling for each individual component. 25
So styling it can. 26
It consists of javascript objects that have certain properties that set the size height color all that 27
kind of stuff. 28
So we have no CSSA a lot of it look like CSSA based rules but you know we're not using like CSSA selectors 29
per se. 30
So the first styling rule that we're going to use is we're going to increase the font size of this text 31
element right here. 32
So I'm going to add in a new property to the styles object called textile and I'm going to say that 33
it should have a font size of 20 so you'll see font size right here and it definitely makes you think 34
of CSSA right because there is a font Dasch size property with CSSA a lot of the same rules are applicable 35
with re-act native. 36
They just all use camel case instead of Dasch casings so you know take note this is not font Dasch size 37
it is font capital S size like. 38
So once I add in the style I will use it inside of my component like so again by convention rather than 39
just saying like you know styles that textile directly will use what's called destructuring to reference 40
our style. 41
So I'll say Konst text style equals styles. 42
So now textile is equal to this font size object right here. 43
Then for the next step will apply the style to the text tag. 44
We're going to use a little bit of interesting syntax here and we're definitely talking about great 45
length about exactly what this syntax is. 46
But inside of the text tag I'll say style equals and then curly brace text style the syntax that we 47
just use right here is referred to as a prop which is short for properties. 48
We're going to talk about properties or props at great length re-act right now let's just focus on the 49
styling aspect of it. 50
Well you know again we'll come back later and talk about this particular syntax. 51
But right now let's just check out our simulator and see what this looks like. 52
So back to my simulator command our. 53
And hot dog sure enough. 54
We've got a larger albums appearing on the screen if we want to we can dial up the size let's say to 55
100. 56
And OK that's a really big albums album's probably too big. 57
So let's just dial back down to 20. 58
And ok. 59
Good to go. 60
OK. 61
So this is how we do styling react need it. 62
Let's continue on the next section and add on a bunch more rules inside this object. 63
It's going to give our head or components some nicer styling than what we've got right now.