How to apply Blur (GlassMorphism) to react native View Component?

[chakrihacker]

I was trying to apply glass morphism to a view

Here's the code

import React from 'react';
import {StyleSheet, Text, Dimensions} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {
  BackdropBlur,
  Blur,
  BlurMask,
  Canvas,
  Circle,
  Fill,
  Group,
  Paint,
  rect,
  Rect,
} from '@shopify/react-native-skia';

const {height, width} = Dimensions.get('window');

let arr = new Array(10).fill(0);

const clipRect = rect(0, 0, width, height);

const SkiaExample = () => {
  return (
    <SafeAreaView style={styles.container}>
      {arr.map((_, i) => (
        <Text key={i}>{'Hello World'}</Text>
      ))}
      <Canvas style={StyleSheet.absoluteFillObject}>
        <Rect
          height={height / 2}
          width={width}
          x={0}
          y={height / 2}
          color={'rgba(0,0,0,1)'}
        />
        <Group>
          <Circle cx={r} cy={r} r={r} color="cyan" />
          <Circle cx={_width + r} cy={r} r={r} color="magenta" />
          <Circle cx={_width / 2 + r} cy={_height + r} r={r} color="yellow" />
        </Group>
        <BackdropBlur intensity={20} clip={clipRect} />
      </Canvas>
    </SafeAreaView>
  );
};

export default SkiaExample;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
  }
});

All the elements inside canvas get blur, But the Text components which is behind the canvas don't get blur applied at all.

If I have to create a blur effect to React Native components like View or Text, how to achieve it?

Here's the screenshot of how it looks

[wcandillon]

Unfortunately, we don't try to access the bitmap of the native components at the moment, it's something we might be looking into in the future in order to provide advanced effects.

[chakrihacker]

Just a follow-up question.

Aren't we placing the canvas on top of View which means it has to be blurred?

Would love to know why this isn't the case?

[wcandillon]

I would be interesting to experiment with things like https://github.com/gre/react-native-view-shot but obivously if the native content behind is animated, it may be too slow. This would be interesting to experiment with this.

[inder243]

@wcandillon Is work going on this. react-native-blur-view not has full customisation as one need.