React-native-admob: There is no ad when Modal is open!!!!

Created on 7 Apr 2018 · 5Comments · Source: sbugert/react-native-admob

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

```import React, { Component } from "react";
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 ( animationType="fade"
transparent={true}
visible={this.props.shoppingModal}
>
style={{
backgroundColor: "#FFF",
flex: 1,
borderColor: "#d9d9d9",
borderRadius: 5,
flexDirection: "column"
}}
>
style={{
flex: 1,
alignItems: "center",
paddingLeft: 30,
paddingTop: 10
}}
>

          <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>

);
}
}
```

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

Source