How to preview video from react-native-image-picker in react native cli

Question

I'm working on a react native CLI, pure JavaScript eCommerce mobile application that requires users to upload a short video of 30 seconds. The design is that you upload and preview the video before sending it to the API.

What is the best package to use for this?

I'm using react-native-image-picker to pick both the video and the image. I couldn't preview videos using react-native-video nor was I able to preview them using react-native-webview I could only preview images using react native Image component.

Below is the code

The function that uploads the video using react-native-image-picker

const onUploadVideo = async() => {
    try {
      const fileManager = await launchImageLibrary({
        mediaType: 'video',
        presentationStyle: 'popover',
        quality: 1,
      });
      let assets = fileManager.assets;
      setImages({...assets[0]});
    } catch (e) {
      console.log('On Edit Image Error', e);
    }
 };

The code that previews the video is like this;

import Video from 'react-native-video';

<Video source={{ uri: video.videoUrl }} />

Where the video.videoUrl is the Image Picker uri to the local file on the device

I also tried

import { WebView } from 'react-native-webview';

<WebView
  javaScriptEnabled={true}
  source={{ uri: 'https://youtu.be/nfiwGGn_kC0' }}
  style={styles.container}
  onHttpError={error => {
    console.log(error);
  }}
/>

I haven't got any luck!