search

Kureev / react-native-blur

React Native Blur component
MIT License
3.78k stars 558 forks source link

BlurView doesn't work with TouchableWithoutFeedback on android #382

Open DimaGavrushko opened 4 years ago

DimaGavrushko commented 4 years ago 
<TouchableWithoutFeedback onPress={() => console.log('clicked')}>
       <BlurView
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
            }}
            blurType="dark"
            blurAmount={10}
       />
</TouchableWithoutFeedback>

console.log not triggering on android "react-native": "0.62.2", "@react-native-community/blur": "^3.4.1", Android: 10

garosap commented 3 years ago

Propably you have already solved/ worked around the problem, but a solution would be to use TouchableHighlight or TouchableOpacity instead of TouchableWithoutFeedback. TouchableHighlight and TouchableOpacity are like views with onPress functionality and optical feedback when pressed. So, by providing them with your desired dimensions (width and height or flex), you should achieve what you are aiming for.

Another solution, if you want to use TouchableWithoutFeedback, you can wrap BlurView (NOT TouchableWithoutFeedback) with a View that has dimensions.