1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[4288],{98539(e,n,t){t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>h,frontMatter:()=>s,metadata:()=>i,toc:()=>l});const i=JSON.parse('{"id":"react-native-configuration-and-functions","title":"Configuration and Functions","description":"React Native SDK config reference: configuration prop on BambuserVideoView, button configs, UI hide flags, tracking, autoplay/currency/locale, ref methods.","source":"@site/live/react-native-configuration-and-functions.mdx","sourceDirName":".","slug":"/mobile-sdk-integration-react-native/configuration-and-functions","permalink":"/docs/live/mobile-sdk-integration-react-native/configuration-and-functions","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"react-native-configuration-and-functions","title":"Configuration and Functions","description":"React Native SDK config reference: configuration prop on BambuserVideoView, button configs, UI hide flags, tracking, autoplay/currency/locale, ref methods.","sidebar_label":"Configuration and Functions","slug":"mobile-sdk-integration-react-native/configuration-and-functions"},"sidebar":"someSidebars","previous":{"title":"Tracking","permalink":"/docs/live/mobile-sdk-integration-react-native/tracking"},"next":{"title":"Cart integration","permalink":"/docs/live/mobile-sdk-integration-react-native/cart-integration"}}');var r=t(74848),d=t(28453);const s={id:"react-native-configuration-and-functions",title:"Configuration and Functions",description:"React Native SDK config reference: configuration prop on BambuserVideoView, button configs, UI hide flags, tracking, autoplay/currency/locale, ref methods.",sidebar_label:"Configuration and Functions",slug:"mobile-sdk-integration-react-native/configuration-and-functions"},o="Configuration and Functions",c={},l=[{value:"Button Configurations",id:"button-configurations",level:2},{value:"Dismiss Button",id:"dismiss-button",level:3},{value:"Product Button",id:"product-button",level:3},{value:"Checkout Button",id:"checkout-button",level:3},{value:"Action Card Button",id:"action-card-button",level:3},{value:"UI Configurations",id:"ui-configurations",level:2},{value:"Tracking Configurations",id:"tracking-configurations",level:2},{value:"Player Behavior",id:"player-behavior",level:2},{value:"Imperative Functions",id:"imperative-functions",level:2},{value:"Full Configuration Example",id:"full-configuration-example",level:2}];function a(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,d.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"configuration-and-functions",children:"Configuration and Functions"})}),"\n",(0,r.jsxs)(n.p,{children:["To find the detailed configuration and functions please refer to ",(0,r.jsx)(n.a,{href:"/docs/live/player-api-reference",children:"Bambuser Player API Reference"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"configuration"})," prop on ",(0,r.jsx)(n.code,{children:"<BambuserVideoView />"})," is a plain object that is forwarded to the underlying native SDK. Memoize this object (with ",(0,r.jsx)(n.code,{children:"useMemo"})," or by hoisting it to module scope), since changing its reference rebuilds the player."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"<BambuserVideoView\n id=\"your-show-id\"\n configuration={{\n buttons: { /* ... */ },\n ui: { /* ... */ },\n autoplay: true,\n currency: 'USD',\n locale: 'en-US',\n }}\n/>\n"})}),"\n",(0,r.jsx)(n.h2,{id:"button-configurations",children:"Button Configurations"}),"\n",(0,r.jsx)(n.p,{children:"Each button type has different modes of operation:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"none"}),": hides the button, no events emitted."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"event"}),": emits an event to be captured by your ",(0,r.jsx)(n.code,{children:"onEvent"})," handler."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"auto"}),": uses the SDK's default behavior."]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"dismiss-button",children:"Dismiss Button"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Property Name"}),(0,r.jsx)(n.th,{children:"Value"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"dismiss"})}),(0,r.jsx)(n.td,{children:"none"}),(0,r.jsx)(n.td,{children:"Hides the button, no events emitted."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"dismiss"})}),(0,r.jsx)(n.td,{children:"event"}),(0,r.jsxs)(n.td,{children:["Emits an event that can be handled by your ",(0,r.jsx)(n.code,{children:"onEvent"})," handler."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"dismiss"})}),(0,r.jsx)(n.td,{children:"minimize"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.em,{children:"Not applicable"})," in the Mobile SDK."]})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"product-button",children:"Product Button"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Property Name"}),(0,r.jsx)(n.th,{children:"Value"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"product"})}),(0,r.jsx)(n.td,{children:"none"}),(0,r.jsx)(n.td,{children:"Emits an event, implement your own product view logic."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"product"})}),(0,r.jsx)(n.td,{children:"event"}),(0,r.jsx)(n.td,{children:"Emits an event that can be handled by your custom handler."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"product"})}),(0,r.jsx)(n.td,{children:"auto"}),(0,r.jsx)(n.td,{children:"Default behavior, opens the product detail modal."})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"checkout-button",children:"Checkout Button"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Property Name"}),(0,r.jsx)(n.th,{children:"Value"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"checkout"})}),(0,r.jsx)(n.td,{children:"none"}),(0,r.jsx)(n.td,{children:"Emits an event, implement your own checkout flow."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"checkout"})}),(0,r.jsx)(n.td,{children:"auto"}),(0,r.jsx)(n.td,{children:"Default behavior, opens the product detail modal."})]})]})]}),"\n",(0,r.jsx)(n.h3,{id:"action-card-button",children:"Action Card Button"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Property Name"}),(0,r.jsx)(n.th,{children:"Value"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"actionCard"})}),(0,r.jsx)(n.td,{children:"none"}),(0,r.jsx)(n.td,{children:"Emits an event, handle navigation in your app."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"actionCard"})}),(0,r.jsx)(n.td,{children:"auto"}),(0,r.jsxs)(n.td,{children:["Default behavior, opens the configured link in a webview. \u26a0\ufe0f Recommended: use ",(0,r.jsx)(n.strong,{children:"none"})," and handle redirection from your app."]})]})]})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"configuration={{\n buttons: {\n dismiss: 'none', // 'none' | 'event' | 'auto'\n product: 'none', // 'none' | 'event' | 'auto'\n checkout: 'none', // 'none' | 'auto'\n actionCard: 'none', // 'none' | 'auto'\n },\n}}\n"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"ui-configurations",children:"UI Configurations"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:["\u26a0\ufe0f All UI flags must be nested under a ",(0,r.jsx)(n.code,{children:"ui"})," object, ",(0,r.jsx)(n.strong,{children:"not"})," at the top level of ",(0,r.jsx)(n.code,{children:"configuration"}),"."]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"configuration={{\n ui: {\n hideEmojiOverlay: true,\n hideActionBar: false,\n hideShareButton: fal
1se,\n hideShareFromTimestampButton: false,\n hideVolumeButton: false,\n hideClosedCaptionsButton: false,\n hidePlaybackRateButton: false,\n hidePromotedShows: false,\n },\n}}\n"})}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Property Name"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideActionBar"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the full action bar. No button will be displayed."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideCartView"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the cart view in the modal, showing only product listing."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideChatOverlay"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the chat overlay."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideEmojiOverlay"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the emoji overlay on the player."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideProductList"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the product list."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideShareButton"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the share button."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideShareFromTimestampButton"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the share button with timestamp."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideShareView"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the share view."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideVolumeButton"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the volume control button."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideClosedCaptionsButton"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the closed captions / subtitles button."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hidePlaybackRateButton"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the playback speed button."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hidePromotedShows"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"Hides the promoted shows carousel inside the player."})]})]})]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"tracking-configurations",children:"Tracking Configurations"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Property Name"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsx)(n.tbody,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"enableTrackingPoint"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsxs)(n.td,{children:["Sends all tracking information. You will receive notifications through your ",(0,r.jsx)(n.code,{children:"onEvent"})," callback."]})]})})]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"player-behavior",children:"Player Behavior"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Property Name"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Default"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"autoplay"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"true"})}),(0,r.jsxs)(n.td,{children:["Automatically starts playback when the player is presented. When ",(0,r.jsx)(n.code,{children:"false"}),", call ",(0,r.jsx)(n.code,{children:"playerRef.current?.play()"})," manually."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"currency"})}),(0,r.jsx)(n.td,{children:"string"}),(0,r.jsx)(n.td,{children:"none"}),(0,r.jsxs)(n.td,{children:["Three-letter currency code (e.g. ",(0,r.jsx)(n.code,{children:"'USD'"}),"). ",(0,r.jsx)(n.strong,{children:"Required"})," for ",(0,r.jsx)(n.a,{href:"/docs/live/mobile-sdk-integration-react-native/product-hydration",children:"product hydration"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"locale"})}),(0,r.jsx)(n.td,{children:"string"}),(0,r.jsx)(n.td,{children:"none"}),(0,r.jsxs)(n.td,{children:["Locale tag (e.g. ",(0,r.jsx)(n.code,{children:"'en-US'"}),"). ",(0,r.jsx)(n.strong,{children:"Required"})," for ",(0,r.jsx)(n.a,{href:"/docs/live/mobile-sdk-integration-react-native/product-hydration",children:"product hydration"}),"."]})]})]})]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"configuration={{\n autoplay: false, // Player will not start automatically; call playerRef.current?.play() when ready.\n}}\n"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"imperative-functions",children:"Imperative Functions"}),"\n",(0,r.jsxs)(n.p,{children:["Beyond configuration, the player exposes imperative methods through the component ref. The full reference lives on the ",(0,r.jsx)(n.a,{href:"/docs/live/mobile-sdk-integration-react-native/player-api",children:"Player API"})," page; the most commonly used are:"]}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Method"}),(0,r.jsx)(n.th,{children:"Purpose"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"play()"})," / ",(0,r.jsx)(n.code,{children:"pause()"})]}),(0,r.jsx)(n.td,{children:"Start or pause playback."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"mute()"})," / ",(0,r.jsx)(n.code,{children:"unMute()"})]}),(0,r.jsx)(n.td,{children:"Mute or unmute audio."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.code,{children:"startPiP()"})," / ",(0,r.jsx)(n.code,{children:"stopPiP()"})," / ",(0,r.jsx)(n.code,{children:"setPiPEnabled(boolean)"})]}),(0,r.jsx)(n.td,{children:"Control Picture-in-Picture."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"invoke(fn, args)"})}),(0,r.jsxs)(n.td,{children:["Call a function on the player (e.g. ",(0,r.jsx)(n.code,{children:"updateProductWithData"}),")."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"notify(callbackKey, info)"})}),(0,r.jsxs)(n.td,{children:["Respond to a callback event surfaced through ",(0,r.jsx)(n.code,{children:"onEvent"}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"cleanup()"})}),(0,r.jsx)(n.td,{children:"Tear down the player and release native resources."})]})]})]}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h2,{id:"full-configuration-example",children:"Full Configuration Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { useMemo, useRef } from 'react';\nimport {\n BambuserVideoView,\n type BambuserVideoViewRef,\n} from '@bambuser/react-native-commerce-sdk';\n\nexport function LiveShowScreen() {\n const playerRef = useRef<BambuserVideoViewRef>(null);\n\n const configuration = useMemo(\n () =>
1 ({\n buttons: {\n dismiss: 'none',\n product: 'none',\n },\n ui: {\n hideEmojiOverlay: true,\n hidePlaybackRateButton: false,\n hidePromotedShows: false,\n },\n autoplay: true,\n currency: 'USD', // Required for product hydration\n locale: 'en-US', // Required for product hydration\n }),\n [],\n );\n\n return (\n <BambuserVideoView\n ref={playerRef}\n style={{ flex: 1 }}\n id=\"your-show-id\"\n configuration={configuration}\n />\n );\n}\n"})})]})}function h(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},28453(e,n,t){t.d(n,{R:()=>s,x:()=>o});var i=t(96540);const r={},d=i.createContext(r);function s(e){const n=i.useContext(d);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(d.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.