React Native Search Component

Let us try to build an iOS-like Custom Search Component in React Native.

You can also find an updated npm package here for the same with the Dark mode feature.

3D Render by Udhaya Chandran

Setting up React Native Project.

()

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 RNSearch

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 coding.

The heart of this blog is the . Let me plug that code in here.

So yes we have some dependencies here :

  1. React Native Reanimated — Animation Library
  2. React Native SVG — For icons

The search component accepts the following props :

  1. : a string for the TextInput
  2. a color value for the placeholder, defaults to theme
  3. : a callback function called on typing
  4. : the current value of the text
  5. : a callback function on clicking the close icon
  6. : its value is one of ‘LIGHT’ or ‘DARK’, defaults to ‘LIGHT’

You guys would be wondering what is the exact use of :

These two variables determine the width of the <TextInput> on focus and on blur.

So we get this cool animation:

These variables consume useWindowDimensions().width hook value, so when the screen is rotated we can adjust our values that way our component fits the screen properly.

But for now, this component would work great in Portrait mode!

Animation Breakdown :

  1. Changing

This is a simple spring animation from react-native-reanimated API, which takes an animated value and changes its value based on the spring config provided.

I have used the below values as config:

mass: 1,stiffness: 120,damping: 20,

But feel free to play around with different spring configurations, check it out here.

2. Changing the opacity of Text.

This is a simple timing animation, where the opacity variable of the Text is changed from 0 to 1 and 1 to 0 when the TextInput is focussed and blurred respectively.

This is the initial version of my package. There is a lot to be improved upon and many more features that can be integrated with this cool Search Component.

Let us see how it works :

Woah that was pretty simple !! 😃

Let us see how it looks in Android 📱.

This works great in Android too 🎉🎉.

So we now have a great SearchComponent working in both iOS and Android.

You can find the repo here and an npm package here.

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

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

Timeless

Practical Design and Development

Karthik Balasubramanian

Written by

Trying to Solve Problems with Code @ timeless.co. Open sourcing the solutions when possible.

Timeless

Timeless

An inside look into how we approach design, development and user experience at timeless.co

Karthik Balasubramanian

Written by

Trying to Solve Problems with Code @ timeless.co. Open sourcing the solutions when possible.

Timeless

Timeless

An inside look into how we approach design, development and user experience at timeless.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store