Is there any way I can place the TabBar over my header - react-native

Question

I had an idea in my design but making it proved harder than I thought. The design is as follows:
The tabbar here is made with 'createMaterialTopTabNavigator'.
My idea was that the gradient part will be the header so it won't move when navigating from INFO to PHOTOS. I am able the screen the way it looks in the picture above except for the TopTabNavigator overlapping the header. It looks as follows:
I do understand why this is happening since the topTabNavigator is inside of the stackNavigator and thus the header will always be on top. The thing is that I want the gradient part to stay in place when swiping left or right through the topTabNavigator.
The profile Stack Screen:
const ProfileStackScreen = ({ navigation }) => {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={ProfileTabScreen} options={{
header: () => ( <ProfileHeader onPress={() => {navigation.openDrawer()}} />)
}} />
</ProfileStack.Navigator>
);
};
The header:
const ProfileHeader = (props) => {
return (
<LinearGradient colors={[color1, color2]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={{
width: '100%,
alignItems: 'center',
paddingVertical: 50,
}}>
<View style={{width: '100%}}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 20,
width: '100%',
}}>
<TouchableOpacity><Icon /></TouchableOpacity>
<TouchableOpacity><Text>Edit profile</Text></TouchableOpacity>
</View>
</View>
<Image style={{height: 115, width: 115, borderRadius: 100}} source={require('../path/img.jpg')} />
</LinearGradient>
);
}