🌍 New logo and final name: Astrale, also AdMob implemented

App.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React from "react";
 import Main from "./src/Main";
-import {initialState, reducer, StateProvider} from "./src/contexts/Global";
-import i18n from 'i18n-js';
-import * as Localization from 'expo-localization';
+import { initialState, reducer, StateProvider } from "./src/contexts/Global";
+import i18n from "i18n-js";
+import * as Localization from "expo-localization";
 import Translations from "./src/translations";
+import { AdMobInterstitial, AdMobRewarded } from "expo-ads-admob";
 
 /**
  * Language
@@ -16,11 +17,11 @@ i18n.fallbacks = true;
  * @constructor
  */
 function App() {
-    return (
-        <StateProvider initialState={initialState} reducer={reducer}>
-            <Main/>
-        </StateProvider>
-    );
+  return (
+    <StateProvider initialState={initialState} reducer={reducer}>
+      <Main />
+    </StateProvider>
+  );
 }
 
 export default App;

README.md

@@ -1,5 +1,7 @@
 <p align="center">
-  <img src="https://i.imgur.com/cnTYXlE.png" width="250">
+  <img src="https://i.imgur.com/thLMLAq.png">
 </p>
 
-# Astraleh
+# Astrale
+
+React Native powered app about astrology.

babel.config.js

@@ -1,6 +1,6 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
   };
 };

src/Main.js

@@ -11,6 +11,7 @@ import InitialStackNavigation from "./navigation/InitialStackNavigation";
 import * as Font from "expo-font";
 import Storer from "./utils/Storer";
 import { SESSION_KEY } from "./constants/session";
+import { setTestDeviceIDAsync } from "expo-ads-admob";
 
 /**
  * @param images {string[]}
@@ -64,6 +65,8 @@ function Main() {
   React.useEffect(() => {
     (async () => {
       try {
+        __DEV__ && (await setTestDeviceIDAsync("EMULATOR"));
+
         const state = await Storer.get(PERSISTENCE_KEY);
         setInitialState(state);
 

src/screens/main/AstrologerQuestionScreen.js

@@ -22,6 +22,8 @@ import { useIsDark } from "../../hooks/useTheme";
 import { BlurView } from "expo-blur";
 import PlatformUtils from "../../utils/Platform";
 import Close from "../../components/navs/Close";
+import { AdMobBanner, AdMobInterstitial } from "expo-ads-admob";
+import Ads from "../../credentials/admob";
 
 /**
  * @param route
@@ -35,7 +37,17 @@ function AstrologerQuestionScreen({ route, navigation }) {
   const astrologist = route.params.astrologist;
   const isDark = useIsDark();
   const isAndroid = PlatformUtils.isAndroid;
-  const _handleProceed = () => {};
+  const _handleProceed = async () => {
+    try {
+      await AdMobInterstitial.setAdUnitID(Ads.astrologers);
+      await AdMobInterstitial.requestAdAsync();
+      await AdMobInterstitial.showAdAsync();
+    } catch {
+      //
+    } finally {
+      // @todo send data to an api and show info that message was sent
+    }
+  };
   return (
     <BlurView
       style={[StyleSheet.absoluteFill, { flex: 1 }]}
@@ -85,7 +97,10 @@ function AstrologerQuestionScreen({ route, navigation }) {
           </View>
           <Divider />
           <View>
-            <Text>@ADHERE</Text>
+            <AdMobBanner
+              adUnitID={Ads.astrologersBanner}
+              bannerSize="largeBanner"
+            />
           </View>
         </ScrollView>
       </TouchableWithoutFeedback>

src/screens/main/CompatibilityScreen.js

@@ -19,6 +19,8 @@ import ShowFromTop from "../../components/animations/ShowFromTop";
 import SpaceSky from "../../components/decorations/SpaceSky";
 import TextBold from "../../components/paper/TextBold";
 import MainNav from "../../components/navs/MainNav";
+import { AdMobInterstitial } from "expo-ads-admob";
+import Ads from "../../credentials/admob";
 
 /**
  * Progress bars from match
@@ -124,11 +126,27 @@ function CompatibilityScreen({ navigation }) {
   const { colors } = useTheme();
   const [scRef, setScRef] = React.useState();
   const [selectedSigns, setSelectedSigns] = React.useState([]);
-  const _handleSignPress = (sign) =>
+  const [compDetailsShow, setCompDetailsShow] = React.useState(false);
+  const _handleSignPress = (sign) => {
     setSelectedSigns((selectedSigns) => [...selectedSigns, sign]);
-  const _handleSignTopPress = () => setSelectedSigns([]);
+  };
+  const _handleSignTopPress = () =>
+    setSelectedSigns([]) || setCompDetailsShow(false);
   React.useEffect(() => {
-    selectedSigns.length === 2 && scRef.scrollTo({ y: 0 });
+    if (selectedSigns.length === 2) {
+      (async () => {
+        try {
+          await AdMobInterstitial.setAdUnitID(Ads.compatibility);
+          await AdMobInterstitial.requestAdAsync();
+          await AdMobInterstitial.showAdAsync();
+        } catch {
+          //
+        } finally {
+          setCompDetailsShow(true);
+          scRef.scrollTo({ y: 0 });
+        }
+      })();
+    }
   }, [selectedSigns]);
   return (
     <SafeAreaView style={{ flex: 1 }}>
@@ -195,7 +213,7 @@ function CompatibilityScreen({ navigation }) {
       <Divider />
       <ScrollView ref={(scrollRef) => setScRef(scrollRef)}>
         <View style={{ height: 20 }} />
-        {selectedSigns.length === 2 ? (
+        {compDetailsShow ? (
           <MatchContent />
         ) : (
           <SignsContent onPress={_handleSignPress} />

src/screens/main/LearnScreen.js

@@ -18,6 +18,8 @@ import Constellation from "../../svgs/backgrounds/Constellation";
 import { LinearGradient } from "expo-linear-gradient";
 import ConstellationSimple from "../../svgs/backgrounds/ConstellationSimple";
 import Leo from "../../svgs/Leo";
+import { AdMobInterstitial } from "expo-ads-admob";
+import Ads from "../../credentials/admob";
 
 const SubHeading = () => {
   const { colors } = useTheme();
@@ -42,6 +44,17 @@ const SubHeading = () => {
  */
 function LearnScreen({ navigation }) {
   const { colors } = useTheme();
+  const _handleViewLesson = async (lesson) => {
+    try {
+      await AdMobInterstitial.setAdUnitID(Ads.learn);
+      await AdMobInterstitial.requestAdAsync();
+      await AdMobInterstitial.showAdAsync();
+    } catch {
+      navigation.navigate(lesson, { key: 1 });
+    } finally {
+      navigation.navigate(lesson, { key: 1 });
+    }
+  };
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <SpaceSky />
@@ -99,7 +112,7 @@ function LearnScreen({ navigation }) {
                     colors: { primary: colors.backdrop, text: "#FFFFFF" },
                   }}
                   labelStyle={{ fontSize: 9, letterSpacing: 0 }}
-                  onPress={() => navigation.navigate("AboutZodiac", { key: 1 })}
+                  onPress={() => _handleViewLesson("AboutZodiac")}
                 >
                   {i18n.t("Watch an ad to unblock")}
                 </Button>
@@ -153,7 +166,7 @@ function LearnScreen({ navigation }) {
                     colors: { primary: colors.backdrop, text: "#FFFFFF" },
                   }}
                   labelStyle={{ fontSize: 9, letterSpacing: 0 }}
-                  onPress={() => navigation.navigate("TheSigns", { key: 1 })}
+                  onPress={() => _handleViewLesson("TheSigns")}
                 >
                   {i18n.t("Watch an ad to unblock")}
                 </Button>
@@ -197,7 +210,7 @@ function LearnScreen({ navigation }) {
                   style={{ borderRadius: 25, marginTop: 5 }}
                   theme={{ colors: { primary: colors.backdrop } }}
                   labelStyle={{ fontSize: 9, letterSpacing: 0 }}
-                  onPress={() => navigation.navigate("TheElements", { key: 1 })}
+                  onPress={() => _handleViewLesson("TheElements")}
                 >
                   {i18n.t("Watch an ad to unblock")}
                 </Button>

tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
     "allowSyntheticDefaultImports": true,
     "jsx": "react-native",
     "lib": ["dom", "esnext"],