In the last section we finished up with with Step number three which was to make sure that our component
would show up on the device.
The last thing we must make sure that we resolve is that we handle the declaration as a variable text.
So remember the important thing here to remember about every single javascript file that we're going
to create through our course is that there are no global variables that we can reference.
There's no like magic code that is provided to us so this text right here is an undefined variable.
And if we execute this code it would throw an error.
We have to always make sure that every variable we reference is automatically defined for us.
So this text tag right here is a primitive element that is provided to us by the react native library.
So to get access to be able to use this text tag we must import it from the re-act native library to
do so we're going to use a technique called import destructuring.
OK.
That's that's the name of this technique here.
We're going to run again.
We're going to lay out the code for it and we'll talk about exactly what it does.
I'm going to delete re-activated right there and replace it with one opening and closing curly brace
and side this.
All right.
Just text.
You'll notice that the instant I do that the error message goes away from this line right here.
So text is now defined what this line means right here is a means to say when you import the re-act
native library.
I don't actually want access to the whole library.
I just want access to that text property out of that library.
So this really depends on pretty intricate or detailed knowledge of what different properties or objects
that react native library contains.
And you'll learn about all the different objects that it contains over time.
So this one that we've used right now right here so far is the text tag.
Another library or another property in the library is one that we've already used down here.
The app registry.
So notice that when I replaced the re-act need of reference up here all of a sudden now this is giving
us an error message saying we'll now react nativism defined.
So to solve this we will also import the app registry function from re-act native as well.
So after text we'll place a comma and then reference app registry and finally at the bottom because
we're not making reference to react native anymore I'm going to delete the re-act native don like so
cool.
So now we've got we are importing text in app registry from the re-act native library.
We are using the text tagging site of our component and we are using the app registry component at the
very bottom of our file here to render our component to the device.
The last thing I want to do is you might notice that our component we're getting a little bit of a complaint
here from GSX about how you know the error message says unexpected block statements surrounding everybody.
So like I mentioned just a minute ago if we are referencing just a single element or seeing if we've
got just a single or return value from a federal function we can omit any return statement and the curly
braces.
And so that's what this error message here is about.
Yes Linta saying hey all you're doing with this fado function is returning some variable or returning
some object so for stylistic concerns I recommend you drop the return statement and you drop the curly
braces as well.
We're going to see this error message a lot throughout this course.
It's totally up to you whether or not you want to do the refactor or not.
This is not an error.
It is really just something that Yeslam to saying you know your code would look a little bit better
if you did it this way.
So again I leave it up to you whether or not you want to do this or not.
Just to give you an example the refactoring.
I think I will go ahead and refactor it.
So to get the air to go away I would delete the curly brace up here.
I would delete the return statement right here and put the parentheses up on the line above it.
I'll delete the curly brace at the bottom and then indent everything like so.
So now I'm just left with Konst app federal function and this will return this block of GSX right here.
Again totally up to you.
Either way I'll go both fashions throughout the course.
OK.
So we've now got a full blown re-act native program ready to run.
So if you recall we spoke much earlier about how to run and react native app in an earlier section and
the methodology is different depending on what platform you're on either OSX or Windows.
If you don't recall how to run the similar and with Windows then you'll want to go back a couple of
videos and review that process.
Otherwise if you're using iOS at the command line inside of our project directory we will run re-act
native run IO like so.
And this will start up our iOS simulator and launch the app.
And I've already got the simulator running right here so I'm just going to refresh it and.
OK.
This is our app now as ugly as it looks.
You'll notice that up on the very top left.
I've got the text some text so it looks like it's up there but it's definitely overwriting the status
bar.
So this is you know hey like our content is showing up it looks like our component is being rendered
but it's definitely does not look very good at all.
So let's figure out how to fix this in the next section.