I have a problem. I researhed but I could not find anything.
I am trying to write an application in React Native. I am thinking of a bar with five bars in tab bar. The button in the middle is a little bit higher than the others. I do not know how to do this with reactnavigator. Let me Show you some attempts: Firstly my navigatör structure is like this:
<NavigationContainer >
<Tab.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: 'rgba(166,65,28,1)',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
height: 50
},
tabBarLabelStyle: {
color: '#fff',
fontFamily: 'Arial-Narrow'
}
}}
>
<Tab.Screen name="İlan Ara"
component={TestView4}
options={{
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarIcon: ({ color, size }) => (
<Image source={require('./assets/tab-bar-icons/search.png')} style={{ width: 19, height: 19 }} />
),
style: {
backgroundColor: 'red'
}
}}
>
</Tab.Screen>
<Tab.Screen name="İlan Ver"
component={TestView4}
options={{
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarIcon: ({ color, size }) => (
<Image source={require('./assets/tab-bar-icons/plus.png')} style={{ width: 19, height: 19 }} />
)
}}
>
</Tab.Screen>
<Tab.Screen name="İlanlarım"
component={TestView4}
options={{
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarIcon: ({ color, size }) => (
<View>
<Image source={require('./assets/tab-bar-icons/logo-bg.png')}
style={{
width: 40,
height: 40
}}
/>
</View>
),
tabBarStyle: {
backgroundColor: 'blue',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
paddingTop: 10
},
}}
>
</Tab.Screen>
<Tab.Screen name="Mesajlar"
component={TestView4}
options={{
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarIcon: ({ color, size }) => (
<Image source={require('./assets/tab-bar-icons/send.png')} style={{ width: 19, height: 19 }} />
)
}}
>
</Tab.Screen>
<Tab.Screen
name="Profil"
options={{
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarIcon: ({ color, size }) => (
<Image source={require('./assets/tab-bar-icons/profile.png')} style={{ width: 19, height: 19 }} />
),
style: {
backgroundColor: 'rgba(255,255,255,1)'
}
}}
>
{() => (
<ProfileStack.Navigator>
<ProfileStack.Screen
name="AuthIndex"
component={AuthIndex}
options={{
headerShown: false,
tabBarHideOnKeyboard: true
}}
screenOptions={{ animationEnabled: false, headerShown: false }}
/>
<ProfileStack.Screen
name="Profile"
component={Profile}
options={{
headerShown: false,
tabBarHideOnKeyboard: true
}}
/>
<ProfileStack.Screen
name="Login"
component={Login}
options={{
headerShown: false,
tabBarHideOnKeyboard: true
}}
/>
<ProfileStack.Screen
name="Register"
component={Register}
options={{
headerShown: false,
tabBarHideOnKeyboard: true
}}
/>
<ProfileStack.Screen
name="ForgotPassword"
component={ForgotPassword}
options={{
headerShown: false,
tabBarHideOnKeyboard: true
}}
/>
<ProfileStack.Screen
name="ProfileEdit"
component={ProfileEdit}
options={{
headerShown: false,
tabBarHideOnKeyboard: true
}}
/>
<ProfileStack.Screen
name="Cars"
component={Cars}
options={{
title: 'Araçlarım',
headerStyle: {
backgroundColor: '#FFF',
},
headerTintColor: '#5e5e5e',
}}
/>
</ProfileStack.Navigator>
)}
</Tab.Screen>
</Tab.Navigator>
</NavigationContainer >
There is the “moy posts” menü in the middle of the five-menu navigatör.I gave view to it in order to have the menü aliitle higher and ı changed the position value as absolute and gave the top value nagative. So that it stayed higher than the others. this my tab bar please click
This editing made the menü to positiıon higher than the others. However the problem is this: this higher menü comes over the design and becaues the tab bar doesn’t come down at all, the buton comes over the upper “kaydet” button.
If I try tor ise the margin Top value of the middle menü, this happens. this image please click
Even I do marginBottom nothing changes What I want is, a way to keep the middle menü from overlapping with the “kaydet” button above.