Using react-native-view-shot package in React Native how do I capture the View I want using useRef?

Question

<ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ width: '100%' }}>

                            {filterHistory === {} ? ( purchasedCards.length > 0 && purchasedCards.map( ( cardDetail, cardDetailIndex ) => {

                                let dail = cardDetail.categoryId === 2 ? 'Dail *200*xxxxxxxxxxxxx#' : cardDetail.categoryId === 1 ? 'Dail *14*xxxxxxxxxxxxxx#' : 'Redeem the code'


                                return (

                                    <View style={styles.afterPurchaseHeaderCard} key={cardDetailIndex}  >

                                        <Text style={styles.afterPurchaseHeaderCardDate}>{moment( cardDetail.updatedDate ).format( 'DD/MM/YY hh:mm:ss' )}</Text>

                                        <View style={styles.afterPurchaseHeaderCardDetail1View}>
                                            <Text style={styles.afterPurchaseHeaderCardDetail1ViewText}>{cardDetail.cardName}</Text>
                                            <MaterialCommunityIcon style={styles.homeIcon} name={'arrow-right-thick'} color={c.secondaryColor} size={26} />
                                            <Text style={styles.afterPurchaseHeaderCardDetail1ViewText}>{cardDetail.price}</Text>

                                        </View>

                                        <View style={styles.afterPurchaseHeaderCardDetail2View} ref={( ref ) => ( viewRef.current[ `${cardDetailIndex}` ] = ref )}>
                                            <View style={styles.afterPurchaseHeaderCardDetail2VInfo}>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextName}>Transaction ID</Text>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextValue}>{cardDetail.transactionId + 1000000}</Text>
                                            </View>
                                            <View style={styles.afterPurchaseHeaderCardDetail2VInfo}>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextName}>Serial Number</Text>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextValue}>{cardDetail.serial}</Text>
                                            </View>
                                            <View style={styles.afterPurchaseHeaderCardDetail2VInfo}>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextName}>Secret Code</Text>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextValue}>{cardDetail.code}</Text>
                                            </View>
                                            <View style={styles.afterPurchaseHeaderCardDetail2VInfo}>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextName}>Expiry Date</Text>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextValue}>{cardDetail.expiryDate}</Text>
                                            </View>
                                        </View>

                                        <View style={styles.afterPurchaseHeaderCardBtns}>
                                            <TouchableOpacity style={styles.afterPurchaseHeaderCardBtn} onPress={() => Print( cardDetail.cardName, cardDetail.transactionId, cardDetail.updatedDate, cardDetail.expiryDate, cardDetail.serial, cardDetail.code, dail )} >
                                                <MaterialCommunityIcon style={styles.homeIcon} name={'printer'} color={c.secondaryColor} size={26} />
                                            </TouchableOpacity>

                                            <TouchableOpacity style={styles.afterPurchaseHeaderCardBtn} onPress={() => {
                                                setShowToastAlert( true );
                                                setToastAlertStatus( true );
                                                setToastAlertMessage( 'Secret Code Copied' );
                                                Clipboard.setString(
                                                    'Transation Id: ' + ( cardDetail.transactionId + 1000000 ) + '\n' +
                                                    "-----------------------------" + '\n' +
                                                    'Name: ' + cardDetail.cardName + '\n' +
                                                    "-----------------------------" + '\n' +
                                                    'Serial Nb: ' + cardDetail.serial + '\n' +
                                                    "-----------------------------" + '\n' +
                                                    'Code: ' + cardDetail.code + '\n' +
                                                    "-----------------------------" + '\n' +
                                                    'Expiry Date: ' + cardDetail.expiryDate );
                                            }} >
                                                <MaterialCommunityIcon style={styles.homeIcon} name={'content-copy'} color={c.secondaryColor} size={26} />
                                            </TouchableOpacity>

                                            <TouchableOpacity style={styles.afterPurchaseHeaderCardBtn} onPress={() => shareViewAsImage( `${cardDetailIndex}` )}  >
                                                <MaterialCommunityIcon style={styles.homeIcon} name={'share'} color={c.secondaryColor} size={26} />
                                            </TouchableOpacity>

                                        </View>
                                    </View>
                                )
                            } ) ) : ( filterHistory.length > 0 && filterHistory.map( ( cardDetail, cardDetailIndex ) => {


                                let dail = cardDetail.categoryId === 2 ? 'Dail *200*xxxxxxxxxxxxx#' : cardDetail.categoryId === 1 ? 'Dail *14*xxxxxxxxxxxxxx#' : 'Redeem the code'

                                return (

                                    <View style={styles.afterPurchaseHeaderCard} key={cardDetailIndex} >

                                        <Text style={styles.afterPurchaseHeaderCardDate}>{moment( cardDetail.updatedDate ).format( 'DD/MM/YY hh:mm:ss' )}</Text>

                                        <View style={styles.afterPurchaseHeaderCardDetail1View}>
                                            <Text style={styles.afterPurchaseHeaderCardDetail1ViewText}>{cardDetail.cardName}</Text>
                                            <MaterialCommunityIcon style={styles.homeIcon} name={'arrow-right-thick'} color={c.secondaryColor} size={26} />
                                            <Text style={styles.afterPurchaseHeaderCardDetail1ViewText}>{cardDetail.price}</Text>

                                        </View>

                                        <View style={styles.afterPurchaseHeaderCardDetail2View} ref={( ref ) => ( viewRef.current[ `${cardDetailIndex}` ] = ref )}  >
                                            <View style={styles.afterPurchaseHeaderCardDetail2VInfo}>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextName}>Transaction ID</Text>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextValue}>{cardDetail.transactionId + 1000000}</Text>
                                            </View>
                                            <View style={styles.afterPurchaseHeaderCardDetail2VInfo}>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextName}>Serial Number</Text>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextValue}>{cardDetail.serial}</Text>
                                            </View>
                                            <View style={styles.afterPurchaseHeaderCardDetail2VInfo}>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextName}>Secret Code</Text>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextValue}>{cardDetail.code}</Text>
                                            </View>
                                            <View style={styles.afterPurchaseHeaderCardDetail2VInfo}>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextName}>Expiry Date</Text>
                                                <Text style={styles.afterPurchaseHeaderCardDetail2VInfoTextValue}>{cardDetail.expiryDate}</Text>
                                            </View>
                                        </View>

                                        <View style={styles.afterPurchaseHeaderCardBtns}>
                                            <TouchableOpacity style={styles.afterPurchaseHeaderCardBtn} onPress={() => Print( cardDetail.cardName, cardDetail.transactionId, cardDetail.updatedDate, cardDetail.expiryDate, cardDetail.serial, cardDetail.code, dail )} >
                                                <MaterialCommunityIcon style={styles.homeIcon} name={'printer'} color={c.secondaryColor} size={26} />
                                            </TouchableOpacity>

                                            <TouchableOpacity style={styles.afterPurchaseHeaderCardBtn} onPress={() => {
                                                setShowToastAlert( true );
                                                setToastAlertStatus( true );
                                                setToastAlertMessage( 'Secret Code Copied' );
                                                Clipboard.setString(
                                                    'Transation Id: ' + ( cardDetail.transactionId + 1000000 ) + '\n' +
                                                    "-----------------------------" + '\n' +
                                                    'Name: ' + cardDetail.cardName + '\n' +
                                                    "-----------------------------" + '\n' +
                                                    'Serial Nb: ' + cardDetail.serial + '\n' +
                                                    "-----------------------------" + '\n' +
                                                    'Code: ' + cardDetail.code + '\n' +
                                                    "-----------------------------" + '\n' +
                                                    'Expiry Date: ' + cardDetail.expiryDate );
                                            }} >
                                                <MaterialCommunityIcon style={styles.homeIcon} name={'content-copy'} color={c.secondaryColor} size={26} />
                                            </TouchableOpacity>

                                            <TouchableOpacity style={styles.afterPurchaseHeaderCardBtn} onPress={() => shareViewAsImage( `${cardDetailIndex}` )}  >
                                                <MaterialCommunityIcon style={styles.homeIcon} name={'share'} color={c.secondaryColor} size={26} />
                                            </TouchableOpacity>

                                        </View>
                                    </View>

  const viewRef = useRef( {} );

 const shareViewAsImage = async ( id ) => {

        try {
            // Capture the view and get the URI
            const uri = await captureRef( viewRef.current[ id ], {
                format: 'jpg',
                quality: 1,
            } );


            // Define the cropping coordinates, width, and height

            // Now you can proceed to share the cropped image
            const shareOptions = {
                title: 'Share via',
                url: uri, // Use the croppedImage URI for sharing
                social: Share.Social.WHATSAPP,
            };

            await Share.shareSingle( shareOptions );
        } catch ( error ) {
            console.log( 'Error sharing:', error );
            setShowToastAlert( true );
            setToastAlertStatus( false );
            setToastAlertMessage( 'Error with sharing' );
        }
    };

I tried using the function with ref={( ref ) => ( viewRef.current[ ${cardDetailIndex} ] = ref )} used at the View with style name 'afterPurchaseHeaderCard' and it worked fine giving me the whole view as a picture to save but when I go to use it inside in the View with style name afterPurchaseHeaderCardDetail2View it gives me this error [Error: Failed to capture view snapshot].

Anybody can help me solve this issue?

score 0 · Answer 1 · answered Aug 30 '23 at 05:49

0

Create a separate component from the purchasedCard
Inside the component add the logic for capturing the view

` const PurchasedCard = () => { const viewRef = useRef()

  const _handleCapture = () => {
    viewRef.current.capture()
    .then(uri => {
      // Rest of the code
     })
  }

  return(
    <ViewShot ref={viewRef}>
   // Rest of the code
    </ViewShot>
  )

}

`

answered Aug 30 '23 at 05:49

Aakash Rathee

523
3
17

Thanks for your comment, it turns out that it has been working all along but all I had to do was fix the style a bit, it always gave me a black image, but once I gave it a width and changed the background color to something else it gave me the image from the View I want. – Hassan Zahra Aug 30 '23 at 23:33

Using react-native-view-shot package in React Native how do I capture the View I want using useRef?

1 Answers1