CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Manish
Manish

Reputation: 962

How to place element over Bottom Tabs Navigator in React Native

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:

enter image description here

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.

Upvotes: 2

Views: 1352

Answers (1)

AbdelHafid Mahmoudi
AbdelHafid Mahmoudi

Reputation: 11

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>

Upvotes: 1

Related Questions