0

Please I'm trying to snapshot the viewshot view of Surface and Text added dynamically, But can't see the Text when Exporting the Image.

<Viewshot>
    <Surface style={{ width:Dimensions.get('screen').width, height:Dimensions.get('screen').height, zIndex: 0 }} ref={(el) => this.surface = el}>
        <Hudson><GLImage source={{ uri: this.state.preview.uri }} resizeMode={'cover'}></Hudson>
    </Surface>
        <Draggable style={{}} x={0} z={0} minX={0} maxX={Dimensions.get('window').width} y={Dimensions.get('window').height / 3}>
            <PinchGestureHandler {...gesture}>
                <Animated.View style={[{ width: Dimensions.get('window').width, height: 'auto', backgroundColor: 'rgba(0, 0, 0, 0.1)', paddingHorizontal: 20, textAlign: 'center', paddingVertical: 10, saving: false }, { transform: [{ scale }] }]}>
                    <Text style={{ color: '#FFF', fontFamily: 'Nunito-Bold', fontSize: 16 }}>{text}</Text>
                </Animated.View>
            </PinchGestureHandler>
        </Draggable>
</ViewShot>
jaaouani
  • 149
  • 1
  • 10

1 Answers1

1

It's easier to answer these kinds of questions with more information like:

  • version of react-native-view-shot
  • platform you are developing for

I'm assuming you're developing for android.

react-native-view-shot as of 3.0.2 doesn't support gl-react on android. You can check out check out the interoperability table on the source homepage: https://github.com/gre/react-native-view-shot

However, you might want to try using react-native-webgl-view-shot. It might do what you need it to do. Alternatively you can probably modify the source of either package to properly screenshot a GLImage. I'm not exactly sure this will solve your problem but I found this when I was looking up solutions for a similar problem the other day: android-opengl-screenshot

// source taken from: https://stackoverflow.com/questions/4731589/android-opengl-screenshot
public static Bitmap SavePixels(int x, int y, int w, int h, GL10 gl)
{  
     int b[]=new int[w*(y+h)];
     int bt[]=new int[w*h];
     IntBuffer ib=IntBuffer.wrap(b);
     ib.position(0);
     gl.glReadPixels(x, 0, w, y+h, GL10.GL_RGBA, GL10.GL_UNSIGNED_BYTE, ib);

     for(int i=0, k=0; i<h; i++, k++)
     {//remember, that OpenGL bitmap is incompatible with Android bitmap
      //and so, some correction need.        
          for(int j=0; j<w; j++)
          {
               int pix=b[i*w+j];
               int pb=(pix>>16)&0xff;
               int pr=(pix<<16)&0x00ff0000;
               int pix1=(pix&0xff00ff00) | pr | pb;
               bt[(h-k-1)*w+j]=pix1;
          }
     }


     Bitmap sb=Bitmap.createBitmap(bt, w, h, Bitmap.Config.ARGB_8888);
     return sb;
}
brando
  • 598
  • 6
  • 11