How to place element over Bottom Tabs Navigator in React Native - reactjs

Question

I want to place Facebook ads to React native using react-native-fbads. I am using Bottom tab navigator in my application and I want the ad to be fixed floating over the bottom tab.
I can place the ad on every tab screen but I don't want to place the ad on every screen and instead, I want to place it just over the bottom tab so that it is visible on every tab user visits.
Something like this:
Code: TabNavigator.js
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
})}
tabBarOptions={{
activeTintColor: '#001B79',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home1" component={Home11} />
<Tab.Screen name="Home2" component={Home12} />
</Tab.Navigator>
I want to add <BannerAd /> so that it will work like I want it to be.

Answer 1

just try to use bottom-tab-navigator! regularly!
// ...
import { View, Text, TouchableOpacity } from 'react-native';
function MyTabBar({ state, descriptors, navigation }) {
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
// The `merge: true` option makes sure that the params inside the tab screen are preserved
navigation.navigate({ name: route.name, merge: true });
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
>
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
</View>
);
}
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
{...}
</Tab.Navigator>