Banner Reuse

Reuse the same banner placement

Plugin allows you to reuse the same banner placement in various screens. However, you might want to reuse the same placement within one screen, for example when using tab view. In that case you can use visible property to determine which banner should be visible as two or more banners cannot be visible at once in the same screen. For sub-tabs scenario, you should detect which tab is active and set the proper value for visible property. Please see the example below how you might handle it.

let store = createStore(combineReducers({ 
    homeScreenBannerVisible: determineHomeBannerVisible,
    settingsScreenBannerVisible: determineSettingsBannerVisible,
}));

function determineHomeBannerVisible(state, action) {
    if (typeof state === 'undefined') {
        return true;
    }

    switch (action.type) {
        case 'HOME':
          return true;
        case 'SETTINGS':
          return false;
        default:
          return true;
      }
}

function determineSettingsBannerVisible(state, action) {
    if (typeof state === 'undefined') {
        return true;
    }

    switch (action.type) {
        case 'HOME':
          return false;
        case 'SETTINGS':
          return true;
        default:
          return true;
      }
}

let HomeScreenContainer = connect(state => ({ bannerVisible: state.homeScreenBannerVisible }))(HomeScreen);
let SettingsScreenContainer = connect(state => ({ bannerVisible: state.settingsScreenBannerVisible }))(SettingsScreen);

function HomeScreen({ bannerVisible }) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home screen</Text>
        <RNAatkitBanner
                name="BannerOne"
                size={RNAatkit.PlacementSize_Banner320x53}
                autoreload={true}
                visible={bannerVisible} />
      </View>
    );
}

function SettingsScreen({ bannerVisible }) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings screen</Text>
        <RNAatkitBanner
                name="BannerOne"
                size={RNAatkit.PlacementSize_Banner320x53}
                autoreload={true}
                visible={bannerVisible} />
      </View>
    );
}

export default function App() {
    return (
        <Provider store={store}>
            <NavigationContainer>
                <Tab.Navigator>
                    <Tab.Screen 
                        name="Home" 
                        component={HomeScreenContainer}
                        listeners={{
                            tabPress: e => {
                                store.dispatch({ type: 'HOME' });
                            }
                        }}
                    />
                    <Tab.Screen 
                        name="Settings" 
                        component={SettingsScreenContainer}
                        listeners={{
                            tabPress: e => {
                                store.dispatch({ type: 'SETTINGS' });
                            }
                        }}
                    />
                </Tab.Navigator>
            </NavigationContainer>
        </Provider>
    );
}