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.

(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 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 Search Component. 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. placeholder: a string for the TextInput
2. placeholderTextColor: a color value for the placeholder, defaults to theme
3. onChange: a callback function called on typing
4. value: the current value of the text
5. onSearchClear: a callback function on clicking the close icon
6. theme: its value is one of ‘LIGHT’ or ‘DARK’, defaults to ‘LIGHT’

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

1. memoizedTextInputOnFocusWidth
2. memoizedTextInputOnBlurWidth

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 textInputWidth

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

This is Karthik representing Timeless.

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.