How to add blur to the barStyle in ReactNative bottomTabNavigator-CodePudding

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?

CodePudding user response：

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.