React-native EXPO: capturing a view with a video

136 Views Asked by At

i am developing an app with react-native and expo.

in my app users have the possibility to post photos and videos, and if they want they can then share them on other social networks.

When they want to share on social networks I add a sort of watermark at the bottom right of the type "socialname.com/username"

to do this with photos I use react-native-view-shot, create a view with the photo, put the text I want in the bottom right corner, and capture the view to share, so far so good!

the problem comes with videos, react-native-view-shot doesn't support capture for videos, so when user try to share, it appears as a black image, with the text in the bottom right corner, this is my code:

view:

<View
          style={{
            height: '100%',
            width: '100%',
            backgroundColor: 'black',
            zIndex: -900,
          }}
          ref={viewRef}
        >
        {post.type === 'video' ? (
          <Video
            
            source={{ uri: post.url }}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            shouldPlay
            isLooping
            style={{ width: '100%', height: '100%' }}
          />
        ) : (
        <Image
            source={{
              uri: 'post.url',
            }}
            style={{ width: '100%', height: '100%' }}
          /> 
        )}
          <Text
            style={{
              position: 'absolute',
              bottom: 10,
              right: 10,
              color: 'white',
              fontSize: 20,
            }}
          >
            SocialName.com/username
          </Text>
        </View>

then the share function:

 const share = async () => {
    //shot the view
    const viewShot = await captureRef(viewRef, {
      format: 'png',
      quality: 0.8,
    })

    await Share.share({
      url: viewShot,
    })
  }

How can i capture the video in order to add the "watermark"?

0

There are 0 best solutions below