Displaying Ads on certain screen only (React Native & Navigation) - reactjs

Question

Im new to react native and navigation and wanna ask about how to show ads only at certain screen? For example i only want to show the ad on ScreenOne but not on ScreenTwo or ScreenThree and so on.
Right now im using react-native-admob to show the ads and write the code on the App.js
My code is Something like this:
import React, { Component } from 'react';
import {
View
} from 'react-native';
import { AdMobBanner } from 'react-native-admob';
import { createStackNavigator } from 'react-navigation';
import LoginScreen from './screens/LoginScreen';
import StrataScreen from './screens/StrataScreen';
import DrawerNavigator from './screens/DrawerNavigator';
class App extends Component {
render() {
return (
<View style={{ height: '100%', width: '100%' }}>
<AppStackNavigator />
<AdMobBanner
adSize='smartBannerLandscape'
adUnitID='ca-app-pub-3940256099942544/2934735716'
/>
</View>
);
}
}
const AppStackNavigator = createStackNavigator(
{
Login: LoginScreen,
Strata: StrataScreen,
Drawer: {
screen: DrawerNavigator,
navigationOptions: {
header: null
}
}
},
{
initialRouteName: 'Login',
navigationOptions: {
gestureEnabled: false
}
}
);
export default App;

Answer 1

You should take a look at High Order Components, write a component that returns the component itself, plus the adMobBanner, then use return the screen you want wrapped inside this HOC.
https://reactjs.org/docs/higher-order-components.html
Ok, lets suppose you want the ad on your login screen, you can import your HOC on app.js, and do
const AppStackNavigator = createStackNavigator(
{
Login: withAd(LoginScreen),
Strata: StrataScreen,
Drawer: {
screen: DrawerNavigator,
navigationOptions: {
header: null
}
}
},
{
initialRouteName: 'Login',
navigationOptions: {
gestureEnabled: false
}
}
);
where withAd is the HOC you created and imported here, or you can change you LoginComponent, on the file itself to return withAd(LoginComponent) and just keep using the way you are, the decision you have the make is if, you gonna need that screen with ad on every moment, or just with this navigator.
Edit: To have the same ad on all screens, I would recommend you to use some state store, either redux, mobx or even React New Context API to store if the screen should render the ad, where you can wrap you adBanner to a component, and put some logic to check if should render the ad, where when you change to a screen you should or should not show, you dispatch an action to change that variable, and the adBanner will re-render accordingly.