react-native-view-shot capturing only camera element content

1k Views Asked by At

I have this code here:

<View style={styles.pageContainer}>
      <ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
        <Camera
          style={[
            styles.camera,
            { position: 'relative' }
          ]}
          type={type}
          ref={(ref) => {
            setCamera(ref)
          }}
        />

        <View
          style={{
            backgroundColor: '#000',
            width: screenWidth - (PAGE_HORIZONTAL_PADDING * 2),
            position: 'absolute',
            bottom: 50,
            left: 0,
          }}
        >
          <Text style={{ color: '#FFF' }}>kek lol</Text>
        </View>
      </ViewShot>

      <TouchableOpacity
        style={styles.takeShotButton}
        onPress={async () => {
          if (camera) {
            const uri = await captureRef(viewShotRef, {
              format: "jpg",
              quality: 0.8,
            })

            setAssetInformation({ uri })
          }
        }}
       >
         <Text style={styles.controlButtonText}>Take a picture</Text>
      </TouchableOpacity>
    </View>

the problem is, when I do captureRef it does only capture content of Camera component and does not capture my text component which has "kek lol" inside of it. Any ideas why?

0

There are 0 best solutions below