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

BlurView in iOS failed, But Work in Android. RN0.71.1 #588

Open
iita71737 opened this issue Jul 26, 2023 · 1 comment
Open

BlurView in iOS failed, But Work in Android. RN0.71.1 #588

iita71737 opened this issue Jul 26, 2023 · 1 comment

Comments

@iita71737
Copy link

iita71737 commented Jul 26, 2023

iOS

RPReplay_Final1690360852.MP4

Android

az_recorder_20230726_164428.mp4
import React from 'react';
import { View, StyleSheet, Image, Text, TouchableOpacity } from 'react-native';
import FastImage from 'react-native-fast-image';
import { BlurView } from '@react-native-community/blur';
import { VibrancyView } from "@react-native-community/blur";

const ViewBlurImage = () => {

  const [isBlurred, setIsBlurred] = React.useState(true);
  // const [viewRef, setViewRef] = React.useState(null);

  const toggleBlur = () => {
    setIsBlurred(!isBlurred);
  };

  return (
    <View style={styles.container}>
        <FastImage
          key={'blurryImage'}
          style={styles.image}
          source={{ uri: 'https://images.unsplash.com/photo-1600326145377-bcccb9a9daf2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2864&q=80' }}
          resizeMode={FastImage.resizeMode.cover}
        />
      {isBlurred && (
        <BlurView
          style={styles.absolute}
          blurType="light"
          blurAmount={10} // 调整模糊程度,数值越大越模糊
          reducedTransparencyFallbackColor="white" // iOS 上用于模糊背景的颜色,可选
          overlayColor="transparent"
        />
      )}

      {/* 取消模糊效果的按钮 */}
      <TouchableOpacity style={styles.button} onPress={toggleBlur}>
        <Text style={styles.buttonText}>
          {isBlurred ? '取消模糊' : '添加模糊'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden'
  },
  image: {
    width: '100%',
    height: '100%',
  },
  absolute: {
    ...StyleSheet.absoluteFillObject,
  },
  button: {
    position: 'absolute',
    bottom: 20,
    backgroundColor: 'white',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default ViewBlurImage;

@Ngomana
Copy link

Ngomana commented Jul 29, 2023

On my side android is very unstable when using TextInput inside a ScrollView

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

2 participants