Image is blank when taking picture of a big size view

[acollazomayer]

feature request

bug report

The image is not working properly when capturing an 8000 by 4000 view. The content of the image is blank.

Version & Platform

2.5.0

npm ls react-native react-native-view-shot #<- PASTE CMD RESULT IN HERE

Platform: iOS

Expected behavior

Be able to see the content of the 8000 by 4000 view

Actual behavior

Image is blank

Steps to reproduce the behavior

const styles = StyleSheet.create({
  multipleImageWrapper: {
    position: 'absolute',
    bottom: 0,
    top: Dimensions.get('window').height + 5,
  },
  flex: {
    flex: 1,
    backgroundColor: 'red',
  },
  fullImage: {
    width: '100%',
    height: '100%',
  },
});

<View
      collapsable={false}
      style={[styles.multipleImageWrapper, {width: 4000, height: 8000}]}
      ref={ref}
    >
      {images.map((image, i) => (
        <View key={`${i}`} style={styles.flex}>
          <Image
            resizeMode="cover"
            source={{
              uri: image,
            }}
            style={styles.fullImage}
          />
        </View>
      ))}
    </View>

[ZacBin9]

I encountered the same problem.

[moon-xt]

same problem

[tomaseliasm]

hi! same here, any workaround?

[tomaseliasm]

hi! same here, any workaround?

I was able to capture a long image using the option useRenderInContext

[zd1471278687]

hi! same here, any workaround?

I was able to capture a long image using the option useRenderInContext

Which version ?

[tomaseliasm]

hi! same here, any workaround?

I was able to capture a long image using the option useRenderInContext

Which version ?

v3.3.0

[israel-dv]

hi! same here, any workaround?

I was able to capture a long image using the option useRenderInContext

Where is that ?

[tomaseliasm]

hi! same here, any workaround?

I was able to capture a long image using the option useRenderInContext

Where is that ? @israel-dv It's an option for captureRef https://github.com/gre/react-native-view-shot#capturerefview-options-lower-level-imperative-api

[israel-dv]

@tomaseliasm I can see that in the documentation, but in the latest version 3.4.0 It doesn't exists.

This is the interface to CaptureOptions

export interface CaptureOptions {
        /**
         * (number): the width and height of the final image (resized from the View bound. don't provide it if you want
         * the original pixel size).
         */
        width?: number;
        /**
         * @see {CaptureOptions#width}
         */
        height?: number;
        /**
         * either png or jpg or webm (Android). Defaults to png. raw is a ARGB array of image pixels.
         */
        format?: 'jpg' | 'png' | 'webm' | 'raw';
        /**
         * the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpg)
         */
        quality?: number;
        /**
         * the method you want to use to save the snapshot, one of:
         " - tmpfile" (default): save to a temporary file (that will only exist for as long as the app is running).
         " - base64": encode as base64 and returns the raw string. Use only with small images as this may result of
         *   lags (the string is sent over the bridge). N.B. This is not a data uri, use data-uri instead.
         " - data-uri": same as base64 but also includes the Data URI scheme header.
         " - zip-base64: compress data with zip deflate algorithm and than convert to base64 and return as a raw string."
         */
        result?: 'tmpfile' | 'base64' | 'data-uri' | 'zip-base64';
        /**
         * if true and when view is a ScrollView, the "content container" height will be evaluated instead of the
         * container height.
         */
        snapshotContentContainer?: boolean;
    }

What version do you have ?

[tomaseliasm]

@tomaseliasm I can see that in the documentation, but in the latest version 3.4.0 It doesn't exists.

This is the interface to CaptureOptions

export interface CaptureOptions {
        /**
         * (number): the width and height of the final image (resized from the View bound. don't provide it if you want
         * the original pixel size).
         */
        width?: number;
        /**
         * @see {CaptureOptions#width}
         */
        height?: number;
        /**
         * either png or jpg or webm (Android). Defaults to png. raw is a ARGB array of image pixels.
         */
        format?: 'jpg' | 'png' | 'webm' | 'raw';
        /**
         * the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpg)
         */
        quality?: number;
        /**
         * the method you want to use to save the snapshot, one of:
         " - tmpfile" (default): save to a temporary file (that will only exist for as long as the app is running).
         " - base64": encode as base64 and returns the raw string. Use only with small images as this may result of
         *   lags (the string is sent over the bridge). N.B. This is not a data uri, use data-uri instead.
         " - data-uri": same as base64 but also includes the Data URI scheme header.
         " - zip-base64: compress data with zip deflate algorithm and than convert to base64 and return as a raw string."
         */
        result?: 'tmpfile' | 'base64' | 'data-uri' | 'zip-base64';
        /**
         * if true and when view is a ScrollView, the "content container" height will be evaluated instead of the
         * container height.
         */
        snapshotContentContainer?: boolean;
    }

What version do you have ?

v3.3.0

[israel-dv]

@tomaseliasm I can see that in the documentation, but in the latest version 3.4.0 It doesn't exists. This is the interface to CaptureOptions

export interface CaptureOptions {
        /**
         * (number): the width and height of the final image (resized from the View bound. don't provide it if you want
         * the original pixel size).
         */
        width?: number;
        /**
         * @see {CaptureOptions#width}
         */
        height?: number;
        /**
         * either png or jpg or webm (Android). Defaults to png. raw is a ARGB array of image pixels.
         */
        format?: 'jpg' | 'png' | 'webm' | 'raw';
        /**
         * the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpg)
         */
        quality?: number;
        /**
         * the method you want to use to save the snapshot, one of:
         " - tmpfile" (default): save to a temporary file (that will only exist for as long as the app is running).
         " - base64": encode as base64 and returns the raw string. Use only with small images as this may result of
         *   lags (the string is sent over the bridge). N.B. This is not a data uri, use data-uri instead.
         " - data-uri": same as base64 but also includes the Data URI scheme header.
         " - zip-base64: compress data with zip deflate algorithm and than convert to base64 and return as a raw string."
         */
        result?: 'tmpfile' | 'base64' | 'data-uri' | 'zip-base64';
        /**
         * if true and when view is a ScrollView, the "content container" height will be evaluated instead of the
         * container height.
         */
        snapshotContentContainer?: boolean;
    }

What version do you have ?

v3.3.0

Doesn't exist

[babyrusa]

@tomaseliasm When I use useRenderInContext: true, it does not save the elements that are position:"absolute" on top of my view. is there a way to save it?