Hi and welcome back.
Now that we have our fontawesome icons
installed, all we need to do is start creating the search component given here.
So let's do that.
I'm going to put my editor here and I'm
going to get rid of everything on our home screen so that it has a blank view.
And what we're going to do later is we're
just going to put the search input component here.
So that what we're building.
And for that, we're going to need to create the search input component.
So let's do that. Here
we're going to create a new directory and we're going to call it Search.
And inside it we're going to create two files.
One is going to be named Search JS and another one is going to be Style JS.
Here we're just going to place our styles
and we're going to have to import the style sheet.
And then we're going to define our
constant for styles and create the style sheet.
And we're not going to place any styles here yet.
We're just going to export default
styles so that we're able to use this in our search component.
And here we're just going to do regular stuff.
Let's import react from react.
Let's create the constant for our search component.
Let's make it return null so far and let's export default search.
Now let's use this search component on our home screen so that we're able to see what
we're building and let's make sure that it's imported.
Great.
And now we see our blank screen again
because our component is actually returning null.
Let's import the style from our styles and start building this component.
So what are we going to need for this?
Let's analyze our design.
So we're going to need an input text input component from react native.
And it's going to have to be in some kind
of container because we are also going to have to use the search icon.
And we can't provide icons with text input component.
So we're going to have to use a view container.
Let's import view and text input from React native.
And let's create a view component inside
which we're going to place our text input component.
And we're also going to need the font of some icon with faSearch value.
And let's import this faSearch as well.
And now we're getting some kind of error.
I'm going to reload my application.
Okay, now it's all good.
It was just some random error because of pods.
So Reloading did it great.
So now that we have our view and our text input component, we see that we're not
really able to see where our text input component is.
So let's apply some styles to it.
Let's say that style for the text input component is called style search input.
And let's create this search input styles here.
And let's just give it border width of one.
And now we see that it's actually located
below the icon and we want it to be side by side.
So we're going to have to use flex here with a direction of row.
So we're going to have to create a style
for the container and let's call it search input container.
Let's copy this and paste it in our styles and let's say flex direction row.
And once we do that, we see that our text input component
becomes very small, which we don't want to do because
otherwise users would have to click exactly here to be able to type.
So let's give this a flex of one so that it takes up all the space.
Here we actually see that
between the icons and the input component we have some kind of margin.
So let's set that margin for the search input container.
And let's say that margin left is going
to be of horizontal scale 6 because that's what's given here.
Oh, I applied it to search input container so let's move it to search input instead.
Great.
And now what we want to do is we are going to have to have some kind of padding
horizontal as well so that icon has some room to breathe inside the container.
So let's say that search input container
has a padding horizontal of horizontal scale 16 as given in the design.
We also need some kind of background.
So let's copy the color from here
and apply the background color to the container.
Great. And we also need some height which is 50.
So let's set height to vertical scale of
50 and let's import the vertical scale function so that we don't get any errors.
And now we see that our search icons is
actually at the very top so we're going to have to vertically center it.
Since our flex direction is row, we need the cross axis centering.
So we're going to choose align items center and that should fix it.
Great. So now if the user is going to want
to type something, if they're going to press outside
of the text input, we're going to see that we can't focus and start typing.
I'm going to have to press exactly here to start typing.
So we're going to have to fix that problem
and that problem is going to be fixed with refs.
But in order for us to catch the press,
instead of view, we're going to have to use the pressable component.
So let's do that.
And instead of view, let's import the pressable.
It shouldn't change our design and let's set up a function called Handle focus.
And this function is going to take care
of when the text input is going to be focused.
But to get a reference to the text inputs dom, we're going to have to use refs.
So let's import the user hook, create a constant for text input reference
and let's use ref with initial value of null.
And let's set the reference here and say that we need to use text input ref.
So now on press we're going to call the handle focus
function and inside here we're going to use
the text input reference, its current value and we're going to call
the function focus that comes with the text input references.
And I'm just going to move this up above Handle focus so that we know exactly what
variables we're using and if we see how this works.
Now if I click outside of the text input
container we're going to see that I'm able to focus and start typing as I need to.
And also our text input here has a very small height.
So let's take care of that and make sure that text input gets height of 100%.
Great. Once we start typing,
we see that the font styling is kind of different from our design.
So let's take care of that.
Let's go here and see what kind of font styling they need.
Let's set up font family for inter,
font size for scale, font size 14 and their line height is actually similar.
So I'm just going to copy this line and replace font size with line height.
And if I go back and I start typing, I think the main reason we don't see
the change is because of color given here, which I forgot to include.
So let's do that.
And now let's see the design and our
simulator and great, they match up, which is great.
And I also see that we don't have the border radius set for our container.
So let's do that.
Let's say border radius, horizontal scale
15 and now we have the border radius of 15
and we don't really need this width anymore.
And what we do need to do is make sure that fontawesome icons matches up
with this color here, which is this one here.
So let's go here and say color and the size is of 22.
So let's set the size to scale font size 22 and let's save this.
Let's see how it looks.
And it looks great.
So now what we're not going to do is we're not going to give this margin
in a component because we don't want to be controlling the margins from the component
because we're not going to have as much flexibility when using this component.
What if we want the margins to be 36 or twelve?
So if we want that to happen, we're just going to have to put this
in a view container that has a margin horizontal of 24.
What we also need to think about is how
we're going to take care of what the user is typing here.
We're going to have to do some action on anything that user types here and we
are not having any ability to do that from the home screen currently.
So we're going to have to set up a prop with a function that handles the search.
So let's do that.
Let's say that we're going to have props here and we're going to have to import
prop types from prop types to make sure that we have our type checking.
So let's do that.
Let's set up search default props first of all and say
that on search is going to have to be a function
and this is not going to be a required prop.
It's fine if the user doesn't want to pass
anything here and we're going to say that on search will have to be a function.
So we're going to type check like that and we're going to have to give this
function a value every time user uses it here.
So we're going to have to track the state of the variable that user types here.
So let's use state and let's set up search as a value.
Let's set search,
let's call useState with an empty string value
and let's say that the text inputs value is equal to search and every time its text
changes we're going to have to get this value and call handle search function.
We're going to pass this value
to the handle search and we're going to have to set up that Handle search
function here and it will accept the search value.
And the first thing it's going to do is it's going to set search
to the search value, and the second thing it's going to do is
call on search method and pass the search value to it as well.
So now if we go to our home screen
and create a prop on search and inside here
create a console log that logs to us value of what we are typing and save this.
If we go to our terminal reload our
application and start typing and we're going to see what we're typing here.
So that's it for today's tutorial.
We just made our search input component that we can use for our home screen
and in the next video we're going to be creating these single donation items user
can press and they're going to be redirected to this page here.
Thanks so much for watching and I'll see you in the next video.