AppodealBanner doesn't shows a banner in different screens.

[ilya-bmi]

I need to show a banner in multiple places in my app. But as far as a banner displayed at one place it will not shows on another, even on different screens. I've tried: Appodeal.hide(AppodealAdType.BANNER); and destroy the component.

without success. Do you have any solution around it?

[staskochkin]

Hello @ilya-bmi We added some fixes for banner view behaviour in the latest release (v2.10.3). Also I would like to recommend you use AppodealBanner Integration sample with react-navigation

/* eslint-disable react-native/no-inline-styles */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */

import React from 'react';
import {
  Appodeal,
  AppodealAdType,
  AppodealBanner,
  AppodealLogLevel,
} from 'react-native-appodeal';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Button, Text, View} from 'react-native';
import {Switch} from 'react-native-gesture-handler';

Appodeal.setTesting(true);
Appodeal.setLogLevel(AppodealLogLevel.VERBOSE);
Appodeal.initialize(
  'fee50c333ff3825fd6ad6d38cff78154de3025546d47a84f',
  AppodealAdType.BANNER,
  false,
);

type RootStackParamList = {
  Home: undefined;
  Details: undefined;
};

type Props = StackNavigationProp<RootStackParamList>;

const Banner = () => {
  return (
    <AppodealBanner
      style={{
        height: 50,
        width: '100%',
        backgroundColor: 'clear',
        alignContent: 'stretch',
      }}
      adSize="phone"
      usesSmartSizing
    />
  );
};

const Spacer = () => <View style={{flex: 1}} />;

const Home = () => {
  const navigation = useNavigation<Props>();

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Button
        title="Go to detail"
        onPress={() => navigation.navigate('Details')}
      />
      <Spacer />
      <Banner />
    </View>
  );
};

const Details = () => {
  const navigation = useNavigation<Props>();
  const [isBannerVisible, setBannerVisible] = React.useState(false);

  React.useEffect(() => {
    const updateBannerVisibility = () => setBannerVisible(true);
    navigation.addListener('transitionEnd', updateBannerVisibility);
    return () => {
      navigation.removeListener('transitionEnd', updateBannerVisibility);
    };
  }, [navigation]);

  return (
    <View
      // eslint-disable-next-line react-native/no-inline-styles
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Details</Text>
      <Spacer />
      {isBannerVisible ? <Banner /> : null}
    </View>
  );
};

const App = () => {
  const Stack = createStackNavigator<RootStackParamList>();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

[staskochkin]

Closed due to inactivity