2

I'm using react-native-video:

<View style={styles.videoView}>
     <Video 
         source={{ uri: strings.sourceUri+"posts/"+this.state.videoSrc }} 
         ref={(ref) => { this.player = ref }}           
         repeat={true}
         resizeMode="contain"                    
         style={styles.videoStyle}
     />
</View>

Styles

videoView: {
  justifyContent:'center', 
  alignItems: 'center', 
  flex: 1,
  flexDirection: 'column',
},
videoStyle: {
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
},

So I'm fetching a video from api. And I want to show it in my flatlist. But the video is either getting small if I use resizeMode="contain" or the size gets bigger if I used resizeMode="cover". How can I scale my video so that it fits in the view?

I'm using react-native-camera. What can I try next?

halfer
  • 19,824
  • 17
  • 99
  • 186
Shubham Bisht
  • 577
  • 2
  • 26
  • 51

1 Answers1

0

You can try the following setting: Giving the video a height relative to its parent view might help.

videoView: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
},
videoStyle: {
    alignSelf: 'center',
    height: '80%',
    resizeMode: 'contain'
    },

I did the same setting for an image view. I was having trouble scaling the logo so i did this. Hope it helps.

EDIT: since i can't reply to comments yet. Check this detailed article about using videos with react native. It has very detailed info. https://medium.com/quick-code/react-native-video-component-68262bcbc21f

Awais Saifi
  • 67
  • 1
  • 8