Adding custom content before tabs

[kabaljit]

Is there a way to add custom content before tabs?

What have you tried

I thought of replacing the current TabBar with a new custom component where I can add the customize content before adding TabBar. But now I stuck because I don't if there is a way to change the tabBar from a screen.

Screenshots (if applicable)

Your Environment

software	version
ios or android
react-native	0.61.2
react-native-tab-view	2.13.0
react-native-gesture-handler
react-navigation	4.3.6
node
npm or yarn

[d41z]

hi @kabaljit could you solve this?

[ChintanRajpara]

you can use this prop

renderTabBar={(tabBarProps) => (
<View
style={{
height: vertical_48,
flexDirection: "row",
width,
}}
>
<View
style={{
height: vertical_48,
aspectRatio: 1,
backgroundColor: "red",
}}
>
<TabBar
layout={{ height: vertical_48, width: width - vertical_48 }}
renderIcon={({}) => {}}
scrollEnabled
{...tabBarProps}

        style={{
          height: vertical_48,
          width: width - vertical_48,
          backgroundColor: "#000",
          justifyContent: "center",
        }}
   
      />
    </View>
  )}

it worked for me perfectly

[bobostaykov]

You can place the TabBar inside a View with a flex of 1. Then you can place any content you like wherever you like, e.g. above the TabBar.