React Native Bambuser Player SDK

BambuserPlayerSDK lets you add a Bambuser Live Video Shopping (LVS) Player to your app.

Installation

To get started with the Bambuser integration in your React Native project, first, install the react-native-bambuser package as a dependency.

Ensure your project is set up on the Hy-Vee npm registry.

yarn

yarn add react-native-bambuser

npm

npm install react-native-bambuser

iOS Setup

Altering CocoaPods to use Frameworks

You must tell CocoaPods to use frameworks to be compatible with this SDK.

Open the file /ios/Podfile and add this line inside your targets (right before the use_react_native line in current react-native releases that calls the react native Podfile function to get the native modules config)

use_frameworks! :linkage => :static

Android Setup

Add the Bambuser SDK repository

Open the file /android/build.gradle and add the Bambuser repository

allprojects {
  repositories {
    // ... other repositories
    maven { url "https://repo.repsy.io/mvn/bambuser/default" } // <-- Add this line
  }
}

Linking the Library

Once the above steps have been completed, the React Native Bambuser library must be linked to your project and your application needs to be rebuilt.

React Native 0.60 and above (Auto Linking)

iOS

cd ios && pod install && cd ..

npx react-native run-ios

Android

npx react-native run-android

React Native 0.59 and below (Manual Linking)

iOS

Add the Pod to your project's /ios/Podfile

pod 'react-native-bambuser', :path => '../node_modules/react-native-bambuser'

Install the Pod

cd ios && pod install && cd ..

Rebuild the app

npx react-native run-ios

Android

Add the dependency to your project's /android/app/build.gradle

dependencies {
  // ...
  implementation project(':react-native-bambuser')
}

Rebuild the app

npx react-native run-android

Usage

Here's how you can use the Bambuser SDK in your React Native project

Play a show

import { playShow } from 'react-native-bambuser';

export default function App() {

  const handlePress = () => {
    playShow('vAtJH3xevpYTLnf1oHao');
  };

  return (
    <Pressable onPress={handlePress}>
        <Text>Open player</Text>
      </Pressable>
  );
}

Listen to events

For a full list of events that can be listened to, check the iOS events and Android events documentation.

import { useEffect } from 'react';
import { playShow, onOpenProduct } from 'react-native-bambuser';

export default function App() {

  const handlePress = () => {
    playShow('vAtJH3xevpYTLnf1oHao');
  };

  useEffect(() => {
    onOpenProduct((event) => {
      console.log('onOpenProduct', event);
    });
  }, []);

  return (
    <Pressable onPress={handlePress}>
      <Text>Open player</Text>
    </Pressable>
  );
}