stzkSdk - React Native Ad SDK

A powerful React Native Ad SDK with three ad types: Interstitial, Rewarded, and Banner ads. Features auto-rotation, navigation blocking, and custom styling.

✨ Features

• 📱 Interstitial Ads: Full-screen app promotion ads
• 🎁 Rewarded Ads: Watch-to-earn coin/reward ads
• 🛍️ Banner Ads: Horizontal shopping/offer ads
• 🔄 Auto Rotation: Cycles through all ad types every 30s
• 🛡️ Navigation Blocking: Prevents back button during ads
• ⏱️ 20s Progress Bar: Smooth animation with manual skip
• 🎨 Custom Styling: Colors, text, and backgrounds
• 📊 Analytics Ready: Built-in event callbacks
• 🌐 Cross Platform: iOS, Android, and Web support

🚀 Quick Start

Installation

npm install stzksdk

Basic Usage

import React, { useEffect } from 'react';
import { View } from 'react-native';
import { AdProvider, startAutoAds } from 'stzksdk';

export default function App() {
  useEffect(() => {
    // Start auto ad rotation
    startAutoAds();
  }, []);

  return (
    <AdProvider config={{ appId: 'your-app-id' }}>
      <View style={{ flex: 1 }}>
        {/* Your app content */}
      </View>
    </AdProvider>
  );
}

📖 API Reference

AdProvider

The main provider component that wraps your app.

<AdProvider config={{
  appId: string,                    // Your app ID
  onAdShown: (adType) => void,     // Analytics callback
  onAdSkipped: (adType) => void    // Analytics callback
}}>
  {children}
</AdProvider>

Auto Ad Rotation

import { startAutoAds, stopAutoAds } from 'stzksdk';

// Start with default settings (30s, all ad types)
startAutoAds();

// Custom frequency and ad types
startAutoAds({
  frequency: 20000,                    // 20 seconds
  adTypes: ['interstitial', 'rewarded'] // Only 2 types
});

// Stop auto rotation
stopAutoAds();

Manual Ad Control

import { 
  showInterstitialAd, 
  showRewardedAd, 
  showBannerAd,
  showAdOnNavigation 
} from 'stzksdk';

// Show specific ad types
showInterstitialAd({
  title: 'Download App',
  description: 'Get our app now!',
  backgroundColor: '#FF5722',
  textColor: '#fff'
});

showRewardedAd({
  title: 'Earn Coins',
  description: 'Watch to earn 100 coins!'
});

showBannerAd({
  title: 'Special Offer',
  description: '50% off today only!',
  backgroundColor: '#2196F3'
});

// Show ad on navigation (blocks until skipped)
showAdOnNavigation(() => {
  // This runs after ad is skipped
  navigation.navigate('NextScreen');
});

🎯 Best Practices

1. Start ads after app initialization for better user experience
2. Use navigation blocking for important flows
3. Customize colors to match your brand
4. Add analytics callbacks to track performance
5. Test different frequencies to optimize user experience

📊 Analytics Integration

<AdProvider config={{
  appId: 'your-app-id',
  onAdShown: (adType) => {
    // Track ad impressions
    analytics.track('Ad Shown', { type: adType });
  },
  onAdSkipped: (adType) => {
    // Track ad skips
    analytics.track('Ad Skipped', { type: adType });
  }
}}>

🎨 Custom Styling Examples

// Brand-matched interstitial
showInterstitialAd({
  title: 'Your Brand App',
  description: 'Download our premium app',
  backgroundColor: '#your-brand-color',
  textColor: '#ffffff'
});

// High-value reward ad
showRewardedAd({
  title: 'Earn 1000 Coins!',
  description: 'Watch this ad for mega rewards',
  backgroundColor: '#FFD700'
});

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests for any improvements.

📞 Support

For support and questions:

• Create an issue on GitHub
• Check the documentation
• Review the demo app for usage examples

Professional Ad SDK for React Native Apps