A View is partially hidden after wrapped by TouchableOpacity

I'm making a tabNavigator with a tabScreen like this:

<Tab.Screen
  name="ListingEdit"
  component={ListingEditScreen}
  options={({navigation}) => ({
    tabBarButton: () => (
      <NewListButton
        onPress={() => navigation.navigate('ListingEdit')}></NewListButton>
    ),
    tabBarIcon: ({size, color}) => (
      <MaterialCommunityIcons
        name="plus-circle"
        size={size}
        color={color}></MaterialCommunityIcons>
    ),
  })}
/>

and NewListButton component:

<View style={styles.container}>
  <MaterialCommunityIcons name="plus-circle" color={colors.white} size={25} />
</View>

Everything looks good, but after wrapping NewListButton with a TouchableOpacity

<TouchableOpacity onPress={onPress}>
  <View style={styles.container}>
    <MaterialCommunityIcons name="plus-circle" color={colors.white} size={25} />
  </View>
</TouchableOpacity>

the NewListButton component is partially hidden like this

I tried adding the zIndex but it didn't work. Is there anyone had the same problem before, I hope your help, thanks so much !

My container style:
    const styles = StyleSheet.create({
    container: {
        backgroundColor: colors.primary,
        borderRadius: 35,
        height: 70,
        width: 70,
        bottom: 30,
        borderColor: colors.white,
        borderWidth: 10,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

Have you tried to put the TouchableOpacity inside the View?

    <View style={styles.container}>
            <TouchableOpacity onPress={onPress}>
                    <MaterialCommunityIcons name="plus-circle" color={colors.white}
                            size={25}></MaterialCommunityIcons>
            </TouchableOpacity>
        </View>

or try to add the {styles.container} to TouchableOpacity