Open mohshbool opened 5 months ago
Hey @mohshbool
Wrap the Pressable
component inside a TouchableOpacity
with an activeOpacity
of 1. This resolves the issue and ensures the button remains responsive.
Here’s an example implementation:
import React from 'react';
import {Dimensions, StyleSheet, View, TouchableOpacity, Pressable, Text} from 'react-native';
import {BlurView} from '@react-native-community/blur';
const Component = () => {
return (
<BlurView style={styles.container}>
<TouchableOpacity activeOpacity={1} style={{flex: 1}}>
<Pressable onPress={unlock} style={styles.buttonContainer}>
<Text style={styles.buttonText}>UNLOCK</Text>
</Pressable>
</TouchableOpacity>
</BlurView>
);
};
const styles = StyleSheet.create({
container: {
position: 'absolute',
zIndex: 1,
width: '100%',
height: Dimensions.get('window').height * 0.92,
justifyContent: 'flex-end',
paddingHorizontal: 25,
},
buttonContainer: {
marginBottom: 20,
},
buttonText: {
fontSize: 15,
color: 'white',
},
});
export default Component;
Pressable
component with activeOpacity={1}
to ensure the press events are captured correctly.By wrapping Pressable
in TouchableOpacity
, we maintain the intended functionality and improve cross-platform consistency.
Still doesn't work. Applied activeOpacity to 1 as suggested @praveen-me I had a work around by wrapping children inside blurView inside one single View. Works for me.🙂
This is happens only on Android, all versions. This problem disappears if I change styling in the code and refreshing. Problem stays away even after i undo the change even if it was irrelevant to the component.
Environment:
Scenario:
Screenshot of the code above from android: