So back in code, we started with throwing in some views here and of course right now, this won't work,
this will just break or it will not render anything meaningful to the screen. In that first nested view
here, in this block,
I went to have a text input and a button. Conveniently, both is provided by React Native,
we have a text input here and we also have a button component. So we can import both text input which
allows the user to enter text and button and then here in that view, in that first nested view, I'll add
a text input as a self closing tag because there is nothing we could pass between opening and closing
tags and for the button,
you could think that you use a button like this but actually, that's not how this React Native button
works,
instead it's a self closing button and you set a title property to define which text to render there
and here, we could say add. Now we have a text input and a button there
and if we save this and this reloads, we see the button here but we don't see the text input, right?
So that's not working as intended.
The reason for that is actually that the text input will be hidden here below the status bar.
So now is the time where we should get started with adding some layout, some structure to this page because
just adding components alone won't do the trick,
a React Native app is all about using components and then adding the right layout, the right structure
to your components. So here for example, it would make sense to add some general padding around that view,
so on this top view, so padding basically is some distance from the border of that view which is basically
the device frame in our case here
since I'm talking about the topmost view to the content of the view, so some spacing between the borders
of the topmost, of that surrounding view and the content in the view and for that, we can add the style
property here on the view.
Most components in React Native support the style property, the view does and there, you use this dynamic
content binding here which you know from normal React too with the single curly braces and style expects
a Javascript object now. So we add another pair of curly braces here and now a common mistake is that you
think this is a special syntax which requires double curly braces,
indeed it's the normal React syntax with similarly curly braces where then the dynamic value you're
passing to style just happens to be a Javascript object
hence we have another pair of curly braces. And in this object, you can now have key-value pairs where
the keys are your style property names and the values are the values for these style properties
and these style property names are influenced by CSS.
So here, what you can do is you can add padding, that exists in React Native as well and a comprehensive
list of supported style properties can always be found by going to the component you're using, like the
view here and then by clicking on the style property and here if you click on view styles, you'll see
a list of all provided properties which you can use and you'll see some special properties for the view
here and then some general props like layout props and there, you would find the padding for example.
So that's how you can find out what's supported but you'll also see many examples throughout this course.
So here, I add padding and the value now can just be a number which will be device independent pixels,
so a pixel value which always looks good no matter which device size you have.
So here, we could add 10 and if we do that, now we see the button is a bit further down,
maybe let's add 30 here so that we can see a bigger difference
and now that's working and now if you tap above the button, you don't really see an input here
but you see that my soft keyboard opened up on Android, on iOS it doesn't open by default
but there also you can tap here
and if you were to tap often enough or if you go to hardware, that keyboard toggle software keyboard, it
should open up there as well,
so here we also have an input.
So now we can see that input because now it's not behind that status bar anymore.
So adding that padding probably made sense because now, we made sure that our layout is inside of our
screen here.
Now there are other tools for making sure we have enough padding here as well
but for now, let's manually set the padding and let's maybe set it to a value of 30.
So we were getting started with the layout,
now let's go back to this component and let's make sure we can see something,
we can see that there is a text input and we don't just have to guess it.
For this, we can go to the text input and there for example add the placeholder prop and just as before
to find out what you can set,
you can always go to the official docs, in this case to the text input docs and there, you find a description
how to use it and some examples
but if you scroll down, you'll also find all the props you can set and there for example, you find out
that you can set a placeholder prop, which is that dummy text that is shown before the user entered
some text.
So here, that takes a string and here we could enter course goal because you should be able to set your
course goal here
and if you do that, you see both on Android and on iOS
there is this course goal text.
Now still, it could be a bit better,
could be a bit clearer that there is a text input and therefore here, I'll add a style, another inline
style
and here I'll set up border bottom color of black, black now is a string, such color shortcuts are supported
in React Native and a comprehensive list of all available colors is attached to this lecture here
and I can also see that a border bottom width of let's say 1 and what this does is it should set a bottom
border on this input so that now if we go back, we have that underlining here, we can clearly see it
on iOS and since there still is not that much space on iOS, let me actually ramp up this padding up
here to 50 maybe, yes that looks better.
So now we have that border below our input and that makes it clear that there is an input here.
Of course you're not restricted to only setting a border on the bottom,
you could also just set a general border
by leaving out bottom here, a border color and a border width
and if you did that, then this would be surrounded by a border.
Now one important note regarding these style names here, style property names, you of course see
that it's border width, border color written like this, in normal CSS, you would have had border-color
and that would apply the border color but that would be an invalid property name in Javascript which
is why this is not supported.
Now actually, a valid property name in Javascript would be if you wrap this in quotes though
but even that is not supported in React Native, so these alternative syntaxes, for example this syntax
would work in Javascript if you apply some style to web HTML element, these syntaxes are not supported
in React Native though, there you really have to use this camel case syntax where you for example
write border color like this or in short, you have to use the property names you also find in the official
docs, there are no alternative names for these style properties and we could now also add a padding here
of let's say 10 so that we have some spacing between the border and the actual part where we enter something
and I'd say this already looks way better and we can clearly see that we here have an input where users
can enter something.