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:
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 :
- React Native Reanimated — Animation Library
- React Native SVG — For icons
The search component accepts the following props :
- placeholder: a string for the TextInput
- placeholderTextColor: a color value for the placeholder, defaults to theme
- onChange: a callback function called on typing
- value: the current value of the text
- onSearchClear: a callback function on clicking the close icon
- theme: 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 :
- 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.