Using “derivedStateOf” to hide the Bottom bar in Jetpack Compose
I was developing my Android app, and a question popped up.
How can I turn the bottom bar invisible on a scroll, like Linkedin or Twitter?
The logic is pretty simple. First, we find if the user is scrolling, and secondly, we disable the bottom and enable it when the scrolling stops.
The challenge is if we are constantly observing the scrolling position of the user. Won’t it be too expensive to recompose the UI?
The answer is Yes. It will be expensive. The solution to this problem is using “derivedStateOf”.
What is “derivedStateOf”?
Previously, we have explored side effects in Jetpack compose. The “derivedStateOf” is one of the side-effect APIs that can control the changes on the UI. We use “derivedStateOf” to control the number of recompositions. The scroll position updates constantly to avoid too many recompositions “derivedStateOf” is used. Let’s take the example of my code.
As you can see, showBottomBar only updates when the first index is visible. Even if the scroll position changes constantly, it will not update the bottom bar.
You can observe that the derivedStateOf variable only changes when the first index becomes visible or invisible.
How not to use “derivedStateOf”?
It is not used when we constantly observe a state change, for example, a change in a variable.
Here is an example from documentation:
I hope this makes the Side effects more clear.
You can see me make my Android app here:
We will explore the rest in upcoming blogs.
Thank you for reading.
If I have written something wrong, please forgive me. I hope you enjoyed reading.
Thank you,
Your Captain (the commute)
Hitesh Kohli.
