0.2.4 • Published 11 months ago
react-native-buzzvil v0.2.4
react-native-buzzvil
react native library for buzzvil android sdk
Installation
yarn add react-native-buzzvil
Usage
react-native-google-mobile-ads과 같이 app.json에 앱키를 등록해야 함.
{
"react-native-buzzvil-ads": {
"android_app_id": "app-pub-{app id}"
}
}
import React, { useEffect, useRef, useState } from 'react';
import { Button, Dimensions, ScrollView, StyleSheet, View } from 'react-native';
import {
BuzzvilAds,
BuzzvilFeed,
FeedAds,
NativeAd,
} from 'react-native-buzzvil';
const windowWidth = Dimensions.get('window').width;
let pageCount = 0;
export default function App() {
const scrollViewRef = useRef<ScrollView>(null);
const [showNativeAd, setShowNativeAd] = useState<boolean>(false);
useEffect(() => {
BuzzvilAds.initialize({ feedId: '{your default feed id}' });
BuzzvilAds.setUserInfo({
userId: '1',
gender: 'MALE',
birthYear: 1989,
});
}, []);
return (
<View style={styles.container}>
<Button
title="페이지 이동"
onPress={() => {
pageCount += 1;
pageCount = pageCount > 2 ? 0 : pageCount;
scrollViewRef.current?.scrollTo({
x: pageCount * windowWidth,
y: 0,
animated: false,
});
}}
/>
<ScrollView
horizontal
ref={scrollViewRef}
scrollEnabled={false}
showsHorizontalScrollIndicator={false}
>
<View style={[styles.defaultContain, { width: windowWidth }]}>
<View style={{ alignItems: 'center', marginTop: 20 }}>
<Button
onPress={() => {
setShowNativeAd((pre) => !pre);
}}
title={showNativeAd ? '네이티브 광고 숨김' : '네이티브 광고 노출'}
/>
</View>
<View style={styles.nativeAdContainer}>
<NativeAd
unitId="{your unitId id}"
width={240}
height={235}
bgColor="#F1EDED"
onParticipated={() => {
console.log('onParticipated');
}}
onRewarded={() => {
console.log('onRewarded');
}}
onError={(errorType) => {
console.log('onError:', errorType);
}}
/>
</View>
{!showNativeAd && (
<View
style={{
left: 75,
right: 75,
top: 240,
bottom: 320,
position: 'absolute',
backgroundColor: 'pink',
}}
/>
)}
</View>
<View style={[styles.container, { width: windowWidth }]}>
<FeedAds unitId="{your Feed id}" />
</View>
<View style={[styles.container, { width: windowWidth }]}>
<Button
onPress={() => {
BuzzvilFeed.show();
}}
title={'Feed 보기'}
/>
</View>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
defaultContain: {
flex: 1,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
nativeAdContainer: {
left: 88,
right: 88,
top: 250,
bottom: 330,
position: 'absolute',
},
screenBlocker: {
position: 'absolute',
backgroundColor: 'pink',
left: 0,
right: 0,
top: 0,
},
});
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT