How to add blur to the barStyle in ReactNative bottomTabNavigator

Question

I am trying to add a glassmorphism effect to the barStyle of React Native bottomTabNavigator but it is not working.

import Home from "../screens/Home";
import Browse from "../screens/Browse";
import Library from "../screens/Library";
import Radio from "../screens/Radio";
import Search from "../screens/Search";



const Tab = createMaterialBottomTabNavigator();

const Tabs = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#1699da"
      inactiveColor="#3e2465"
      barStyle={{ 
          backgroundColor: '#00000040',
          shadowColor: '#1f26875e',
          backdropFilter: blur(7)
          
          
      }}
      labeled={false}
    >

Is this effect possible in ReactNative?

Answer 1

You can set glassmorphism effect using opacity but the Screen is rendering above bottom tab, so we couldn't see the transparency of bottom tabs.