How to create tabBarComponent with top borderRadius without white space in the background ?

### Version
- "react-native-router-flux": "4.2.0-beta.1"
- "react-native": "0.63.3"
- "react": "16.13.1"

How to create tabBarComponent with top borderRadius that not push the scene up ?

My goal, in the end, is to create tabBarComponent with a rounded radius, but I get in the rounded area white color background, and I need to see the scene view in the background.

` `

import React, { useState } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import _ from 'lodash';

const Main = ({ }) => {
return (



);
};
const styles = StyleSheet.create({

});

export default Main;

import React, { useState } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import _ from 'lodash';


const BottomNavigation = ({ navigation }) => {

return (


);
};
const styles = StyleSheet.create({
bottomNavigationContainer: {
height: 79,
backgroundColor: 'green',
flexDirection: 'row',
justifyContent: 'space-around',
paddingTop: 12,
borderRadius: 20,
}
});

export default BottomNavigation;