How to use BlurView with web browser from react-native-community/blure?

[bashamlan]

I was trying to use blur View for my project as I was following in tutorial but it is not working with me as I'm running my project in browser to view the result but it gives this error:Failed to compile C:/Users/basha/Nike-Store/node_modules/@react-native-community/blur/index.js Module not found: Can't resolve './src/BlurView' in 'C:\Users\basha\Nike-Store\node_modules@react-native-community\blur'

`import { BlurView } from "@react-native-community/blur";

const Home =()=>{

const [showAddToBagModal, setShowAddToBagModal] = React.useState(false)
const [selectedItem, setSelectedItem] = React.useState(null)
const [selectedSize, setSelectedSize] = React.useState("")

const [trending, setTrending]=useState( Data.map((dataItem, index)=>({ key:${index}, name: dataItem.name, img: dataItem.img, bgColor:dataItem.bgColor, type: dataItem.type, price: dataItem.price, sizes: dataItem.sizes })) );

const renderItem=({item, index})=>{ return( <TouchableOpacity onPress={()=>{ setSelectedItem(item) setShowAddToBagModal(true) }}

     style={styles.renderStyle}>
      <Text style={styles.renderText}>{item.type}</Text>
      <View style={[styles.renderView,{backgroundColor: item.bgColor}]}>
            <View style={styles.viewName}>
             <Text style={styles.textName}>{item.name}</Text>
             <Text style={styles.textName1}>{item.price}</Text>
             </View>
         </View>
         <View style={styles.viewSvg}>
              <Svg height="100%" widht="100%">
                  <Polygon 
                  points="0,0 160,0 160,80"
                  fill='#fff'
             /></Svg>
        </View> 
            <Image 
         source={item.img}
         style={styles.image}
         />
     </TouchableOpacity>
 )

}

return( <View style={styles.container}> <Text style={styles.trending}>TRENDING</Text>

    <View style={styles.flatView}>
    <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={trending}
                keyExtractor={item => item.id}
                renderItem={renderItem}
            />
    </View>

    <View style={styles.secondFlat}>
        <View style={{width:70, marginLeft:SIZES.base}}>
           <Image 
           source={images.recentlyViewedLabel}
           resizeMode="contain"
           style={{height:'100%', width:'100%'}}
           />
        </View>
    </View>
    {selectedItem &&
    <Modal animationType="slide"
    transparent={true}
    visible={showAddToBagModal}>
       <BlurView
                    style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
                    blurType="light"
                    blurAmount={20}
                    reducedTransparencyFallbackColor="white"
                >
        </BlurView>

    </Modal>
    }
    
    </View>
)

}`