[FIXED] How to add blur to the barStyle in ReactNative bottomTabNavigator

Issue

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?

Solution

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.

Answered By - Asmeeta Rathod
Answer Checked By - - Senaida (ReactFix Volunteer)