Animated Search View in React Native

Lately I’ve been working more with animations in React Native. When it comes to that, React Native has its own API. There are some limitation though, as for example gesture handling or changing width and height of an element. For that, I can recommend using the react-native-reanimated library.

The source code can be found here. Note: this example uses react-native-reanimated v2. I will explain the most difficult points I had with this example.

Libraries that I have used

The thing about view positioning in React Native

I fixed this problem by playing with the elevation property and changing the order of the absolute positioned view. This property not just adds a drop shadow to the view, but also affects its z-order.

Preventing Fetch Race Conditions

For example, take a button that gets pressed by a user. An each click, a request is started and on response, a counter is increased. This could lead to problem, because the counter may increase too often. Another case, specific to React, is related to its life cycle. Specifically when a request is still running, after the component has been unmounted.

This code shows how to prevent fetch race conditions. It uses a generator function and cancels requests with the AbortController when necessary.

React Native Mobile Developer

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