With our initial navigation stuff all put together we can now start to focus on some of our different
screens.
So I think it makes a lot of sense to first start off with our authentication flow.
In other words these sign up and signing screens these two screens are going to look just about identical.
So they both have a header some inputs button in the link at the bottom for just about all the different
elements are going to create inside this application.
We could create them all from scratch.
In other words we can create some buttons and text inputs labels all that kind of stuff from scratch
but instead to save a little bit of time we're going to be using a little helper library called react
native elements.
This is a library that has a ton of pre-built common components inside of it that already have some
default styling applied to them.
So things like buttons and headers and text inputs all that kind of good stuff not a lot of functionality
just pretty much styling already put together for us.
So let's first installed React Native elements and then take a look at the documentation really quickly
to understand what we're really getting into.
So to install React Native elements I'll flip over to my terminal I'll open up a new terminal window
still inside of my tracks project directory and then as usual we'll do an npm install React Native elements
while that's installing I can go over to the documentation a direct link to the documentation is kind
of long so we'll just do a google search instead.
Honestly the fastest way to get there.
So inside of Google I'll do a quick search for React Native elements and find the first link.
Here we go So on the top right hand side we can find the component section and on the left hand side
you'll see a list of all the different components we get for free with react native elements.
Now a lot of these different components are going to have very familiar names for example reactive elements
has a component called button as you're probably well aware will react native itself has a button as
well.
So why would we use this button.
Remember that the React Native button was only put into the library because essentially everyone said
when they first start with React Native HOW DO I MAKE A BUTTON.
THAT'S THE ONLY REASON THAT THE BUTTON component exists inside of the React Native standard library.
So that button element has very little customization options.
So instead if we use the button component coming from reacting of elements we can easily customize it
to get these dramatically different looking buttons very easily if you want to see how you can customize
any of these different components just click on the section.
Take a look at usage or more importantly take a look at the prop section down here which will explain
how we can pass different props to customize how the button behaves.
All right.
So for this first screen that you and I are working on or sign up and sign in.
We've got a piece of text.
We've got two inputs and our button.
So we've already seen that reactive elements has a button.
Let's take a look at how we show some kind of like header as we're showing up here so back inside of
the documentation there is a header but that's for more of a classic looking header.
We don't need that kind of header we just need like a big presentation piece of text.
So if we also find inside of components the text section we can show a piece of text with react native
elements.
Now of course you're probably saying once again Stephen we already get a text element from React Native
as well.
So once again we use the one from react native elements.
We just get a little bit of pre-built styling put into it.
So in this case if we use the text element coming from.
React Native elements we can add in a prop of each one two three or four and that's going to automatically
edit or change the size of the text that's displayed so we can use reactive elements version of text
just to get some very easily configurable text element where we don't have to define that entire separate
style sheet and a style section inside there just for some piece of text.
And then finally we also need to show a input.
So if we go into the component section again we can find input right there.
Now this is a very stylized example of what their input looks like.
This is not what react need of elements input element looks like it by default.
This has a bunch of additional styling applied to it.
The input element is really just a text input.
Same one that we're used to using from React Native.
But as we've seen with all these other components it just has a little bit of default styling applied
to it.
In particular when we use this input coming from React Native elements we can also pass in some props
if we go down the prop section like label and that will be some amount of text to be used for labeling
that text input.
So this keeps us from having to create a separate text element to show next to some text input that
we put together.
So again a lot these things are going to be very familiar very similar to what is already coming from
React Native.
They just have some default styling or some interesting props tied to them.
They're just going to save us a little bit of time.
And that's one reason that we are using React Native elements we're just trying to save a little bit
of time here and not obsess over styling okay.
So if I flip back or my terminal looks like the installation is complete.
So let's take a quick pause right here.
When we come back the next video we'll get started first on our.
About the sign up screen so we're gonna use reacting developments to show text input input button and
so on.
So quick pause and I'll see you in just a minute.