Search code examples
reactjsreact-nativereact-native-iosreact-native-video

Video not covering the whole screen


I want my video to cover the entire screen but it seems to cover only half of the screen as follows enter image description here

I have styled the video component as follows:

 <Video
                source={{uri: this.state.video}}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  alignItems: 'stretch',
                  bottom: 0,
                  right: 0,
                  height: Dimensions.get('window').width,
                }}
                resizeMode="cover"
                repeat={true}
              />

Could anyone tell me how to achieve this behavior and where am I going wrong? Any help would be useful.


Solution

  • Somehow giving a height has solved the mentioned issue like follows:

      <Video
                    source={{uri: this.state.video}}
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      alignItems: 'stretch',
                      bottom: 0,
                      right: 0,
                      height: "90%",
                    }}
                    resizeMode="cover"
                    repeat={true}
              
                  />