react-native-admob icon indicating copy to clipboard operation
react-native-admob copied to clipboard

There is no ad when Modal is open!!!!

Open furkancelik opened this issue 6 years ago • 5 comments

Hi, react native does not show ads when modal is turned on..

import { TouchableOpacity, Modal, Text, View } from "react-native";
import Icon from "react-native-vector-icons/Entypo";
import styles from "../Thema/styles";
import { AdMobRewarded} from "react-native-admob";

export default class Shoping extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    AdMobRewarded.setTestDevices([AdMobRewarded.simulatorId]);
    AdMobRewarded.setAdUnitID("ca-app-pub-XXXXXXX/XXXXXX");

    AdMobRewarded.addEventListener("rewarded", reward =>
      console.log("AdMobRewarded => rewarded", reward)
    );
    AdMobRewarded.addEventListener("adLoaded", () =>
      console.log("AdMobRewarded => adLoaded")
    );
    AdMobRewarded.addEventListener("adFailedToLoad", error =>
      console.warn(error)
    );
    AdMobRewarded.addEventListener("adOpened", () =>
      console.log("AdMobRewarded => adOpened")
    );
    AdMobRewarded.addEventListener("videoStarted", () =>
      console.log("AdMobRewarded => videoStarted")
    );
    AdMobRewarded.addEventListener("adClosed", () => {
      console.log("AdMobRewarded => adClosed");
      AdMobRewarded.requestAd().catch(error => console.warn(error));
    });
    AdMobRewarded.addEventListener("adLeftApplication", () =>
      console.log("AdMobRewarded => adLeftApplication")
    );

    AdMobRewarded.requestAd().catch(error => console.warn(error));
  }

  componentWillUnmount() {
    AdMobRewarded.removeAllListeners();
  }

  showRewarded() {
    AdMobRewarded.showAd().catch(error => console.warn(">", error));
  }

  render() {
    return (<Modal
         animationType="fade"
         transparent={true}
         visible={this.props.shoppingModal}
       >
        <View style={styles.modal}>
          <View
            style={{
              backgroundColor: "#FFF",
              flex: 1,
              borderColor: "#d9d9d9",
              borderRadius: 5,
              flexDirection: "column"
            }}
          >
            <View style={{ flex: 0, flexDirection: "row" }}>
              <View
                style={{
                  flex: 1,
                  alignItems: "center",
                  paddingLeft: 30,
                  paddingTop: 10
                }}
              >
                <Text style={styles.modalTitle}>MAĞAZA</Text>
              </View>

              <View style={{ flex: 0 }}>
                <TouchableOpacity
                  onPress={() => {
                    this.props.close();
                  }}
                  style={styles.redButton}
                >
                  <Icon name={"cross"} size={25} color={"#bd2130"} />
                </TouchableOpacity>
              </View>
            </View>
            <View style={{ padding: 5 }}>
              <View style={{ marginBottom: 5, flexDirection: "row" }}>
                <View style={{ flex: 0 }}>
                  <TouchableOpacity
                    onPress={() => {
                      this.showRewarded();
                    }}
                    style={[styles.mainButton, { margin: 0 }]}
                  >
                    <Icon
                      name={"controller-play"}
                      size={40}
                      color={"#fec745"}
                    
                    />
                  </TouchableOpacity>
                </View>
                <View
                  style={styles.button}
                >
                  <Text>+50 Altın kazanmak için Hemen Video İzleyin!</Text>
                </View>
              </View>
              <View style={{ padding: 5 }}>
                <Text style={{ paddingBottom: 5, fontWeight: "bold" }}>
                  Altın kazanmak için video izlemeniz gerekmektedir.
                </Text>
                <Text>
                  Oyun oynayarak yada video izleyerek altın kazanabilirsiniz.
                  Kazandığınız altınlar ile harf ipucu alabilirsiniz yada
                  takıldığınız kelimeyi geçebilirsiniz.
                </Text>
              </View>
            </View>
          </View>
        </View>
</Modal>
    );
  }
}

Touchable opacity click. dont show Rewarded. what could be the cause of the problem?

furkancelik avatar Apr 07 '18 15:04 furkancelik

The same problem we encountered. Any updates?

nguyen2404 avatar Sep 06 '18 13:09 nguyen2404

Did you find any workaround?

nfacha avatar Sep 24 '18 14:09 nfacha

Any updates on this issue ?

hazeeb avatar Nov 23 '18 18:11 hazeeb

I think the rendering of ads are in conflict when a modal is open, you should hide the modal first before showing the ad.

vincegnzls avatar Feb 22 '19 09:02 vincegnzls

Indeed this is the issue. Closing Modal solves my issue.

remithomas avatar Aug 26 '20 23:08 remithomas