Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pressable becomes full screen when inside BlurView on Android #616

Open
mohshbool opened this issue Apr 25, 2024 · 2 comments
Open

Pressable becomes full screen when inside BlurView on Android #616

mohshbool opened this issue Apr 25, 2024 · 2 comments

Comments

@mohshbool
Copy link

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:
screen

@praveen-me
Copy link

praveen-me commented May 19, 2024

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.

@rajgupta027
Copy link

rajgupta027 commented Aug 18, 2024

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.🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants