using @react-native-community/blur with react-native 0.66.3 crash on android

Question

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>
  );
}

Answer 1

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>
  );
}