Visualize video inside the viewer

[Gabogg07]

trafficstars

I am trying to display images and videos inside the viewer, but can't figure out how to add the videos. I don't mind if they show at the end, but they been part of the numeric count, and the swipe motion is required.

Thanks

[jamesawer3]

Any updates regarding this

[Gabogg07]

@jamesawer3 i couldn't manage to do it with this library, I had to use an slider component and adapt it for the different media types

[pashanaumov]

@Gabogg07 , could be too late, but worth asking. What are you using to display the video? I am using a react-native-video component inside the renderImage function. Wrapping video inside a <View> with flex: 1 does the job for me

[gerryfletch]

@pavelnaumov Are you able to share more specifically what you used to get video to work? Perhaps it's due to a difference in version, but there are some weird styles on the parent container such that flex: 1 on a view in renderImage does not have a set width and height. I haven't looked too much into this library code, but my understanding is that it's likely using the Image API to fix the width + height of the parent container.

[gerryfletch]

For anyone interested, I can confirm that the width + height given to the parent container is proportional to the image size. You can provide the image size if you know it beforehand with the image and width parameters fields of your imageUrls array. Since I did not have an aspect ratio or specific width/height for my videos, I used the dimensions of the window. These are the general steps I took:

• Store the correct width + height for a given image
• Store Dimensions.get('window').width/height for a given video
• Store the index of the content as part of the 'image props':

const urls = content.map((c, index) => {
  // check image/video
  return { url, width, height, props: {index} };
});

• Disable image preload with the prop enablePreload={false}
• Retrieve data by index, rather than using the props supplied by renderImage:

const content; // Content[]
...
<ImageViewer
  renderImage={image => {
    const contentToRender: Content = content[image.props];
  }}
/>

• Wrap images and videos in <View style={{flex: 1}}/>
• Disable video control props - the gesture handling is nested between the controls and react-native-image-viewer so while click events work fine, dragging the seek bar/scrubbing also moves the gallery.
• Had to provide resizeMode="contain" using react-native-video for the correct sizing on Android

[Anzormumladze]

const urls = content.map((c, index) => {
  // check image/video
  return { url, width, height, props: {index} };
});

can you provide code?