Illustration By Udhaya Chandran

React Native Search

Hey folks !! Possibly every app you have come across has this search box tied up to scrolling container below like this :

This is a normal pattern which possibly every App Design will have, let us see how can we build it.

Setting up React Native Project.

(Skip to next section, if already done..)

Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.

npx react-native init ReactNativeSearch

To start the application run npx react-native run-ios inside your React Native project folder. Open your project in VS Code and head to the file named App.js.And remove the code under the return statement and replace it with:

return {
 <>
  <View>
  </View>
 <>
}

You have successfully finished creating a project.

Let us start building the screens/components required.

1. Create a folder src
2. Create files LoaderComponent.js (for our blocks inside ScrollView) and SearchComponent.js (for our Search box).

Now let us quickly start writing some code.

Animated ScrollView in App.js

So in here, we create an animated variable scrollYValue and tie it up to the ScrollView’s onScroll event.

We then create a clamped scroll which is an Animated.diffClamp. To get to know more about it, visit https://reactnative.dev/docs/animated.html#diffclamp.

Search Bar in SearchComponent.js

So here we use the clampedScroll value to change the position and opacity of the search bar component.

Some Building Blocks inside ScrollView : LoaderComponent.js

Okay, now let us see how this works :

That works great !!

Used libraries :

1. React Native SVG

2. React Native Content Loader

We can extend this search component to show search results. Check out the next blog here.

A repo can be found here.

This is Karthik representing Timeless.

If you find this blog post helpful, share it with a friend.

If you find any difficulties please feel free to add your comments.

And do checkout my New Youtube Channel 🎉

Honest Coding