capture Ref or custom generate image from JSX/HTML react native without showing UI To user

user_15219833 0
Viewed 88

I am wanting to implement a download receipt functionality. I am tyring to use capture Ref because I want to generate a image of receipt that user can download. To generate the image from JSX or html in react native/expo, I use capture Ref. I can only do this with view rendering because this function requires a React component.

https://docs.expo.dev/versions/latest/sdk/captureRef/

but I cannot do this without display the UI to user. What I want to do is, stay on the page, click download button, and have the image downloaded that I can custom create and not show it to the user. But, I cannot quite find a way to just create a image from JSX with content I want in receipt and not show to user. Basically, I want this whole process to happen in background and download to be success.

screen-capture expo react-native
1 Answers

You can set the content away from the screen with absolute positioning:

      <View style={{position: 'absolute', left: Dimensions.get('screen').width}}>
        <ViewShot
          onCapture={onCapture}
          width={width}
          height={height}
        >
          <Text>This will show on the image</Text>
        </ViewShot>
      </View>

The lib also provides an example for offscreen rendering

user_11693250
Related