How Can I touch overflow Middle Button on bottomTab navigation? - react-native

Question

I want to Make TabNavigation Using react-navigation.
like that picture.
Here is picture my App. I want to Touch that 'red-section' But it is now work now
I want to active that section. Please tell me how can i do...
Middle Button is more bigger than others
this is my App.js Code. And I made AddButton Component.
const AppContainer = createStackNavigator(
{
default: createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <AntDesign name="home" size={35} color={tintColor} />
}
},
Post: {
screen: () => null,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<TouchableOpacity size={150}
activeOpacity={1}
style={{
width:75,
height:75,
justifyContent: 'center',
alignItems: 'center',
height:80,
marginBottom:80
}}
>
<AddButton/>
</TouchableOpacity>
),
},
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <MaterialIcons name="person-outline" size={35} color={tintColor} />
}
}
},
{
defaultNavigationOptions: {
tabBarOnPress: ({ navigation, defaultHandler }) => {
if (navigation.state.key === 'Post') {
navigation.navigate('postModal')
} else {
defaultHandler()
}
}
},
tabBarOptions: {
activeTintColor: '#5A2AB7',
inactiveTintColor: '#404040',
showLabel: false,
style: { height: 80 },
}
}
),
postModal: {
screen: PostScreen
}
},
{
mode: 'modal',
headerMode: 'none',
}
)
const AuthStack = createStackNavigator({
Login: LoginScreen,
Register: RegisterScreen
})
export default createAppContainer(
createSwitchNavigator(
{
Loading: LoadingScreen,
App: AppContainer,
Auth: AuthStack
},
{
initialRouteName: "Loading"
}
)
);
here is AddButton.js
import React from 'react'
import {View, StyleSheet, Text, TouchableHighlight, Animated} from 'react-native'
import {FontAwesome5} from '#expo/vector-icons'
export default class AddButton extends React.Component {
render() {
return (
<View style={styles.button} underlayColor='#875EC1'>
<FontAwesome5 name="plus" size= {24} color="#FFF" />
</View>
)
}
}
const styles = StyleSheet.create({
button:{
backgroundColor:'#875EC1',
alignItems:'center',
justifyContent:'center',
width:72,
height:72,
borderRadius:36,
shadowColor:'#875EC1',
shadowRadius:5,
shadowOffset: {height:10},
shadowOpacity:0.3,
elevation:3
}
})