Saturday, September 24, 2022
HomeiOS Developmentandroid - The right way to preview video from react-native-image-picker in react...

android – The right way to preview video from react-native-image-picker in react native cli


I am engaged on a react native CLI, pure JavaScript eCommerce cell software that requires customers to add a brief video of 30 seconds. The design is that you just add and preview the video earlier than sending it to the API.

What’s the finest bundle to make use of for this?

I am utilizing react-native-image-picker to select each the video and the picture. I could not preview movies utilizing react-native-video nor was I capable of preview them utilizing react-native-webview I might solely preview photographs utilizing react native Picture element.

Under is the code

The operate that uploads the video utilizing react-native-image-picker

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

The code that previews the video is like this;

import Video from 'react-native-video';

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

The place the video.videoUrl is the Picture Picker uri to the native file on the system

I additionally tried

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

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

I have never bought any luck!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments