react-native-glia-player

GliaPlayer React Native SDK, a WebView-based video ad player, into a React Native project.

Installation

npm install react-native-glia-player

Usage

import { GliaPlayerView } from "react-native-glia-player";

// ...

<GliaPlayerView
    slotKey="{your_slot_key}"
    style={styles.gliaplayer}
/>

Sample Code

The sample code below shows how to add GliaPlayerView to the UI layout so that it always sticks to the bottom right corner of the screen.

import React, { useMemo } from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { GliaPlayerView } from 'react-native-glia-player';

const getRandomColor = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
};

export default function App() {
    const dummyBoxes = useMemo(() => {
    return Array.from({ length: 100 }).map((_, index) => (
      <View key={index} style={styles.boxContainer}>
        <View style={[styles.randomBox, { backgroundColor: getRandomColor() }]} />
      </View>
    ));
  }, []);

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollView}>
        {dummyBoxes}
      </ScrollView>

      <View style={styles.playerContainer}>
        <GliaPlayerView
          slotKey="gliacloud_app_test"
          style={styles.gliaplayer}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, // fillMaxSize
    backgroundColor: '#fff', 
  },
  scrollView: {
    flex: 1, // fillMaxSize
  },
  boxContainer: {
    marginBottom: 16, // Spacer(Modifier.height(16.dp))
  },
  randomBox: {
    width: '100%', // fillMaxWidth()
    height: 320,   // height(320.dp)
  },
  playerContainer: {
    position: 'absolute', // Allows it to float over the ScrollView
    bottom: 0,            // Alignment.Bottom...
    right: 0,             // ...End
    width: 320,           // width(480.dp)
    height: 240,          // height(320.dp)
    elevation: 5,         // Adds Android shadow (optional)
    zIndex: 5,            // Ensures it stays on top on iOS
  },
  gliaplayer: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

License

MIT