BiddingStack Audio Player for React Native

Play BiddingStack audio in your React Native (Expo) app with transport controls, player events, and media session integration. Also includes BSPlayerWebView for placing players inline inside WebView-rendered articles.

Requirements

Installation

The biddingstack-react-native-audio-player package is distributed privately while in early access. Contact the BiddingStack team to get the SDK package.

Project Setup

1. Raise the iOS deployment target to 14.0 with expo-build-properties in app.json:

{
  "expo": {
    "plugins": [
      ["expo-build-properties", { "ios": { "deploymentTarget": "14.0" } }]
    ]
  }
}

2. If you use pnpm, add node-linker=hoisted to your app's .npmrc.

3. Rebuild the native projects:

npx expo prebuild --clean

Integration

Memoize the settings object and give the view an explicit height; use onResize to track the player's content height:

import { BSPlayerView, BSPlayerViewRef, BSPlayerEvent } from 'biddingstack-react-native-audio-player'

function AudioScreen() {
  const ref = React.useRef<BSPlayerViewRef>(null)

  const settings = React.useMemo(() => ({
    playerConfig: {
      mode: 'embed',
      themeid: 1,
      autoPlay: false,
    },
    audio: [
      {
        audioUrl: 'https://example.com/audio.mp3',
        audioTitle: 'Episode 1',
        poster: 'https://example.com/poster.png',
      },
    ],
  }), [])

  const handleEvent = (event: BSPlayerEvent) => console.log(event.type)

  return (
    <BSPlayerView
      ref={ref}
      settings={settings}
      onEvent={handleEvent}
      style={{ height: 280 }}
    />
  )
}

The settings shape (playerConfig + audio) mirrors the web player configuration.

Props

Ref Methods

Important:

• Always wrap settings in useMemo; a new object identity recreates the native player.
• Do not mount the player inside FlatList / VirtualizedList.
• Give the host view an explicit height.

Embedding in WebView Articles

BSPlayerWebView places native audio players inline inside a react-native-webview article. The player tracks WebView scroll and sits at a marker you place in the article HTML.

In your article HTML, place a marker <div> wherever you want a player:

<div data-bs-player="main"></div>

In your React Native screen:

import { BSPlayerWebView } from 'biddingstack-react-native-audio-player'

const html = `... <div data-bs-player="main"></div> ...`

<BSPlayerWebView
  source={{ html }}
  audio={{
    main: {
      settings: {
        playerConfig: { mode: 'embed', themeid: 11, autoPlay: false },
        audio: [{ audioUrl: 'https://example.com/audio.mp3', audioTitle: 'Episode 1' }],
      },
    },
  }}
  style={{ flex: 1 }}
/>

Props