Fullscreen mode doesn't make the video fullscreen

[ddudek]

I'm trying to get the controls to work on a small video window among other views, and use the fullscreen button to make it fullscreen, also with the controls. However, the fullscreen button doesn't work for me at all, it just seems to change the resizeMode (seems like from 'contain' to 'cover'), but the video size stays the same (small).

My layout starts with a Carousel

import Carousel, { Pagination } from 'react-native-snap-carousel'
...
<View>
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.props.entries}
          renderItem={this._renderItem}
          sliderWidth={sliderWidth}
          layoutCardOffset={10}
          layout='default'
          itemWidth={itemWidth}
          style={{ }}
          onSnapToItem={(index) => this.setState({ activePage: index })}
        />
        <Pagination
          dotsLength={this.props.entries.length}
          activeDotIndex={this.state.activePage}
          containerStyle={{ 
            backgroundColor: 'rgba(0, 0, 0, 0.0)',
            paddingVertical: 10,
          }}
          dotContainerStyle={{
            marginHorizontal: 0
          }}
          dotStyle={{
              width: 6,
              height: 6,
              borderRadius: 5,
              marginHorizontal: 8,
              backgroundColor: '#00a0aa'
          }}
          inactiveDotStyle={{
            backgroundColor: '#010101'
          }}
          inactiveDotOpacity={0.2}
          inactiveDotScale={1.0}
          carouselRef={this._carousel}
        />
      </View>

then items are rendered like this:

  _renderItem ({item, index}) {
    return (
      <MyCard entry={item as object}/>
    )
  }

MyCard layout is as follows:

<View style={mergedStyle}>
        <VideoPlayer style={styles.videoPlayer}
          source={{uri: "https://example.com/somevideourl.mp4"}}
          ref={(ref) => {
            this.player = ref
          }} 
          paused={true}
          playInBackground={false}
          // resizeMode="cover" 
          navigator={ this.props.navigator }
          repeat={false} 
          disableBack={true}
          key="testing123"
          audioOnly={false}
          >
        </VideoPlayer>
        <View style={styles.textContent}>
          <Text style={styles.textContentLabel}>
            {this.props.entry.description}
          </Text>
        </View>
        
      </View>

const styles = StyleSheet.create({
  videoPlayer: {
    flex: 1,
    height: 180,
    borderRadius: 5,
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5
  },
  textContent: {
    width: targetWidth,
    backgroundColor: "#ffffff"
  },
  textContentLabel: {
    fontFamily: "OpenSans",
    fontSize: 13,
    fontWeight: "300",
    fontStyle: "normal",
    letterSpacing: 0,
    color: "#010101",
    marginTop: 16,
    marginBottom: 16,
    marginLeft: 25,
    marginRight: 25
  }

});

Tested on Android and iOS. Using: react native 0.56.0, react-native-video: 3.0.0, react-native-video-controls: 2.2.3

1. How the views should be arranged to get the fullscreen button work, or is there a bug?
2. Is there any workaround? e.g. can I customize the button handler and implement my own going fullscreen feature?

[kylemilloy]

#107