Now this is also a nice practice for you,
you can pause the video here and try positioning these two buttons next to each other on your own,
only the two buttons, not the input and the two buttons but these two buttons should be in a new line below
the input but then sit next to each other.
After the short pause which you can use to pause the video, we'll of course do that together.
So were you successful?
Let's try it together.
The key here is to use flexbox and another view because again as I mentioned earlier and as is really important
to understand, view components are your core component for organizing other components or for being used
as a container which you can also style
but here in this case, to organize other components. So I'll move the two buttons inside of that view
and now we can assign a style to that view and that style of course will be defined here in our style
object and I'll name this button container,
this is up to you, this name and in there, I want to set a flex direction of row to have them sit next
to each other and then, I'll set justify content of space between to have the free space between the
two buttons.
Now let's add the style here to that view, styles button container and save this and now here are the
buttons but to have the free space have an effect here, which will be even clearer on Android by the
way, that it's currently not having any effect,
so that space between is not having any effect,
let me quickly show this on Android.
You see,
there is no free space.
The reason for that simply is that we have no width assigned to our button container and therefore as you
learned,
it only takes the width of the children
and that is simply the width of the two buttons
added together,
hence there is no free space to add in between.
So we have some free space in between, we simply need to assign a with to the button container
and now that width is of course up to you. Since the input has 80%,
we could go with 80% here as well or maybe with 60% to have it a little bit more narrow
than the input above, so that the buttons do not sit on the edges of the input but that's of course up to
you
and therefore now with that if this reloads and we have a look at this on Android
by using this convenient way of closing it and restarting it, now we should see some free space between
these two buttons,
yes that's looking good.
And of course you can play around with that,
you could also alternatively of course add styles to the buttons,
you can add style props here too and add a margin on the left and right of each button, that would have
worked too.
You can also play around with other values here, like space around to have the free space to the left and
right of the buttons and not just between them.
These are all things you can do, I'll go with space around here and have a final look at this
but ultimately that's of course simply something that's up to you.
Important here is of course that you understand how you can achieve something with the help of a view
which you wrap around your buttons and flexbox then
and with that, I'd say we have a decent look here.
Now one last thing, really last thing which I now still want to do is resize these buttons because they're
not equally sized and I think it would look a bit nicer if they had the same size.
Now on a button, you can't add a style prop and set a width, no matter if you're using inline styles
or the stylesheet object, instead
and that's something you have to know which is why I'm covering it here,
you have to wrap your button into a separate view, like I'm doing it here and then give that view a button,
for example here we could add styles button, referring to a button property down there, to each view and
there on this button property which I'm now adding, you could add a width of let's say 40% and
that will be 40% of the parent of that view,
so 40% of that button container view which itself takes 60% of the entire available width
and we can do this on the other button as well of course.
So that's just something you have to know, if you add your surrounding views here, around your buttons.
Now with that if we again restart Android, we should have buttons that are equally sized which of course
often is something you want.
Of course you could have also used a pixel value here instead of percentage values but now with that, I'm
really happy,
I think that's now really an app that's looking good, behaving good
and yes, it's a good start with React Native.
Now obviously, there is so much more we can learn and we will dive into, so much more we can do regarding
the styling because as already mentioned, this is certainly not the most beautiful app you ever built
but we covered a lot of important fundamentals here.