So we got started with the text input, right now we're not doing anything with the values the user enters
but before we do that, let's make sure that actually the button is not below that input but next to it
on the right
and for that again, we need to work on the layout.
That's why I have this extra view here around the text input in the button.
We wouldn't need that but now with that nested view, we can control how these two items are aligned to
each other, by again adding the style property here
and now for layouting, for positioning things, React Native uses flexbox which you also might know
from the web, in case you don't, attached you'll find resources that gets you started with CSS flexbox.
You don't need to know flexbox in and out but it helps to know a bit about it,
flexbox work such that it positions elements inside of a view next to each other or above each other,
by default above each other in React Native and
you can change that by setting flex direction from column which is the default to row
and by just adding this, on this view, we override the default which is the default which is why
we don't have to set it off column and now already, we'll see that the button in the text input sit next
to each other,
doesn't look that great yet but they're sitting next to each other. Now to make that look better,
we can also add more,
for example you can define how things are aligned and distributed in their row or column.
For example with justify content, you can control how items are distributed along their main axis and
with row, the main axis is from left to right,
if that would be column, the main axis would be from top to bottom.
So now we could specify a value and here my IDE even gives me autocompletion which is very convenient,
we could specify a value of space between for example. What this means is that all the remaining free
space is between the two elements,
so they're now not sitting directly next to each other but instead, there is some free space between
them as you can tell.
Now we can also align them on their cross axis,
so main axis for flex direction row was left to right, cross axis
then is top to bottom. For flex direction column, the main axis would be top to bottom and the cross axis
would be left to right,
so the cross axis simply is the opposite of the main axis so to say. Justify content positions along
the main axis, with align items you can control how the child elements of this view are aligned along
the cross axis and there you have different values, like for example center.
So in this case, since we have flex direction row, this should vertically center all items which means
that the button now looks nicer and is simply centered there in the middle of this input. Well and now
we can also ramp up the width of that input a little bit by going to the text input and there on the
style, we can also add a width of let's say 200, to give this a width of 200 pixels which means that this
now is a bit bigger. Alternatively by the way, you could have also chosen a percentage value like 80%,
which means that this takes 80% of the available width made available by its parent component,
so by the view that surrounds it. And now with that, we had a look at the first important fundamentals,
about laying things out in React Native and styling things but right now, we're doing all of that with
that concept called inline styles, which means we're setting up the styles directly on the elements and
that's not ideal.