React Native: VideoView android native module spilling out of the container - react-native

Question

Video view spilling to the previous view
I have a scrollview and inside the scrollview I have bunch of videos. I have created a native video module for android using VideoView class and following are code to resize the video.
public class CustomVideoLayout extends RelativeLayout {
private ThemedReactContext mThemedReactContext;
private RelativeLayout screenLayout;
private CustomVideoView videoView;
private ImageView imageView;
private ImageButton playPauseButton;
private ImageButton muteButton;
private boolean mMuted;
private boolean mRepeat;
private boolean mEnableControls;
private MediaPlayer mediaPlayer;
public CustomVideoLayout(#NonNull ThemedReactContext context, Activity activity) {
super(context);
mThemedReactContext = context;
screenLayout = (RelativeLayout) activity.getLayoutInflater().inflate(R.layout.layOutName, null);
this.addView(screenLayout);
imageView = findViewById(R.id.posterImage);
videoView = findViewById(R.id.customVideoView);
videoView.setOnPreparedListener(preparedListener);
videoView.setOnTouchListener(videoViewOnTouchListener);
videoView.setOnCompletionListener(videoOnCompleteHandler);
playPauseButton = findViewById(R.id.pause_play_button);
playPauseButton.setOnClickListener(onClickListener);
muteButton = findViewById(R.id.volume_button);
muteButton.setOnClickListener(onClickListener);
}
// ......
}
If i'm not resizing the height, the video is not spilling up and also its changing it's original aspect ratio. But in order to maintain the original aspect ratio i must recalculate the height and width. And when the height is exceeding the container's height, its spilling a portion of the video on the previous VideoView.
Note: The top video is not spilling at all when put on top.
Following is the Layout file.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:id="#+id/video_wrapper">
<com.videoplayer.CustomVideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:id="#+id/customVideoView"/>
<ImageView
android:id="#+id/posterImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bg_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageButton
android:id="#+id/pause_play_button"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/pause"
android:scaleType="fitXY"
android:tag="#drawable/pause"
android:visibility="invisible"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right">
<ImageButton
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/volume_button"
android:background="#drawable/volume"
android:scaleType="fitXY"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:tag="#drawable/volume"
android:visibility="invisible"/>
</RelativeLayout>
</FrameLayout>