Harshit sharma
Harshit sharma

Reputation: 103

Take Screenshot in Expo React Native App SDK 52

I am unable to take screenshot in Expo App SDK52 as provided here. https://docs.expo.dev/tutorial/screenshot/

My first prefrence is to take complete screen screenshot but getting error [Error: Failed to snapshot view tag -1] and while View Screenshots getting errors Getting error [Error: Failed to snapshot view tag 388,776,980 (different numbers) ]

My simple App.js

import { StatusBar } from "expo-status-bar";
import { useRef, useState } from "react";
import { Button, Text, StyleSheet, View } from "react-native";
import { captureRef, captureScreen } from "react-native-view-shot";

export default function App() {
  const imageRef = useRef(null);
  const [localUri, setlocalUri] = useState("");

  // Getting error [Error: Failed to snapshot view tag 388,776,980]
  const handleViewScreenshot = async () => {
    try {
      const uri = await captureRef(imageRef, {
        height: 440,
        quality: 1,
      });

      console.log(uri);
      setlocalUri(uri);
    } catch (error) {
      setlocalUri(`${error}`);
    }
  };

  // Getting error Oops, snapshot failed [Error: Failed to snapshot view tag -1]
  const handleCompleteScreenshot = () => {
    captureScreen({
      format: "jpg",
      quality: 0.8,
    }).then(
      (uri) => setlocalUri(uri),
      (error) => setlocalUri(`Oops, snapshot failed ${error}`)
    );
  };

  return (
    <View style={styles.container}>
      <View ref={imageRef} collapsable={false} style={styles.box}></View>
      <Text>URI : {localUri}</Text>
      <Button title="Take Screenshot" onPress={handleViewScreenshot} />
      <Button title="Take Complete Screenshot" onPress={handleCompleteScreenshot} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    width: "85%",
    borderRadius: 20,
    marginBottom: 30,
    aspectRatio: 1 / 1.5,
    backgroundColor: "green",
  },
});

package.json

{
  "name": "sampleapp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~52.0.23",
    "expo-status-bar": "~2.0.0",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-view-shot": "~4.0.3",
    "expo-media-library": "~17.0.4",
    "expo-dev-client": "~5.0.8"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

Upvotes: 1

Views: 56

Answers (0)

Related Questions