@hmscore/react-native-hms-adsprime
Version:
React Native HMS Ads Prime Kit
1,771 lines (1,658 loc) • 72.3 kB
JavaScript
/*
* Copyright 2020-2026. Huawei Technologies Co., Ltd. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License")
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from "react";
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Button,
Modal,
BackHandler,
ToastAndroid,
LogBox,
FlatList,
TouchableOpacity,
TextInput,
} from "react-native";
import { Picker } from "@react-native-picker/picker";
import HMSAds, {
HMSBanner,
HMSInstream,
HMSNative,
HMSVastView,
HMSVast,
HMSInterstitial,
HMSOaid,
HMSInstallReferrer,
HMSSplash,
HMSReward,
} from "@hmscore/react-native-hms-adsprime";
LogBox.ignoreLogs(["EventEmitter"]);
const Colors = {
white: "#ffffff",
black: "#000000",
light: "#f3f3f3",
lighter: "#f7f7f7",
dark: "#222222",
};
class LogService {
static logs = [];
static listeners = [];
static add(tag, message) {
const time = new Date().toISOString();
const log = {
id: LogService.logs.length + 1,
tag: tag,
message: typeof message === "object" ? JSON.stringify(message) : message,
time: time,
};
LogService.logs.unshift(log);
if (LogService.logs.length > 500) {
LogService.logs.pop();
}
LogService.notify();
}
static notify() {
LogService.listeners.forEach((listener) => {
listener([...LogService.logs]);
});
}
static subscribe(listener) {
LogService.listeners.push(listener);
listener([...LogService.logs]);
}
static unsubscribe(listener) {
LogService.listeners = LogService.listeners.filter((l) => l !== listener);
}
static clear() {
LogService.logs = [];
LogService.notify();
}
}
const toast = (tag, message) => {
ToastAndroid.show(tag, ToastAndroid.SHORT);
message ? console.log(tag, message) : console.log(tag);
LogService.add(tag, message);
};
class LogViewer extends React.Component {
constructor(props) {
super(props);
this.state = {
logs: [],
searchText: "",
filterTag: "All",
sortBy: "time",
sortOrder: "desc",
selectedLogs: [],
page: 1,
logsPerPage: 50,
totalPages: 1,
filteredLogs: [],
uniqueTags: [],
logStats: {
total: 0,
errors: 0,
warnings: 0,
info: 0,
},
theme: "light",
fontSize: 14,
showStats: true,
autoScroll: true,
highlightSearch: true,
showTimestamps: true,
};
this.searchTimeout = null;
this.flatListRef = React.createRef();
}
componentDidMount() {
LogService.subscribe(this.updateLogs);
this.calculateStats();
this.extractUniqueTags();
}
componentWillUnmount() {
LogService.unsubscribe(this.updateLogs);
if (this.searchTimeout) {
clearTimeout(this.searchTimeout);
}
}
componentDidUpdate(prevProps, prevState) {
if (prevState.logs !== this.state.logs) {
this.calculateStats();
this.extractUniqueTags();
this.applyFilters();
}
if (
prevState.searchText !== this.state.searchText ||
prevState.filterTag !== this.state.filterTag ||
prevState.sortBy !== this.state.sortBy ||
prevState.sortOrder !== this.state.sortOrder
) {
this.applyFilters();
}
if (this.state.autoScroll && this.flatListRef.current) {
this.flatListRef.current.scrollToEnd({ animated: true });
}
}
updateLogs = (logs) => {
this.setState({ logs }, () => {
this.applyFilters();
});
};
calculateStats = () => {
const { logs } = this.state;
const stats = {
total: logs.length,
errors: logs.filter((log) => log.tag.toLowerCase().includes("error"))
.length,
warnings: logs.filter((log) => log.tag.toLowerCase().includes("warn"))
.length,
info: logs.filter(
(log) =>
!log.tag.toLowerCase().includes("error") &&
!log.tag.toLowerCase().includes("warn"),
).length,
};
this.setState({ logStats: stats });
};
extractUniqueTags = () => {
const { logs } = this.state;
const tags = [...new Set(logs.map((log) => log.tag))];
this.setState({ uniqueTags: ["All", ...tags] });
};
applyFilters = () => {
let { logs, searchText, filterTag, sortBy, sortOrder } = this.state;
let filtered = [...logs];
if (filterTag !== "All") {
filtered = filtered.filter((log) => log.tag === filterTag);
}
if (searchText.trim()) {
const searchLower = searchText.toLowerCase();
filtered = filtered.filter(
(log) =>
log.tag.toLowerCase().includes(searchLower) ||
log.message.toLowerCase().includes(searchLower),
);
}
filtered.sort((a, b) => {
let aValue;
let bValue;
switch (sortBy) {
case "time":
aValue = new Date(a.time);
bValue = new Date(b.time);
break;
case "tag":
aValue = a.tag.toLowerCase();
bValue = b.tag.toLowerCase();
break;
case "message":
aValue = a.message.toLowerCase();
bValue = b.message.toLowerCase();
break;
default:
return 0;
}
if (sortOrder === "asc") {
if (aValue > bValue) {
return 1;
} else if (aValue < bValue) {
return -1;
} else {
return 0;
}
} else {
if (aValue < bValue) {
return 1;
} else if (aValue > bValue) {
return -1;
} else {
return 0;
}
}
});
const totalPages = Math.ceil(filtered.length / this.state.logsPerPage);
this.setState({
filteredLogs: filtered,
totalPages,
page: Math.min(this.state.page, totalPages) || 1,
});
};
handleSearchChange = (text) => {
this.setState({ searchText: text });
if (this.searchTimeout) {
clearTimeout(this.searchTimeout);
}
this.searchTimeout = setTimeout(() => {
this.applyFilters();
}, 300);
};
getSortIcon(sortKey) {
if (this.state.sortBy !== sortKey) {
return "";
}
if (this.state.sortOrder === "desc") {
return "↓";
}
return "↑";
}
handleFilterChange = (tag) => {
this.setState({ filterTag: tag });
};
handleSortChange = (sortBy) => {
this.setState((prevState) => ({
sortBy,
sortOrder:
prevState.sortBy === sortBy && prevState.sortOrder === "desc"
? "asc"
: "desc",
}));
};
toggleDetails = (log) => {
this.setState((prevState) => {
const isSelected = prevState.selectedLogs.includes(log);
if (isSelected) {
return {
selectedLogs: prevState.selectedLogs.filter((l) => l !== log),
};
} else {
return { selectedLogs: [...prevState.selectedLogs, log] };
}
});
};
clearLogs = () => {
LogService.clear();
};
changePage = (newPage) => {
this.setState({ page: newPage });
};
toggleTheme = () => {
this.setState((prevState) => ({
theme: prevState.theme === "light" ? "dark" : "light",
}));
};
changeFontSize = (size) => {
this.setState({ fontSize: size });
};
toggleSetting = (setting) => {
this.setState((prevState) => ({
[setting]: !prevState[setting],
}));
};
getPaginatedLogs = () => {
const { filteredLogs, page, logsPerPage } = this.state;
const startIndex = (page - 1) * logsPerPage;
return filteredLogs.slice(startIndex, startIndex + logsPerPage);
};
renderStats = () => {
const { logStats, showStats } = this.state;
if (!showStats) return null;
return (
<View
style={{
flexDirection: "row",
justifyContent: "space-around",
marginBottom: 10,
padding: 10,
backgroundColor: this.state.theme === "dark" ? "#333" : "#f0f0f0",
borderRadius: 5,
}}
>
<Text style={{ color: this.state.theme === "dark" ? "#fff" : "#000" }}>
Total: {logStats.total}
</Text>
<Text style={{ color: "red" }}>Errors: {logStats.errors}</Text>
<Text style={{ color: "orange" }}>Warnings: {logStats.warnings}</Text>
<Text style={{ color: "blue" }}>Info: {logStats.info}</Text>
</View>
);
};
renderSearchBar = () => {
return (
<View
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
}}
>
<TextInput
style={{
flex: 1,
borderWidth: 1,
borderColor: "#ccc",
borderRadius: 5,
padding: 8,
marginRight: 10,
backgroundColor: this.state.theme === "dark" ? "#555" : "#fff",
color: this.state.theme === "dark" ? "#fff" : "#000",
}}
placeholder="Search logs..."
placeholderTextColor={this.state.theme === "dark" ? "#ccc" : "#999"}
value={this.state.searchText}
onChangeText={this.handleSearchChange}
/>
<TouchableOpacity
style={{
padding: 8,
backgroundColor: "#007AFF",
borderRadius: 5,
}}
onPress={() => this.setState({ searchText: "" })}
>
<Text style={{ color: "white" }}>Clear</Text>
</TouchableOpacity>
</View>
);
};
renderFilters = () => {
return (
<View
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
flexWrap: "wrap",
}}
>
<Text
style={{
marginRight: 10,
color: this.state.theme === "dark" ? "#fff" : "#000",
}}
>
Filter by Tag:
</Text>
<Picker
style={{
height: 40,
width: 120,
backgroundColor: this.state.theme === "dark" ? "#555" : "#fff",
}}
selectedValue={this.state.filterTag}
onValueChange={this.handleFilterChange}
>
{this.state.uniqueTags.map((tag) => (
<Picker.Item key={tag} label={tag} value={tag} />
))}
</Picker>
<TouchableOpacity
style={{
marginLeft: 10,
padding: 5,
backgroundColor: "#28a745",
borderRadius: 3,
}}
onPress={() => this.handleSortChange("time")}
>
<Text style={{ color: "white", fontSize: 12 }}>
Sort by Time{" "}
{this.getTimeSortIcon("time")}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
marginLeft: 5,
padding: 5,
backgroundColor: "#28a745",
borderRadius: 3,
}}
onPress={() => this.handleSortChange("tag")}
>
<Text style={{ color: "white", fontSize: 12 }}>
Sort by Tag{" "}
{this.getTimeSortIcon("tag")}
</Text>
</TouchableOpacity>
</View>
);
};
renderPagination = () => {
const { page, totalPages } = this.state;
if (totalPages <= 1) return null;
return (
<View
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: 10,
marginBottom: 10,
}}
>
<TouchableOpacity
style={{
padding: 8,
backgroundColor: page > 1 ? "#007AFF" : "#ccc",
borderRadius: 5,
marginRight: 10,
}}
onPress={() => page > 1 && this.changePage(page - 1)}
disabled={page <= 1}
>
<Text style={{ color: "white" }}>Previous</Text>
</TouchableOpacity>
<Text
style={{
marginHorizontal: 10,
color: this.state.theme === "dark" ? "#fff" : "#000",
}}
>
Page {page} of {totalPages}
</Text>
<TouchableOpacity
style={{
padding: 8,
backgroundColor: page < totalPages ? "#007AFF" : "#ccc",
borderRadius: 5,
marginLeft: 10,
}}
onPress={() => page < totalPages && this.changePage(page + 1)}
disabled={page >= totalPages}
>
<Text style={{ color: "white" }}>Next</Text>
</TouchableOpacity>
</View>
);
};
renderSettings = () => {
return (
<View
style={{
marginBottom: 10,
padding: 10,
backgroundColor: this.state.theme === "dark" ? "#444" : "#e9ecef",
borderRadius: 5,
}}
>
<Text
style={{
fontWeight: "bold",
marginBottom: 5,
color: this.state.theme === "dark" ? "#fff" : "#000",
}}
>
Settings
</Text>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<TouchableOpacity
style={{
margin: 2,
padding: 5,
backgroundColor:
this.state.theme === "light" ? "#007AFF" : "#555",
borderRadius: 3,
}}
onPress={this.toggleTheme}
>
<Text style={{ color: "white", fontSize: 12 }}>
{this.state.theme === "light" ? "Dark" : "Light"} Theme
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
margin: 2,
padding: 5,
backgroundColor: this.state.showStats ? "#28a745" : "#6c757d",
borderRadius: 3,
}}
onPress={() => this.toggleSetting("showStats")}
>
<Text style={{ color: "white", fontSize: 12 }}>
{this.state.showStats ? "Hide" : "Show"} Stats
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
margin: 2,
padding: 5,
backgroundColor: this.state.autoScroll ? "#28a745" : "#6c757d",
borderRadius: 3,
}}
onPress={() => this.toggleSetting("autoScroll")}
>
<Text style={{ color: "white", fontSize: 12 }}>
{this.state.autoScroll ? "Disable" : "Enable"} Auto Scroll
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
margin: 2,
padding: 5,
backgroundColor: this.state.showTimestamps
? "#28a745"
: "#6c757d",
borderRadius: 3,
}}
onPress={() => this.toggleSetting("showTimestamps")}
>
<Text style={{ color: "white", fontSize: 12 }}>
{this.state.showTimestamps ? "Hide" : "Show"} Timestamps
</Text>
</TouchableOpacity>
</View>
<View
style={{ flexDirection: "row", alignItems: "center", marginTop: 5 }}
>
<Text
style={{
marginRight: 10,
color: this.state.theme === "dark" ? "#fff" : "#000",
fontSize: 12,
}}
>
Font Size:
</Text>
<TouchableOpacity
style={{
margin: 2,
padding: 5,
backgroundColor: this.state.fontSize > 12 ? "#28a745" : "#6c757d",
borderRadius: 3,
}}
onPress={() =>
this.changeFontSize(Math.max(10, this.state.fontSize - 2))
}
>
<Text style={{ color: "white", fontSize: 12 }}>A-</Text>
</TouchableOpacity>
<Text
style={{
marginHorizontal: 10,
color: this.state.theme === "dark" ? "#fff" : "#000",
fontSize: 12,
}}
>
{this.state.fontSize}px
</Text>
<TouchableOpacity
style={{
margin: 2,
padding: 5,
backgroundColor: this.state.fontSize < 20 ? "#28a745" : "#6c757d",
borderRadius: 3,
}}
onPress={() =>
this.changeFontSize(Math.min(24, this.state.fontSize + 2))
}
>
<Text style={{ color: "white", fontSize: 12 }}>A+</Text>
</TouchableOpacity>
</View>
</View>
);
};
renderItem = ({ item }) => {
const isSelected = this.state.selectedLogs.includes(item);
const isHighlighted =
this.state.highlightSearch &&
this.state.searchText &&
(item.tag.toLowerCase().includes(this.state.searchText.toLowerCase()) ||
item.message
.toLowerCase()
.includes(this.state.searchText.toLowerCase()));
const isDark = this.state.theme === "dark";
let backgroundColor;
if (isSelected) {
if (isDark) {
backgroundColor = "#666";
} else {
backgroundColor = "#e3f2fd";
}
} else if (isHighlighted) {
if (isDark) {
backgroundColor = "#555";
} else {
backgroundColor = "#ddd";
}
} else {
if (isDark) {
backgroundColor = "#555";
} else {
backgroundColor = "#ddd";
}
}
return (
<TouchableOpacity
style={{
padding: 10,
borderBottomWidth: 1,
borderColor: this.state.theme === "dark" ? "#555" : "#ddd",
backgroundColor: backgroundColor
}}
onPress={() => this.toggleDetails(item)}
>
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text
style={{
fontWeight: "bold",
color: this.state.theme === "dark" ? "#fff" : "#000",
fontSize: this.state.fontSize,
}}
>
{item.tag}
</Text>
{this.state.showTimestamps && (
<Text
style={{
fontSize: 12,
color: this.state.theme === "dark" ? "#ccc" : "#888",
}}
>
{new Date(item.time).toLocaleTimeString()}
</Text>
)}
</View>
<Text
style={{
marginTop: 5,
color: this.state.theme === "dark" ? "#ddd" : "#333",
fontSize: this.state.fontSize - 2,
}}
></Text>
{isSelected && (
<View
style={{
marginTop: 10,
padding: 10,
backgroundColor: this.state.theme === "dark" ? "#555" : "#f8f9fa",
borderRadius: 5,
}}
>
<Text
style={{
fontWeight: "bold",
color: this.state.theme === "dark" ? "#fff" : "#000",
marginBottom: 5,
}}
>
Full Details
</Text>
<Text
style={{
color: this.state.theme === "dark" ? "#ddd" : "#333",
fontSize: this.state.fontSize - 1,
}}
>
ID: {item.id}
</Text>
<Text
style={{
color: this.state.theme === "dark" ? "#ddd" : "#333",
fontSize: this.state.fontSize - 1,
}}
>
Time: {item.time}
</Text>
<Text
style={{
color: this.state.theme === "dark" ? "#ddd" : "#333",
fontSize: this.state.fontSize - 1,
}}
>
Tag: {item.tag}
</Text>
<Text
style={{
color: this.state.theme === "dark" ? "#ddd" : "#333",
fontSize: this.state.fontSize - 1,
}}
>
Message: {item.message}
</Text>
</View>
)}
</TouchableOpacity>
);
};
render() {
const paginatedLogs = this.getPaginatedLogs();
return (
<View
style={{
marginTop: 20,
backgroundColor: this.state.theme === "dark" ? "#222" : "#fff",
padding: 10,
borderRadius: 5,
}}
>
<Text
style={{
fontSize: 20,
fontWeight: "bold",
color: this.state.theme === "dark" ? "#fff" : "#000",
textAlign: "center",
marginBottom: 10,
}}
>
Debug Logs
</Text>
{this.renderStats()}
{this.renderSettings()}
{this.renderSearchBar()}
{this.renderFilters()}
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
marginBottom: 10,
}}
>
<TouchableOpacity
style={{
backgroundColor: "red",
padding: 10,
borderRadius: 5,
flex: 1,
marginRight: 5,
}}
onPress={this.clearLogs}
>
<Text style={{ color: "white", textAlign: "center" }}>
Clear Logs
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
backgroundColor: "#28a745",
padding: 10,
borderRadius: 5,
flex: 1,
marginLeft: 5,
}}
onPress={() => this.setState({ page: 1 })}
>
<Text style={{ color: "white", textAlign: "center" }}>
Reset Page
</Text>
</TouchableOpacity>
</View>
<Text
style={{
marginBottom: 5,
color: this.state.theme === "dark" ? "#fff" : "#000",
fontSize: 12,
}}
>
Showing {paginatedLogs.length} of {this.state.filteredLogs.length}{" "}
logs
</Text>
<ScrollView
style={{
height: 400,
borderWidth: 1,
borderColor: this.state.theme === "dark" ? "#555" : "#ccc",
borderRadius: 5,
backgroundColor: this.state.theme === "dark" ? "#333" : "#fff",
}}
showsVerticalScrollIndicator={true}
nestedScrollEnabled={true}
>
{paginatedLogs.map((item) => (
<View key={item.id}>{this.renderItem({ item })}</View>
))}
{paginatedLogs.length === 0 && (
<Text
style={{
textAlign: "center",
marginTop: 20,
color: this.state.theme === "dark" ? "#ccc" : "#666",
}}
>
No logs to display
</Text>
)}
</ScrollView>
{this.renderPagination()}
</View>
);
}
}
let adBannerElement;
let adInstreamElement;
let adNativeElement;
let adVastElement;
class Banner extends React.Component {
constructor(props) {
super(props);
bannerAdIds = {};
bannerAdIds[HMSAds.BannerMediaTypes.IMAGE] = "testw6vs28auh3";
this.state = {
bannerAdSize: HMSAds.BannerAdSizes.B_320_100,
adId: bannerAdIds[HMSAds.BannerMediaTypes.IMAGE],
};
}
render() {
return (
<>
<View style={styles.sectionContainer}>
<Picker
prompt="Select ad size"
selectedValue={this.state.bannerAdSize}
onValueChange={(itemValue) => {
this.setState({
bannerAdSize: itemValue,
});
}}
>
{Object.values(HMSAds.BannerAdSizes).map((adSize) => (
<Picker.Item label={adSize} value={adSize} key={adSize} />
))}
</Picker>
<Button
title="Load"
onPress={() => {
if (adBannerElement !== null) {
adBannerElement.loadAd();
}
}}
/>
<Button
title="Info"
color="purple"
onPress={() => {
if (adBannerElement !== null) {
adBannerElement
.getInfo()
.then((res) => {
toast("HMSBanner, ref.getInfo", res);
})
.catch((err) => alert(err));
}
}}
/>
<Button
title="Set Refresh"
color="green"
onPress={() => {
if (adBannerElement !== null) {
adBannerElement.setRefresh(60);
}
}}
/>
<Button
title="Pause"
onPress={() => {
if (adBannerElement !== null) {
adBannerElement.pause();
}
}}
/>
<Button
title="Resume"
color="green"
onPress={() => {
if (adBannerElement !== null) {
adBannerElement.resume();
}
}}
/>
<Button
title="Destroy"
color="red"
onPress={() => {
if (adBannerElement !== null) {
adBannerElement.destroy();
}
}}
/>
<HMSBanner
style={{ height: 100 }}
bannerAdSize={this.state.bannerAdSize}
adId={this.state.adId}
adParam={{
adContentClassification:
HMSAds.ContentClassification.AD_CONTENT_CLASSIFICATION_UNKNOWN,
gender: HMSAds.Gender.UNKNOWN,
nonPersonalizedAd: HMSAds.NonPersonalizedAd.ALLOW_ALL,
tagForChildProtection:
HMSAds.TagForChild.TAG_FOR_CHILD_PROTECTION_UNSPECIFIED,
tagForUnderAgeOfPromise: HMSAds.UnderAge.PROMISE_UNSPECIFIED,
location: {
lat: 15,
lng: 12,
},
}}
onAdLoaded={(_) => toast("HMSBanner onAdLoaded")}
onAdFailed={(e) => {
toast("HMSBanner onAdFailed", e.nativeEvent);
}}
onAdOpened={(_) => toast("HMSBanner onAdOpened")}
onAdClicked={(_) => toast("HMSBanner onAdClicked")}
onAdClosed={(_) => toast("HMSBanner onAdClosed")}
onAdImpression={(_) => toast("HMSBanner onAdImpression")}
onAdLeave={(_) => toast("HMSBanner onAdLeave")}
ref={(el) => {
adBannerElement = el;
}}
/>
</View>
</>
);
}
}
class Instream extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<>
<View style={styles.sectionContainer}>
<Button
title="Load"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.loadAd();
}
}}
/>
<Button
title="Info"
color="purple"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement
.getInfo()
.then((res) => {
toast("HMSInstream, ref.getInfo", res);
})
.catch((err) => alert(err));
}
}}
/>
<Button
color="green"
title="Register"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.register();
}
}}
/>
<Button
title="Mute"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.mute();
}
}}
/>
<Button
title="Unmute"
color="purple"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.unmute();
}
}}
/>
<Button
title="Stop"
color="red"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.stop();
}
}}
/>
<Button
title="Pause"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.pause();
}
}}
/>
<Button
title="Play"
color="green"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.play();
}
}}
/>
<Button
title="Destroy"
color="red"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.destroy();
}
}}
/>
<Button
title="showAdvertiserInfoDialog"
color="green"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.showAdvertiserInfoDialog(true);
}
}}
/>
<Button
title="hideAdvertiserInfoDialog"
color="red"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.hideAdvertiserInfoDialog();
}
}}
/>
<Button
title="showTransparencyDialog"
color="green"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.showTransparencyDialog();
}
}}
/>
<Button
title="hideTransParencyDialog"
color="red"
onPress={() => {
if (adInstreamElement !== null) {
adInstreamElement.hideTransparencyDialog();
}
}}
/>
<HMSInstream
style={{ height: 189, width: 328 }}
adId="testy3cglm3pj0"
maxCount={4}
totalDuration={60}
onClick={(_) => toast("HMSInstream onClick")}
onMute={(_) => toast("HMSInstream onMute")}
onUnmute={(_) => toast("HMSInstream onUnmute")}
onAdLoaded={(_) => toast("HMSInstream onAdLoaded")}
onAdFailed={(e) => toast("HMSInstream onAdFailed", e.nativeEvent)}
onSegmentMediaChange={(e) =>
toast("HMSInstream onSegmentMediaChange", e.nativeEvent)
}
onMediaProgress={(e) =>
console.log("HMSInstream onMediaProgress", e.nativeEvent)
}
onMediaStart={(e) =>
toast("HMSInstream onMediaStart", e.nativeEvent)
}
onMediaPause={(e) =>
toast("HMSInstream onMediaPause", e.nativeEvent)
}
onMediaStop={(e) => toast("HMSInstream onMediaStop", e.nativeEvent)}
onMediaCompletion={(e) =>
toast("HMSInstream onMediaCompletion", e.nativeEvent)
}
onMediaError={(e) =>
toast("HMSInstream onMediaError", e.nativeEvent)
}
ref={(el) => {
adInstreamElement = el;
}}
/>
</View>
</>
);
}
}
class Native extends React.Component {
constructor(props) {
super(props);
nativeAdIds = {};
nativeAdIds[HMSAds.NativeMediaTypes.VIDEO] = "testy63txaom86";
nativeAdIds[HMSAds.NativeMediaTypes.IMAGE_SMALL] = "testb65czjivt9";
nativeAdIds[HMSAds.NativeMediaTypes.IMAGE_LARGE] = "testu7m3hc4gvm";
this.state = {
displayForm: {
mediaType: HMSAds.NativeMediaTypes.VIDEO,
adId: nativeAdIds.video,
},
};
}
render() {
return (
<>
<View style={styles.sectionContainer}>
<Picker
prompt="Select display form"
selectedValue={this.state.displayForm.mediaType}
onValueChange={(itemValue) => {
this.setState({
displayForm: {
mediaType: itemValue,
adId: nativeAdIds[itemValue],
},
});
}}
>
{Object.values(HMSAds.NativeMediaTypes).map((mType) => (
<Picker.Item label={mType} value={mType} key={mType} />
))}
</Picker>
<Button
title="Load"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.loadAd();
}
}}
/>
<Button
title="Info"
color="purple"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement
.getInfo()
.then((res) => {
toast("HMSNative, ref.getInfo", res);
})
.catch((err) => alert(err));
}
}}
/>
<Button
title="Dislike"
color="orange"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.dislikeAd("Because I dont like it");
}
}}
/>
<Button
title="Go to Why Page"
color="purple"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.gotoWhyThisAdPage();
}
}}
/>
<Button
title="Destroy"
color="red"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.destroy();
}
}}
/>
<Button
title="Allow custom click"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.setAllowCustomClick();
}
}}
/>
<Button
title="Record click event"
color="green"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.recordClickEvent();
}
}}
/>
<Button
title="Record impression"
color="red"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.recordImpressionEvent({
impressed: true,
isUseful: "nope",
});
}
}}
/>
<Button
title="showAdvertiserInfoDialog"
color="green"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.showAdvertiserInfoDialog(true);
}
}}
/>
<Button
title="hideAdvertiserInfoDialog"
color="red"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.hideAdvertiserInfoDialog();
}
}}
/>
<Button
title="showPrivacyPolicy"
color="green"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.showPrivacyPolicy();
}
}}
/>
<Button
title="showPermissionPage"
color="green"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.showPermissionPage();
}
}}
/>
<Button
title="showAppDetailPage"
color="green"
onPress={() => {
if (adNativeElement !== null) {
adNativeElement.showAppDetailPage();
}
}}
/>
</View>
<View>
<HMSNative
style={{ height: 322 }}
displayForm={this.state.displayForm}
adParam={{
adContentClassification:
HMSAds.ContentClassification.AD_CONTENT_CLASSIFICATION_UNKNOWN,
gender: HMSAds.Gender.UNKNOWN,
nonPersonalizedAd: HMSAds.NonPersonalizedAd.ALLOW_ALL,
tagForChildProtection:
HMSAds.TagForChild.TAG_FOR_CHILD_PROTECTION_UNSPECIFIED,
tagForUnderAgeOfPromise: HMSAds.UnderAge.PROMISE_UNSPECIFIED,
detailedCreativeTypes: [
HMSAds.DetailedCreativeTypes.BIG_IMG,
HMSAds.DetailedCreativeTypes.VIDEO,
HMSAds.DetailedCreativeTypes.SMALL_IMG,
],
}}
nativeConfig={{
choicesPosition: HMSAds.ChoicesPosition.TOP_RIGHT,
mediaDirection: HMSAds.Direction.ANY,
videoConfiguration: {
audioFocusType: HMSAds.AudioFocusType.NOT_GAIN_AUDIO_FOCUS_ALL,
isStartMuted: true,
autoPlayNetWork: 0,
},
}}
viewOptions={{
showMediaContent: false,
mediaImageScaleType: HMSAds.ScaleType.FIT_CENTER,
descriptionTextStyle: { visibility: false },
callToActionStyle: { color: "black", fontSize: 12 },
}}
onNativeAdLoaded={(_) => toast("HMSNative onNativeAdLoaded")}
onAdDisliked={(_) => toast("HMSNative onAdDisliked")}
onAdFailed={(e) => toast("HMSNative onAdFailed", e.nativeEvent)}
onAdClicked={(_) => toast("HMSNative onAdClicked")}
onAdImpression={(_) => toast("HMSNative onAdImpression")}
onVideoStart={(_) => toast("HMSNative onVideoStart")}
onVideoPlay={(_) => toast("HMSNative onVideoPlay")}
onVideoEnd={(_) => toast("HMSNative onVideoEnd")}
onVideoPause={(_) => toast("HMSNative onVideoPause")}
onVideoMute={(e) => toast("HMSNative onVideoMute", e.nativeEvent)}
ref={(el) => {
adNativeElement = el;
}}
/>
</View>
</>
);
}
}
class Vast extends React.Component {
constructor(props) {
super(props);
this.vastRef = React.createRef();
}
render() {
return (
<SafeAreaView>
<View style={styles.sectionContainer}>
<Button
title="Load"
onPress={() => {
if (this.vastRef.current) {
this.vastRef.current.loadAd();
}
}}
/>
<Button
title="Info"
color="purple"
onPress={() => {
if (this.vastRef.current) {
this.vastRef.current
.getInfo()
.then((res) => {
toast("HMS, ref.getInfo", res);
})
.catch((err) => alert(err));
}
}}
/>
<Button
title="Destroy"
color="red"
onPress={() => {
if (this.vastRef.current) {
this.vastRef.current.release();
}
}}
/>
<Button
title="Resume"
color="green"
onPress={() => {
if (this.vastRef.current) {
this.vastRef.current.resume();
}
}}
/>
<Button
title="Pause"
color="red"
onPress={() => {
if (this.vastRef.current) {
this.vastRef.current.pause();
}
}}
/>
<Button
title="Start Or Pause"
color="blue"
onPress={() => {
if (this.vastRef.current) {
this.vastRef.current.startOrPause();
}
}}
/>
<Button
title="Toggle Mute State"
color="red"
onPress={() => {
if (this.vastRef.current) {
this.vastRef.current.toggleMuteState(true);
}
}}
/>
</View>
<View style={{ marginTop: 50, height: 500 }}>
<HMSVastView
ref={this.vastRef}
style={{ flex: 1 }}
isTestAd={false}
isCustomVideoPlayer={false}
isAdLoadWithAdsData={true}
adParam={{
size: { width: 300, height: 200 },
adId: "testy3cglm3pj0",
totalDuration: 99,
creativeMatchStrategy: HMSVast.CreativeMatchType.ANY,
allowMobileTraffic: false,
adOrientation: HMSVast.Orientation.LANDSCAPE,
maxAdPods: 1,
requestOption: {
adContentClassification:
HMSVast.ContentClassification.AD_CONTENT_CLASSIFICATION_A,
nonPersonalizedAd: HMSVast.NonPersonalizedAd.PERSONALIZED,
tagForChildProtection:
HMSVast.TagForChild.TAG_FOR_CHILD_PROTECTION_UNSPECIFIED,
tagForUnderAgeOfPromise: HMSVast.UnderAge.PROMISE_UNSPECIFIED,
},
}}
playerConfigs={{
enableRotation: false,
isEnableCutout: false,
skipLinearAd: false,
isEnablePortrait: true,
}}
onLoadSuccess={(e) =>
toast("HMSVast onLoadSuccess", JSON.stringify(e.nativeEvent))
}
onLoadFailed={(_) => toast("HMSVast onLoadFailed")}
onSuccess={(_) => toast("HMSVast onSuccess")}
onFailed={(e) =>
toast("HMSVast onFailed", JSON.stringify(e.nativeEvent))
}
onPlayAdReady={(_) => toast("HMSVast onPlayAdReady")}
onPlayAdFinish={(_) => toast("HMSVast onPlayAdFinish")}
onBufferStart={(_) => toast("HMSVast onBufferStart")}
onBufferEnd={(_) => toast("HMSVast onBufferEnd")}
onPlayStateChanged={(e) =>
toast("HMSVast onPlayStateChanged", JSON.stringify(e.nativeEvent))
}
onVolumeChanged={(e) =>
toast("HMSVast onVolumeChanged", JSON.stringify(e.nativeEvent))
}
onScreenViewChanged={(e) =>
toast(
"HMSVast onScreenViewChanged",
JSON.stringify(e.nativeEvent),
)
}
onProgressChanged={(e) => console.log(e.nativeEvent)}
/>
</View>
</SafeAreaView>
);
}
}
class Interstitial extends React.Component {
constructor(props) {
super(props);
interstitialAdIds = {};
interstitialAdIds[HMSAds.InterstitialMediaTypes.IMAGE] = "teste9ih9j0rc3";
interstitialAdIds[HMSAds.InterstitialMediaTypes.VIDEO] = "testb4znbuh3n2";
this.state = {
isLoaded: false,
displayForm: {
mediaType: HMSAds.InterstitialMediaTypes.VIDEO,
adId: interstitialAdIds.video,
},
};
}
componentDidMount() {
HMSInterstitial.setAdId(this.state.displayForm.adId)
.then((res) => toast("HMSInterstitial.setAdId", res))
.catch((err) => alert(err));
HMSInterstitial.adClosedListenerAdd(() =>
toast("HMSInterstitial adClosed"),
);
HMSInterstitial.adFailedListenerAdd((error) =>
toast("HMSInterstitial adFailed", error),
);
HMSInterstitial.adLeaveListenerAdd(() => toast("HMSInterstitial adLeave"));
HMSInterstitial.adOpenedListenerAdd(() =>
toast("HMSInterstitial adOpened"),
);
HMSInterstitial.adLoadedListenerAdd((res) =>
toast("HMSInterstitial adLoaded, result: ", res),
);
HMSInterstitial.adClickedListenerAdd(() =>
toast("HMSInterstitial adClicked"),
);
HMSInterstitial.adImpressionListenerAdd(() =>
toast("HMSInterstitial adImpression"),
);
HMSInterstitial.adCompletedListenerAdd(() =>
toast("HMSInterstitial adCompleted"),
);
HMSInterstitial.adStartedListenerAdd(() =>
toast("HMSInterstitial adStarted"),
);
}
componentWillUnmount() {
HMSInterstitial.allListenersRemove();
}
render() {
return (
<>
<View>
<View style={styles.sectionContainer}>
<Picker
prompt="Media Type"
selectedValue={this.state.displayForm.mediaType}
style={styles.picker}
onValueChange={(itemValue) => {
this.setState({
displayForm: {
mediaType: itemValue,
adId: interstitialAdIds[itemValue],
},
});
HMSInterstitial.setAdId(interstitialAdIds[itemValue])
.then((res) => toast("HMSInterstitial.setAdId", res))
.catch((err) => alert(err));
}}
>
{Object.values(HMSAds.InterstitialMediaTypes).map((mType) => (
<Picker.Item label={mType} value={mType} key={mType} />
))}
</Picker>
<Button
title="Load"
onPress={() => {
HMSInterstitial.loadAd()
.then((res) => toast("HMSInterstitial.loadAd", res))
.catch((err) => alert(err));
}}
/>
<Button
title="Set Ad Parameter"
onPress={() => {
HMSInterstitial.setAdParam({
adContentClassification:
HMSAds.ContentClassification
.AD_CONTENT_CLASSIFICATION_UNKNOWN,
gender: HMSAds.Gender.UNKNOWN,
nonPersonalizedAd: HMSAds.NonPersonalizedAd.ALLOW_ALL,
tagForChildProtection:
HMSAds.TagForChild.TAG_FOR_CHILD_PROTECTION_UNSPECIFIED,
tagForUnderAgeOfPromise: HMSAds.UnderAge.PROMISE_UNSPECIFIED,
})
.then((res) => toast("HMSInterstitial.setAdParam", res))
.catch((err) => alert(err));
}}
/>
<Button
color="green"
title="Check"
onPress={() => {
HMSInterstitial.isLoaded()
.then((res) => {
toast("HMSInterstitial.isLoaded", res);
this.setState({ isLoaded: res });
})
.catch((err) => alert(err));
}}
/>
<Button
title="Show"
color="purple"
disabled={!this.state.isLoaded}
onPress={() => {
this.setState({ isLoaded: false });
HMSInterstitial.show()
.then((res) => toast("HMSInterstitial.show", res))
.catch((err) => alert(err));
}}
/>
</View>
</View>
</>
);
}
}
class Reward extends React.Component {
constructor(props) {
super(props);
rewardAdIds = {};
rewardAdIds[HMSAds.RewardMediaTypes.VIDEO] = "testx9dtjwj8hp";
this.state = {
isLoaded: false,
displayForm: {
mediaType: HMSAds.RewardMediaTypes.VIDEO,
adId: rewardAdIds[HMSAds.RewardMediaTypes.VIDEO],
},
};
}
componentDidMount() {
HMSReward.setAdId(this.state.displayForm.adId)
.then((res) => toast("HMSReward.setAdId", res))
.catch((err) => alert(err));
HMSReward.loadWithAdId(true)
.then((res) => toast("HMSReward.loadWithAdId", res))
.catch((err) => alert(err));
HMSReward.setVerifyConfig({ userId: "HMS_User", data: "HMS data" })
.then((res) => toast("HMSReward.setVerifyConfig", res))
.catch((err) => alert(err));
HMSReward.adLoadedListenerAdd((res) =>
toast("HMSReward adLoaded, result: ", res),
);
HMSReward.adFailedToLoadListenerAdd((error) =>
console.warn("HMSReward adFailedToLoad, error: ", error),
);
HMSReward.adFailedToShowListenerAdd((error) =>
toast("HMSReward adFailedToShow, error: ", error),
);
HMSReward.adOpenedListenerAdd(() => toast("HMSReward adOpened"));
HMSReward.adClosedListenerAdd(() => toast("HMSReward adClosed"));
HMSReward.adRewardedListenerAdd((reward) =>
toast("HMSReward adRewarded, reward: ", reward),
);
}
componentWillUnmount() {
HMSReward.allListenersRemove();
}
render() {
return (
<>
<View style={styles.sectionContainer}>
<Picker
prompt="Media Type"
selectedValue={this.state.displayForm.mediaType}
style={styles.picker}
onValueChange={(itemValue) => {
this.setState({
displayForm: {
mediaType: itemValue,
adId: rewardAdIds[itemValue],
},
});
HMSReward.setAdId(rewardAdIds[itemValue])
.then((res) => toast("HMSReward.setAdId", res))
.catch((err) => alert(err));
}}
>
{Object.values(HMSAds.RewardMediaTypes).map((mType) => (
<Picker.Item label={mType} value={mType} key={mType} />
))}
</Picker>
<Button
title="Load"
onPress={() => {
HMSReward.loadAd()