react-native-view-shot not working with Expo


#1
import { captureScreen } from "react-native-view-shot"

captureScreenFunction = () => {
        captureScreen({
            format: "jpg",
            quality: 0.8
        })
        .then(
            uri => console.log("Image saved to", uri),
            error => console.error("Oops, snapshot failed", error)
        );
}

App restarts when calling captureScreenFunction using phone and emulator (api 26).

Any feedback would be appreciated.
Thanks in advance!


#2

that lib has native dependencies, you can use https://docs.expo.io/versions/v30.0.0/sdk/take-snapshot-async instead which is the same thing


#3

Thanks for the info! Any sample code? Just wanted to get screenshot, get the image and display it on <Image source={{uri : this.state.imageURI}} /> convert to base64 then save it to db. Will be using “react-native-fs”. Just wondering if RNFS will work on Expo?


#4

Hey @ryanjayford,

There is a code snippet at the bottom of that docs page Brent linked showing the Snapshot API in use. react-native-fs also requires native code configurations so you won’t be able to use it with a standard Expo project. We do have our FileSystem API that usually covers most use cases where one would use rn-fs. A good rule of thumb is that if the library you are looking at requires you to run react-native link or make any manual changes in the android or ios directories, you will not be able to use it in a standard Expo project. If you need to use such a library, you’ll have to eject and use ExpoKit.

Cheers,

Adam


#5

here’s an example of using takeSnapshotAsync to screenshot and get a base64: https://snack.expo.io/@notbrent/privileged-strawberries. read the docs for more info on other options

you should definitely read over the expo docs @ryanjayford before reaching out to external libraries. as @adamjnav mentioned, there is also a FileSystem API built into expo, so no need for react-native-fs.


#6

Thank you so much Brent for patiently answering my inquiry. Your sample help me a lot. Thanks also Adam for your inputs. I have seen the sample but its not so clear for a beginner like me.

Just have a question though, why is it that takeSnapshotAsync cant capture signature (ExpoPixi.Sketch ). Main reason I wanted to get screenshot is to capture the whole screen with two signatures. Right now it can only capture my canvas but not the signatures. I have made use of your code and added 2 ExpoPixi.Sketch for 2 signature, adjusted delay to 10 sec before it can capture, so that will have time to put signature in. I have put the whole code here. Hope you’ll not get tired on answering my inquiry. Thanks again!

import * as React from 'react';
import { Text, Image, View, StyleSheet } from 'react-native';
import { Constants, takeSnapshotAsync } from 'expo';
import * as ExpoPixi from 'expo-pixi';

export default class App extends React.Component {
  state = {
    snapshot: null,
    strokeColor: 'black',
    strokeWidth: 10,
  };

  componentDidMount() {
    this._saveScreenshotAsync();
    setInterval(this._saveScreenshotAsync, 10000);
  }

  _saveScreenshotAsync = async () => {
    try {
      let result = await takeSnapshotAsync(this.containerRef, {
        result: 'base64',
      });
      this.setState({ snapshot: result });
    } catch (e) {
      // console.log(e);
    }
  };


  render() {
    return (
      <View
        style={styles.container}
        ref={view => {
          this.containerRef = view;
        }}>
            <Text style={{fontSize:20}}>Signature 1</Text>
            <View style={{backgroundColor: '#ffffff', padding:20, height: '30%', width: '100%'}}>
                <ExpoPixi.Sketch
                    ref={ref => (this.sketch1 = ref)}
                    //onChange={this.onChange1}
                    //onReady={this.onReady}
                    style={{flex:1}}
                    strokeColor={this.state.strokeColor}
                    strokeWidth={this.state.strokeWidth}
                    strokeAlpha={1}
                />
            </View>
            <Text style={{fontSize:20}}>Signature 2</Text>                                   
            <View style={{backgroundColor: '#ffffff', padding:20, height: '30%', width: '100%'}}>
                <ExpoPixi.Sketch
                    ref={ref => (this.sketch2 = ref)}
                    //onChange={this.onChange2}
                    //onReady={this.onReady}
                    style={{flex:1}}
                    strokeColor={this.state.strokeColor}
                    strokeWidth={this.state.strokeWidth}
                    strokeAlpha={1}
                />
            </View>
        <View style={{height: '30%', width: '100%', alignItems: 'center'}}>
            {this.state.snapshot ? (
            <Image
                source={{ uri: `data:image/png;base64, ${this.state.snapshot}` }}
                style={{ width: 200, height: 200 }}
            />
            ) : null}
        </View>
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },   
});

#7

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.