Linear Gradients

[00:00:00]
>> Kadi Kraman: Let's make our own voting screen a little bit more interesting. I want to show you another library that you can use, which is a linear gradient library. So a linear gradient is an image consisting a transition of between two or more colors. It's pretty popular in your eyes and looks quite pretty.

[00:00:22]
So, we're going to add it to our onboarding screen. So, let's install Expo linear gradient.
>> Kadi Kraman: And I've added a couple more greens, so let's copy these. We've got an apple green and a lime green, so let's fit these in our theme file as well.
>> Kadi Kraman: And let's open our onboarding screen.

[00:01:07]
And instead of this view, we can actually pass in the linear gradient. So this is the import or export from exporting your gradient. Give the styles as they are, but we do need to define what colors we're going to gradient between. So let's add the colors. So this will be an array, and we can do color green.

[00:01:44]
>> Kadi Kraman: And let's do the apple green.
>> Kadi Kraman: And the lime green.
>> Kadi Kraman: Okay and we have a beautiful gradient. Actually, so you can change the start and end values of the linear gradient. So we do start, so start with x0 and y0 and end with x1 and y1 and there you go so we go from up to down so you could play around with these so if we do let's say 0.5.

[00:02:23]
So you could play around with these and then do them diagonally etc so this is just a nice little default. And one thing that I was spotted here is that our status spa, I don't think it really goes with our app anymore because we're gonna have dark contents.

[00:02:48]
I think a light status spa would look nicer here and we can use the status bar components. So there's actually installed by default in the types template so you should have it already installed. If you don't you can mpx expo install the expo status bar but basically in the screen we'll do a status bar.

[00:03:11]
So this doesn't render anything but you can define a status bar for any screen that you want and we'll do style, light. So this will be the content, so light content. So if I do this, the status bar goes to light and you can actually define many of these status bars.

[00:03:33]
They kind of collate between each other, but you can have a status bar per screen. So you can have a different color, you can go from dark to light. So now if I go to, let me in the status bar actually goes to dark.