Skip to content

Commit 3bc9e2c

Browse files
ammarahm-edammarahm-ed
committed
add expo example
1 parent daa4147 commit 3bc9e2c

File tree

102 files changed

+27564
-42
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+27564
-42
lines changed

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@ docs/
99

1010
# Example
1111
example/
12+
example-expo/
1213

1314
android/build

‎docs/docs/installation.mdx

+10-1
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,23 @@ Add your AdMob App IDs to `app.json` or `app.config.js`.
4141
"react-native-admob-native-ads",
4242
{
4343
"androidAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy",
44-
"iosAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
44+
"iosAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy",
45+
"facebookMediation": false
4546
}
4647
]
4748
]
4849
}
4950
}
5051
```
5152

53+
Run `expo prebuild` to setup android & ios folders for local development.
54+
55+
:::caution
56+
57+
Expo Go is not supported.
58+
59+
:::
60+
5261
## Android Setup
5362

5463
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).

‎example-expo/.gitignore

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
node_modules/
2+
.expo/
3+
dist/
4+
npm-debug.*
5+
*.jks
6+
*.p8
7+
*.p12
8+
*.key
9+
*.mobileprovision
10+
*.orig.*
11+
web-build/
12+
13+
# macOS
14+
.DS_Store
15+
16+
# Temporary files created by Metro to check the health of the file watcher
17+
.metro-health-check*

‎example-expo/App.js

+220
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
import React, {useEffect, useState} from 'react';
2+
import {
3+
Image,
4+
Platform,
5+
SafeAreaView,
6+
StatusBar,
7+
Text,
8+
TouchableOpacity,
9+
View,
10+
} from 'react-native';
11+
import {AdManager} from 'react-native-admob-native-ads';
12+
import {requestTrackingPermission} from 'react-native-tracking-transparency';
13+
import {AdView} from './src/AdView';
14+
import List from './src/List';
15+
import {routes} from './src/utils';
16+
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
17+
const App = () => {
18+
const [currentRoute, setCurrentRoute] = useState(null);
19+
const [loading, setLoading] = useState(true);
20+
21+
useEffect(() => {
22+
const init = async () => {
23+
const trackingStatus = await requestTrackingPermission();
24+
25+
let trackingAuthorized = false;
26+
if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
27+
trackingAuthorized = true;
28+
}
29+
30+
await AdManager.setRequestConfiguration({
31+
trackingAuthorized,
32+
});
33+
34+
setLoading(false);
35+
};
36+
37+
init();
38+
}, []);
39+
40+
return (
41+
<SafeAreaView
42+
style={{
43+
height: '100%',
44+
width: '100%',
45+
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
46+
backgroundColor: 'white',
47+
}}>
48+
<StatusBar
49+
translucent
50+
backgroundColor="transparent"
51+
barStyle="dark-content"
52+
/>
53+
<View
54+
style={{
55+
flexDirection: 'row',
56+
alignItems: 'center',
57+
height: 50,
58+
paddingHorizontal: 6,
59+
marginBottom: 10,
60+
width: '100%',
61+
}}>
62+
{currentRoute && (
63+
<TouchableOpacity
64+
onPress={() => setCurrentRoute(null)}
65+
activeOpacity={0.8}
66+
style={{
67+
width: 50,
68+
alignItems: 'center',
69+
height: 50,
70+
justifyContent: 'center',
71+
borderRadius: 100,
72+
}}>
73+
<Icon name="arrow-left" color="black" size={28} />
74+
</TouchableOpacity>
75+
)}
76+
</View>
77+
78+
{!loading && !currentRoute && (
79+
<View
80+
style={{
81+
alignItems: 'center',
82+
}}>
83+
<View
84+
style={{
85+
alignItems: 'center',
86+
marginBottom: 50,
87+
}}>
88+
<Image
89+
source={require('./images.jpg')}
90+
style={{
91+
width: 120,
92+
height: 120,
93+
marginBottom: 30,
94+
borderRadius: 100,
95+
backgroundColor: '#f0f0f0',
96+
}}
97+
/>
98+
99+
<Text
100+
style={{
101+
fontSize: 18,
102+
letterSpacing: 1,
103+
textAlign: 'center',
104+
}}>
105+
Admob Native Advanced Ads {'\n'} for React Native
106+
</Text>
107+
</View>
108+
109+
<TouchableOpacity
110+
onPress={() => setCurrentRoute(routes[0])}
111+
activeOpacity={0.8}
112+
style={{
113+
backgroundColor: 'orange',
114+
width: '90%',
115+
alignItems: 'center',
116+
height: 50,
117+
justifyContent: 'center',
118+
borderRadius: 5,
119+
marginBottom: 5,
120+
}}>
121+
<Text
122+
style={{
123+
color: 'white',
124+
}}>
125+
Simple Banner Ad
126+
</Text>
127+
</TouchableOpacity>
128+
129+
<TouchableOpacity
130+
onPress={() => setCurrentRoute(routes[1])}
131+
activeOpacity={0.8}
132+
style={{
133+
backgroundColor: 'orange',
134+
width: '90%',
135+
alignItems: 'center',
136+
height: 50,
137+
justifyContent: 'center',
138+
borderRadius: 5,
139+
marginBottom: 5,
140+
}}>
141+
<Text
142+
style={{
143+
color: 'white',
144+
}}>
145+
Ad with Image
146+
</Text>
147+
</TouchableOpacity>
148+
149+
<TouchableOpacity
150+
onPress={() => setCurrentRoute(routes[2])}
151+
activeOpacity={0.8}
152+
style={{
153+
backgroundColor: 'orange',
154+
width: '90%',
155+
alignItems: 'center',
156+
height: 50,
157+
justifyContent: 'center',
158+
borderRadius: 5,
159+
marginBottom: 5,
160+
}}>
161+
<Text
162+
style={{
163+
color: 'white',
164+
}}>
165+
Ad with Video
166+
</Text>
167+
</TouchableOpacity>
168+
169+
<TouchableOpacity
170+
onPress={() => setCurrentRoute(routes[3])}
171+
activeOpacity={0.8}
172+
style={{
173+
backgroundColor: 'orange',
174+
width: '90%',
175+
alignItems: 'center',
176+
height: 50,
177+
justifyContent: 'center',
178+
borderRadius: 5,
179+
marginBottom: 5,
180+
}}>
181+
<Text
182+
style={{
183+
color: 'white',
184+
}}>
185+
Multiple Ads in a List
186+
</Text>
187+
</TouchableOpacity>
188+
</View>
189+
)}
190+
191+
{currentRoute?.type === 'banner' && (
192+
<>
193+
<AdView type="image" media={false} />
194+
</>
195+
)}
196+
197+
{currentRoute?.type === 'image' && (
198+
<View
199+
style={{
200+
height: 400,
201+
}}>
202+
<AdView type="image" media={true} />
203+
</View>
204+
)}
205+
206+
{currentRoute?.type === 'video' && (
207+
<View
208+
style={{
209+
height: 400,
210+
}}>
211+
<AdView type="video" media={true} />
212+
</View>
213+
)}
214+
215+
{currentRoute?.type === 'list' && <List />}
216+
</SafeAreaView>
217+
);
218+
};
219+
220+
export default App;

‎example-expo/android/.gitignore

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Android/IntelliJ
6+
#
7+
build/
8+
.idea
9+
.gradle
10+
local.properties
11+
*.iml
12+
*.hprof
13+
14+
# Bundle artifacts
15+
*.jsbundle

0 commit comments

Comments
 (0)