tabBarButton style not applying react-nav-6 - react-native

Question

I would like to change the styling of a main button. Although this code is not working. I would like the styling to not be affected by the nav bar height. Here is code
const CircleButton = ({ children, onPress }) => (
<TouchableOpacity onPress={onPress} style={{
top: -30,
justifyContent: 'center',
alignItems: 'center',
...style.shadow
}}>
<View style={{
width: 70,
height: 70,
borderRadius: 35,
backgroundColor: 'yellow',
}}>
{children}
</View>
</TouchableOpacity>
)
<bTabs.Navigator
screenOptions={{ tabBarLabel: false, }}
barStyle={{
position: 'absolute',
bottom: 25,
left: 20,
right: 20,
elevation: 0,
backgroundColor: theme.nav.backgroundColor,
borderRadius: 10,
height: 50,
...style.shadow
}}
>
<bTabs.Screen name="Create" component={CreateContent} options=
{{
tabBarIcon: ({ focused }) => (
<View>
<Icon name='plus' size={25} color={focused ? theme.mainColor : theme.secondaryBGColor} />
</View>
),
tabBarButton: (...props) => <CircleButton {...props} onPress={() => console.log('t')} />,
}}
/>
Also note i have tried using tabBarButton: (...props) => (<CircleButton {...props} onPress={() => console.log('t')} />), and with {}
Please ignore syntax. Thank you