How to add expo-blur into a modal in react-native

Question

Hey so I'm very inexperienced with coding and react-native in general, but I'm trying to create a modal which pops up with a little info box for the user and blurs out the background page. I was able to get a modal working and tweaked it for my specifications until it works great! I imported the library 'expo-blur' and found an example online of it being used, but I can't figure out how I would implement the blur into my Modal. Please any help with this would be extremely appreciated! I've attached images of my Modal code and the expo-blur example I found, below.

Modal

BlurView example

Answer 1

I had the same problem and I have just found this example. Now it works. https://github.com/Kureev/react-native-blur/issues/105#issuecomment-257872152

In the example he is using class components, I'm using function components. The problem was I wasn't using transparent={true} for the modal This is my code to make it work:

 <Modal visible={filterScreen} animationType="slide" transparent={true}>
   <View style={{ marginTop: 100, flex: 1 }}>
     <BlurView
       intensity={100}
       style={[styles.nonBlurredContent, { height: "100%" }]}
     >
       <Text>Hello! I am bluring contents underneath</Text>
       <Text>Hello from the modal</Text>
       <TouchableOpacity
         style={{ backgroundColor: "red", width: 30, height: 30 }}
         onPress={() => setFilterScreen(!filterScreen)}
       >
         <Text>X</Text>
       </TouchableOpacity>
     </BlurView>
   </View>
 </Modal>