Kureev / react-native-blur

React Native Blur component
MIT License
3.76k stars 556 forks source link

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

Open iita71737 opened 1 year ago

iita71737 commented 1 year ago

iOS

https://github.com/Kureev/react-native-blur/assets/11864209/144cb1fa-c385-46f2-8bc8-afde67be3cd1

Android

https://github.com/Kureev/react-native-blur/assets/11864209/1f9dc1de-ba13-49f8-aad4-9f4b3993a5c4

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 commented 1 year ago

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