Apple Liquid Glass Effect with React Native Skia

Description:

This is an interactive, draggable liquid glass and magnifying lens effect built with React Native, Skia, Gesture Handler, and Reanimated.

You can use it to add real-time blur, distortion, and lighting effects to the content beneath the lens.

The component is fully interactive, so you can grab the lens and move it around the screen with your finger.

Features

• 👆 Interactive and Draggable. You can grab the lens and move it around with touch input.
• ⚡️ GPU-Powered. The entire effect is a single SkSL fragment shader that runs directly on the GPU for maximum performance.
• 💧 Dynamic Effects. It creates real-time blur, distortion, and lighting effects on any content underneath it.
• 🚀 High-Performance. It uses react-native-reanimated to send gesture data directly to the UI thread, which avoids the React Native bridge for lag-free updates.
• 🛠️ Customizable. You can change the lens dimensions, shape, and other properties by modifying the shader uniforms.

Preview

How to Use It

1. Clone the repository from GitHub and navigate into the project directory.

git clone https://github.com/alexandrius/liquid-glass-rn-skia.git
cd liquid-glass-rn-skia

2. Install the required dependencies using either npm or yarn.

npm install
# or
yarn install

3. Start the application.

npx expo start

4. Here is a simplified example of the core logic.

// 1. Store gesture position in shared values
const x = useSharedValue(width / 2);
const y = useSharedValue(height / 2);
// 2. Create the gesture handler
const gesture = Gesture.Pan().onUpdate((e) => {
  x.value = e.x;
  y.value = e.y;
});
// 3. Create a derived value that the shader can read
const mouse = useDerivedValue(() => {
  return vec(x.value, y.value);
}, [x, y]);
// 4. Pass the derived value directly to the shader's uniforms
const uniforms = useDerivedValue(() => ({
    // ... other uniforms
    iMouse: mouse.value,
}), [mouse]);
// ... render the GestureDetector and Canvas
<Shader source={source} uniforms={uniforms} />

FAQs

Q: What is SkSL?
A: SkSL stands for Skia Shading Language. It is a variant of GLSL (OpenGL Shading Language) used to write custom shaders that run on the GPU to create high-performance graphics and visual effects.

Q: How does this project maintain 60 FPS performance?
A: It achieves smooth performance by using React Native Reanimated and Gesture Handler. These libraries work together to process user gestures and update shader uniforms directly on the UI thread, bypassing the slower JavaScript thread.

Q: Can I use a different SkSL shader with this setup?
A: Yes. You can replace the provided SkSL shader string with your own custom shader. You will need to adjust the uniforms prop to pass the necessary input values that your custom shader requires.