Capture any React Native view using react-native-skia, convert it into an image, and save it directly to the device's gallery using a high-performance JSI-native library.

Saving images directly from rendered views into the device's gallery used to require multiple bridges, performance compromises, or complex native code. Not anymore.

In this article, we’ll show you how to capture any view content in React Native, convert it to an image using react-native-skia, and save it directly to the device's gallery using a blazing-fast native JSI module.

Introducing: react-native-img-buffer-save

🧩 The Problem

You're building a feature where the user sees a custom visual element — maybe a QR code, a certificate, a card, a chart — and you want them to be able to save it as an image into their gallery.

In a typical React Native setup, this means:

  • Capturing a view visually.
  • Converting it to image bytes.
  • Passing it through the JS bridge to native code to save it.

This process is often clunky, slow, and complex.

What if you could do it all — capture any React Native View and save it instantly to the gallery — in just a few lines of code?

⚡ The Solution: react-native-img-buffer-save

This library, built using JSI (JavaScript Interface), allows you to save raw image buffers (like Uint8Array or ArrayBuffer) directly to the device's gallery — with zero bridge overhead.

Paired with React Native Skia, you can snapshot any view or canvas, encode it as a PNG or JPEG, and push it straight to the gallery. Fast and native.

📦 Installation

Yarn 

yarn add react-native-img-buffer-save

NPM 

npm install react-native-img-buffer-save

iOS Only 

cd ios && pod install

👨‍💻 Example: Capture Any View and Save It

Let’s say you have any visual content in a view that you want to turn into an image and save:

<View ref={refView}>
  {/* Your custom QR code, styled view, or anything else */}
View>

Using react-native-skia, you can render the view and extract its image bytes:

const snapshot = await makeImageFromView(refView);
const bytes = snapshot?.encodeToBytes(ImageFormat.PNG, 100);

if (bytes?.buffer) {
  try {
    saveImageToGallery(bytes.buffer);
  } catch (err) {
    console.error('Failed to save image:', err);
  }
}

✅ This works for any rendered content — QR codes, charts, posters, styled UI blocks — as long as you can capture it with react-native-skia.

🧠 Under the Hood

  • Written in C++ with JSI for maximum performance.
  • No JS bridge overhead.
  • Accepts both Uint8Array and ArrayBuffer.
  • Works on both Android and iOS.

🧪 Full Usage Example 

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { saveImageToGallery } from 'react-native-img-buffer-save';

export default function App() {
  const saveImg = () => {
    const imageBytes = Uint8Array.from([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) // Replace with real image
    saveImageToGallery(imageBytes);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={saveImg}>
        <Text>Save IMG to galleryText>
      TouchableOpacity>
    View>
  );
}

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

🛠️ Contribute or Report Issues

The library is open-source. Star it ⭐, use it, and feel free to contribute!

GitHub: https://github.com/pioner92/react-native-img-buffer-save

Made with ❤️ and create-react-native-library