Pressable becomes full screen when inside BlurView on Android

[mohshbool]

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:

"@react-native-community/blur": "^4.4.0",
"react-native": "0.73.1",

Scenario:

import React from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import {BlurView} from '@react-native-community/blur';

const Component = () => {
  return (
    <BlurView style={styles(theme).container}>
      <Pressable
        onPress={unlock}
        style={styles(theme).buttonContainer}
      >
        <Text style={styles(theme).buttonText}>UNLOCK</Text>
    </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'},
  });

Screenshot of the code above from android:

[praveen-me]

Hey @mohshbool

Wrap the Pressable component inside a TouchableOpacity with an activeOpacity of 1. This resolves the issue and ensures the button remains responsive.

Example Code

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;

Explanation

• BlurView: The container providing the blur effect.
• TouchableOpacity: Wraps the Pressable component with activeOpacity={1} to ensure the press events are captured correctly.
• Pressable: The button that needs to remain responsive.

By wrapping Pressable in TouchableOpacity, we maintain the intended functionality and improve cross-platform consistency.