Improve bottom tabs blur overlay

[Parveshdhull]

Summary

leftovers from #14783

1. Currently blur view is creating blue overlay in ios, we should fix that. (more details)
2. Better transition between blurred bottom tabs & normal bottom tabs. Currently, we are changing to blurred bottom tabs when the shell has more than 6 cards. We should use animations and transitions with a scroll position (design input required)

[Parveshdhull]

Kureev/react-native-blur#513 (comment)

There might be a new approach for adding blur using react-native-skia which is actively maintained by Shopify. But I have not tried it yet. It's worth a try and it might not have these bugs.

https://shopify.github.io/react-native-skia/docs/backdrops-filters

[Parveshdhull]

Kureev/react-native-blur#513 (comment)
According to this comment, IOS BlurEffectView saturates color by around something like 180%.
#09101C (neutral-100), even though this color looks like black, Blue channel 1C is strongest. And blur view amplifies that.

If I use a color with same value for all channels, like #1C1C1C it fixes the issue.

[Parveshdhull]

Possible Solutions

1. use a color with same value for all channels (rgb)
2. find a color which gives desired color after saturation

[Parveshdhull]

Saturation

[Parveshdhull]

I tried to find a color for blur overlay that will give the same result as Figma after saturation. Below is a comparison image after applying these props

:background-color "#1E2430CC"
:blur-amount   20
:blur-radius   10

Note: Screenshots are from emulator, results might look different on real device