Sign in

After reading the post, you can achieve the following features like WhatsApp does — open/close camera along with entering and leaving camera screen.

ImagePicker in WhatsApp has a camera to take pictures or record videos. The camera’s status changes along with its host screen becoming focus or not. Although this feature can be easily achieved by implementing ‘focus’ event listener, the moments of opening and closing camera are not exactly the time(too late) that we want it happens. In order to make the changes more sensitive, we need to solve the following problems:


Nowadays, I’m trying to update React Native development skills by cloning WhatsApp app. By resorting to a various of tutorials from Internet, I finished a couple of interfaces and features easily, util doing the header animation as following:

WhatsApp header animation

Header could slide up and down automatically by sliding left and right gestures. Unfortunately, React Navigation doesn’t provide enough configuration options for this effect. However, I notice that the indicator executes a similar animation while sliding left and right gestures happen.

Analysis

According to the source code of TabBarIndicator.tsx, the customisation basically includes:

The navigator…

Ryan Xu

I’m a software engineer, a runner and a twins’ father~

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