Make Expo Video Circular

#1

I’m trying to make Expo Video circular by clipping the outer edges, what I did was wrap it in a view with a border radius however the video seems to go over the view and is still always rectangular, I even applied a borderRadius style to the video component and this radius showed however the video component was still dangling outside this radius.
How do I make this work please?

<View
      style={{
          height: 40,
          width: 40,
          borderRadius: 20,
          borderWidth: 1.5,
          borderStyle: 'solid',
          borderColor: 'white',
           flex: 1,
           marginBottom: 15
        }}
  >
      <Video
          source={{ uri: like.picture.data.url }}
          isLooping
          resizeMode='cover'
          style={{
            height: 40,
            width: 40,
            borderRadius: 20
           }}
       />
  </View>
#2

hi, you need to use overflow: ‘hidden’ - eg: https://snack.expo.io/@notbrent/circular-video

#3

Thanks, it’s working only for IOS, Android is still rectangular.
Expo version 22.0.2, Android device software version: 4.4.2, model number: GT-N5110

#4

in the android simulator on snack it is rounded. perhaps this does not work on android 4.4 but it does on newer versions

closed #5

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.