Coder Social home page Coder Social logo

Comments (2)

staskochkin avatar staskochkin commented on June 22, 2024

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;

from react-native-appodeal.

staskochkin avatar staskochkin commented on June 22, 2024

Closed due to inactivity

from react-native-appodeal.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.