CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
M.H
M.H

Reputation: 541

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

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

Upvotes: 1

Views: 3819

Answers (2)

DarkHorse
DarkHorse

Reputation: 349

You can try to display the BlurView after finishing all interaction (animations) on the screen. Actually, when we use react-navigation, all screen transitions are delayed until completed.

Then how can we get out the moment when finishing all interactions, fortunately, react-native provides InteractionManager.

In my case, I am using functional components. I am detecting the status as below code snippet.

const [isReadyScreen, setReadyScreen] = React.useState(false);

...

React.useEffect(() => {
  InteractionManager.runAfterInteractions(() => {
    // TODO: stuff for your screen is ready status such as state variable
    // my case I used `isReadyScreen`.
    setReadyScreen(true);
  });
}, []);

...

// in render area

<View>
  {
    isReadyScreen ? 
      <BlurView /> 
    : <View> placeholder component as you wish </View>
  }
</View>

Hope this can help you. ;)

It will work for both platforms even Android.

Upvotes: 2

M.H
M.H

Reputation: 541

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

Upvotes: 1

Related Questions