I created a react-native app with react-native CLI and installed some libs, after installing the react-native-community/blur library and using the BlurView component my app without any errors crashed on android.
this is the dependencies section in the package.json file:
{
...
"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"
},
...
}
and this is the App.js file:
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>
);
}
after some days I found this solution, but this solution have a problem that when going back from another screen to this screen app crashed and closed.
link: https://www.higithub.com/Kureev/issue/react-native-blur/452
this problem on the react-navigation v6 and react-native-community/blur this happen.
solution:
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>
);
}