add expo example

ammarahm-ed · Jun 27, 2023 · 3bc9e2c · 3bc9e2c
1 parent daa4147
commit 3bc9e2c
Show file tree

Hide file tree

Showing 102 changed files with 27,564 additions and 42 deletions.
diff --git a/.npmignore b/.npmignore
@@ -9,5 +9,6 @@ docs/
 
 # Example
 example/
+example-expo/
 
 android/build
diff --git a/docs/docs/installation.mdx b/docs/docs/installation.mdx
@@ -41,14 +41,23 @@ Add your AdMob App IDs to `app.json` or `app.config.js`.
         "react-native-admob-native-ads",
         {
           "androidAppId":  "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy",
-          "iosAppId":  "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
+          "iosAppId":  "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy",
+          "facebookMediation": false
         }
       ]
     ]
   }
 }
 ```
 
+Run `expo prebuild` to setup android & ios folders for local development.
+
+:::caution
+
+Expo Go is not supported.
+
+:::
+
 ## Android Setup
 
 Add your AdMob App ID to `AndroidManifest.xml`, as described in the [Google Mobile Ads SDK documentation](https://developers.google.com/admob/android/quick-start#update_your_androidmanifestxml).

diff --git a/example-expo/.gitignore b/example-expo/.gitignore
@@ -0,0 +1,17 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
diff --git a/example-expo/App.js b/example-expo/App.js
@@ -0,0 +1,220 @@
+import React, {useEffect, useState} from 'react';
+import {
+  Image,
+  Platform,
+  SafeAreaView,
+  StatusBar,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {AdManager} from 'react-native-admob-native-ads';
+import {requestTrackingPermission} from 'react-native-tracking-transparency';
+import {AdView} from './src/AdView';
+import List from './src/List';
+import {routes} from './src/utils';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+const App = () => {
+  const [currentRoute, setCurrentRoute] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const init = async () => {
+      const trackingStatus = await requestTrackingPermission();
+
+      let trackingAuthorized = false;
+      if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+        trackingAuthorized = true;
+      }
+
+      await AdManager.setRequestConfiguration({
+        trackingAuthorized,
+      });
+
+      setLoading(false);
+    };
+
+    init();
+  }, []);
+
+  return (
+    <SafeAreaView
+      style={{
+        height: '100%',
+        width: '100%',
+        paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+        backgroundColor: 'white',
+      }}>
+      <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle="dark-content"
+      />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          height: 50,
+          paddingHorizontal: 6,
+          marginBottom: 10,
+          width: '100%',
+        }}>
+        {currentRoute && (
+          <TouchableOpacity
+            onPress={() => setCurrentRoute(null)}
+            activeOpacity={0.8}
+            style={{
+              width: 50,
+              alignItems: 'center',
+              height: 50,
+              justifyContent: 'center',
+              borderRadius: 100,
+            }}>
+            <Icon name="arrow-left" color="black" size={28} />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {!loading && !currentRoute && (
+        <View
+          style={{
+            alignItems: 'center',
+          }}>
+          <View
+            style={{
+              alignItems: 'center',
+              marginBottom: 50,
+            }}>
+            <Image
+              source={require('./images.jpg')}
+              style={{
+                width: 120,
+                height: 120,
+                marginBottom: 30,
+                borderRadius: 100,
+                backgroundColor: '#f0f0f0',
+              }}
+            />
+
+            <Text
+              style={{
+                fontSize: 18,
+                letterSpacing: 1,
+                textAlign: 'center',
+              }}>
+              Admob Native Advanced Ads {'\n'} for React Native
+            </Text>
+          </View>
+
+          <TouchableOpacity
+            onPress={() => setCurrentRoute(routes[0])}
+            activeOpacity={0.8}
+            style={{
+              backgroundColor: 'orange',
+              width: '90%',
+              alignItems: 'center',
+              height: 50,
+              justifyContent: 'center',
+              borderRadius: 5,
+              marginBottom: 5,
+            }}>
+            <Text
+              style={{
+                color: 'white',
+              }}>
+              Simple Banner Ad
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => setCurrentRoute(routes[1])}
+            activeOpacity={0.8}
+            style={{
+              backgroundColor: 'orange',
+              width: '90%',
+              alignItems: 'center',
+              height: 50,
+              justifyContent: 'center',
+              borderRadius: 5,
+              marginBottom: 5,
+            }}>
+            <Text
+              style={{
+                color: 'white',
+              }}>
+              Ad with Image
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => setCurrentRoute(routes[2])}
+            activeOpacity={0.8}
+            style={{
+              backgroundColor: 'orange',
+              width: '90%',
+              alignItems: 'center',
+              height: 50,
+              justifyContent: 'center',
+              borderRadius: 5,
+              marginBottom: 5,
+            }}>
+            <Text
+              style={{
+                color: 'white',
+              }}>
+              Ad with Video
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => setCurrentRoute(routes[3])}
+            activeOpacity={0.8}
+            style={{
+              backgroundColor: 'orange',
+              width: '90%',
+              alignItems: 'center',
+              height: 50,
+              justifyContent: 'center',
+              borderRadius: 5,
+              marginBottom: 5,
+            }}>
+            <Text
+              style={{
+                color: 'white',
+              }}>
+              Multiple Ads in a List
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {currentRoute?.type === 'banner' && (
+        <>
+          <AdView type="image" media={false} />
+        </>
+      )}
+
+      {currentRoute?.type === 'image' && (
+        <View
+          style={{
+            height: 400,
+          }}>
+          <AdView type="image" media={true} />
+        </View>
+      )}
+
+      {currentRoute?.type === 'video' && (
+        <View
+          style={{
+            height: 400,
+          }}>
+          <AdView type="video" media={true} />
+        </View>
+      )}
+
+      {currentRoute?.type === 'list' && <List />}
+    </SafeAreaView>
+  );
+};
+
+export default App;
diff --git a/example-expo/android/.gitignore b/example-expo/android/.gitignore
@@ -0,0 +1,15 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# Bundle artifacts
+*.jsbundle