Video cannot have any subviews

#1

I want to render a fullscreen video playback with custom buttons overlayed on top of the video playback (for example a tick mark/cross/circle which I want to render using the TouchableOpacity). I can’t seem to add any sub components to the Video component. Here is an example code:


renderVideoPreview() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'transparent'
        }}
      >
        <Video
          source={{ uri: this.state.tempRecording }}
          rate={1.0}
          volume={1.0}
          muted={true}
          resizeMode="cover"
          shouldPlay
          isLooping
          style={{ flex: 1 }}
        >
          <View style={{
            backgroundColor: 'transparent'
          }}>
            <TouchableOpacity style={styles.circle}>

            </TouchableOpacity>
          </View>
        </Video>
      </View>
    );
  }

I have tried to put the components outside of the Video component but that didn’t achieve what I wanted it to. Here is the code:

renderVideoPreview() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'transparent'
        }}
      >
        <Video
          source={{ uri: this.state.tempRecording }}
          rate={1.0}
          volume={1.0}
          muted={true}
          resizeMode="cover"
          shouldPlay
          isLooping
          style={{ flex: 1 }}
        />
        <View style={{
          backgroundColor: 'transparent'
        }}>
          <TouchableOpacity style={styles.circle}>

          </TouchableOpacity>
        </View>
      </View>
    );
  }

The code resulted in the below output. it whitened out the whole View component even though i specified the backgroundColor: 'transparent’

Any help would be appreciated :joy:

1 Like

#2

Try making the background color of the touchable opacity to ‘transparent’, not the View. That worked for me while using react-native-easy-grid which just wraps View’s.

Also, my resizeMode was set to “contain”.

Hope this helps.

0 Likes

#3

hey! the view might be transparent but maybe the video isn’t rendering anything, and as a result you’re seeing the white background color of the app. have you tested that the video works by itself?

Side note: there’s a really useful customizable video player component made by expo that you can use: https://github.com/expo/videoplayer. If anything, you can at least check out the source code and see how the video player was implemented.

0 Likes