In this video we're going to figure out how to show a button element on our home screen this button
element is going to show the text go to components demo and eventually when a user taps on it we're
going to navigate that user over to the component screen.
So let's give this a shot.
I'm gonna flip back over to my code editor I'm already inside of my home screen dot J.S. file now as
a quick aside here I just want to mention very quickly inside my app dot J.S. file I also change that
initial root name in the last video I did it very quickly I just want to remind you that I changed initial
root name to be home instead.
So now when my application starts up I'm going to see the home screen by default.
All right.
So now inside my home screen file at the very top.
I'm going to import view and button.
I'm only importing view right now because I'm going to use it to wrap this text element and a button
that I'm about to place as well.
Remember from a react component by default we only return a single root element.
So I'm going to use the view to wrap that text and that button I'll first get started by wrapping that
text element with the view
as a quick reminder.
If you had a semicolon at the end of that line of text it needs to be cleaned up.
If you save this file as is you're going to see an error saying that you've got some piece of text outside
of a text element because the semicolon inside of J.S. sex is interpreted as being a piece of text.
You want to print out it's going to clean up that semicolon well then save the file just to make sure
that I don't have any errors.
OK.
Very good.
So now right after that text element I'm going to place a button element a button is a self closing
element.
So notice how I don't have any separate closing tag for the button.
Instead I've got a single forward slash and then a greater than sign right after it.
When we show a button we're not going to pass in some text we want to show inside of it like so we don't
do that.
Instead to show some text inside of a button element we're going to pass it a prop called title it's
going to pass in a title prop and it's going to be a string in J.S..
We can designate a string or pass a string to a prop without using those red curly brackets.
This is one of the very few exceptions when we're trying to assign a value to a prop for just about
every other type of value.
We're always going to use those red curly brackets but for strings we can simply use double quotes like
so so I can give this button a title of exactly what our markup showed back over here.
So go to components demo go to components demo if I then save that I'll see the button appear on the
screen looks good.
That's the default styling of a button.
If you're on android you're going to see the default styling looking like so.
So the button element is going to change how it looks depending upon the platform that you're running
on.
If you're on android you're going to get a very typical looking Android button.
And if you're on IAW you're gonna get that nice kind of blue text button instead so just showing a button
is not quite enough to actually add anything to our application.
We also want to add the ability to run some code or essentially handle whenever user taps on this thing
as well.
So to run some code or respond to a user tapping on that button we can add in an additional prop to
the button element to get started I'm gonna first put a new line inside of here just to give myself
a little bit more space and then either before or after.
It doesn't make a difference.
The title prop we're going to add in another prop called on press and this is a very special prop just
like Title IX.
Notice how I have on and then capital P for press.
If you change the spelling of this prop it's not going to work appropriately.
The button element expects to be passed a prop called specifically on press with exactly that capitalization.
Excuse me capitalization
when we designate the on press prop.
We then pass it a function.
This function is going to be called anytime a user as you might guess presses that button.
So right now let's just try doing a console log inside of here.
It's all due console log button pressed like so.
It's now in theory whenever we press on that button we should see a console log up here so I'll save
this and then press on the button one or two times but I don't immediately see a console log appear
anywhere.
So where do console logs appear when we're running React Native.
Well they always appear in the same terminal window that's running.
Your React Native package.
So if I flip back over to my terminal and find a window that's running my package or I'll see the console
logs right here from the three times I just press that button I can do the same thing on Android as
well.
It's on Android all tab on that button a couple times go back over to my terminal and I can see some
additional number of console logs.
So that's how we use a simple button primitive With React Native.
Again a button primitive is a very simple component.
It's really just going to show a button without really a lot more customized customization options.
We can't change some simple styling options around this thing but for anything more advanced we usually
end up wanting to use that other kind of component for detecting presses call that touchable opacity
thing.
Let's take another quick pause right here.
When we come back the next video we're gonna figure out how to use the touchable opacity instead.
We're just going to do this as kind of like a counterpoint so you can see both different approaches.
It's a quick pause and I'll see you in just a minute.