There are a couple of things where we could continue
but I want to continue with the input container, which is the container around these inputs,
so around the select a number text, around the text input here and around the buttons and this container
has a width and it aligns the items but as I described earlier,
it would be nice to have that card to look there and for that,
we need some more exotic styles which sounds really fancy but simply some style rules
we haven't used before.
For example, I want to add a shadow, a slight drop shadow and
you do this with four core properties which you can use. A color, an offset, an opacity and a radius.
Now a shadow color should be clear, it's the color of your shadow.
Shadow offset is how much it's offset from your container
and that actually takes the object which then in turn takes a width and a height,
so you could say I want to offset the shadow by two pixels regarding the width and by two pixels regarding
the height, that influences the three dimensional effect you're creating. Opacity describes how transparent
this shadow is,
if you set opacity to 1, then you have a totally in transparent, so a very visible strong shadow
and if you increase that or decrease that I should say, if you set it to 0.1 for example,
you have a shadow which you can barely see. Shadow radius then basically describes how sharp that shadow
is,
if it has rough edges or if it's a bit more blurry, softer, things like that.
So here, I'll go with a shadow color of black, by the way you can also use hex codes here if you want
to and you can also use RGBA codes if you prefer this, either normal RGB codes actually
or also with an alpha channel to describe transparency here. Though the transparency here won't have
a direct influence, for shadow you will have to set this with shadow opacity. For other colours, it would
have an influence but that's just a side note. Attached, you'll find a link with more details about how
you can configure colours and which colour values React Native accepts because obviously, that's way
more exhaustive than what I can show here, I will just go with the name because I want a black
colour, so why not go with that shortcut? Now besides the colour, the shadow here will also receive an offset
and as I said, offset here takes an object.
Now in case you wonder how I know this, for one my IDE tells me, if I start typing shadow offset here,
you see that hint I get on the right, you should normally be getting this as well but in case you don't
get this, the official docs are of course the place to go and there, always under guides, components
and APIs, you can click on the view component there or simply click on the API docs here in the top
right corner and then choose your view there and there, you'll find some style prop and then you can
find a list of all the view styles that are supported and of course also how you configure those and there
for example, you learned that shadow offset is an object with a number and a height. For the colour, you
learned that this takes a colour and that's exactly the link you find attached here, where it described
which kind of colours you can use.
So that's just a little side note, here I'll use a shadow offset with a width of zero but a height of
2 so that my shadow is offset a little bit to the bottom so to say, not so much to the right, so not at
all to the right actually and I'll then also add a shadow radius which is a number of let's give six
a try and see what that does
and last but not least, a shadow opacity of 0.26 which is relatively transparent but which I think looks
quite nice.
In addition, I'll give my input container a background colour of white to make sure that it's always
white and not transparent which is otherwise the default so that if we would have another background
color behind the container, let's say as the base color of the entire screen, the container here would
always have a white background.
Now with that, if you save this, you should see a shadow that looks something like this on iOS but you
see no shadow at all on Android and that's not a bug,
instead the shadow properties here only work on iOS and that leaves one important question, how can
you set a shadow on Android then? Is that not possible?
It is but there you have a special style prop, the elevation prop. This only works on Android as the tooltip
also shows here, platform Android whereas the shadow properties only work on iOS. Now elevation simply
takes a number of let's say 5 and then uses the default Android material design elevation, so you have
less control there but on the other hand, you get the default material design looks which your users
might be used to anyways, so that's the good thing about this and now we also have a shadow here on Android
and on iOS. On iOS, you will also notice that the shadow is visible on the left and right of the box
as well even though I gave this a shadow offset of 0 for the width, that can be controlled with the
shadow radius though, if you set shadow radius to zero, then you see you only have the shadow
where you defined its offset here, so you can make sure that the shadow really is only there where you
want it. If you do set a shadow radius though and by default, there also is a default shadow radius, you
get this spill effect which is a more natural shadow after all,
so here it's actually the effect I want. Now with that, I added a shadow both on Android using the default
Android shadow and on iOS. By the way on Android, you can of course change the elevation level to play
around with different levels of elevation until you have the look you want for your application, you have
enough shadow basically. Now besides having the shadow here however, I think it would be nice to have
some padding in this box now because the items sit way too close to the edges, they sit directly on
the edges after all. So to change this, I'll also add a little bit of padding here and that will be
of padding of 20 and again, that's a value you can experiment with, find the padding that you personally
prefer and you think that looks good and if we try that, now this looks way better.
In addition, rounded corners would be a nice thing,
so I'll add a border radius here of let's say 10 to have slightly rounded borders.
If we now save that, this looks pretty sweet to me on both platforms, on both devices.
So this is now the input container,
we can't see the input and the buttons probably should have the same size as well
but at least, the container is now looking good.