Creé una aplicación de reacción nativa con la CLI de reacción nativa e instalé algunas bibliotecas, después de instalar la biblioteca de reacción-nativa-comunidad/desenfoque y usar el componente BlurView, mi aplicación se estrelló sin ningún error en Android.
esta es la sección de dependencias en el archivo package.json:
{ ... "dependencies": { "@react-native-community/blur": "^3.6.0", "@react-navigation/native": "^6.0.6", "@react-navigation/native-stack": "^6.2.5", "react": "17.0.2", "react-native": "0.66.3", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.9.0", "react-native-vector-icons": "^9.0.0" }, ... }y este es el archivo App.js:
import React from 'react'; import {Text, TouchableOpacity, View} from 'react-native'; import { BlurView } from "@react-native-community/blur"; import styles from './styles'; export default function App() { return ( <View style={styles.container}> <BlurView style={styles.absolute} blurType="light" blurAmount={10} reducedTransparencyFallbackColor="white" /> <TouchableOpacity> <Text>Home</Text> </TouchableOpacity> </View> ); }después de algunos días encontré esta solución, pero esta solución tiene un problema que cuando volvía de otra pantalla a esta pantalla, la aplicación fallaba y se cerraba.
enlace: https://www.higithub.com/Kureev/issue/react-native-blur/452
este problema en react-navigation v6 y react-native-community/blur esto sucede.
solución:
import React from 'react'; import {Text, TouchableOpacity, View} from 'react-native'; import { BlurView } from "@react-native-community/blur"; import styles from './styles'; export default function App() { const [viewRef, setViewRef] = useState(null); const messageRef = useRef(null); const onViewLoaded = () => { setViewRef(findNodeHandle(messageRef.current)); }; return ( <View style={styles.container}> <View style={styles.body} ref={containerRef => { messageRef.current = containerRef; }} onLayout={onViewLoaded} /> {(viewRef || Platform.OS === 'ios') && ( <BlurView style={styles.absolute} blurType="light" blurAmount={10} reducedTransparencyFallbackColor="white" /> )} <TouchableOpacity> <Text>Home</Text> </TouchableOpacity> </View> ); }