How to embed CSS + JS for the Bitmovin UI with React Native?

Feature Requests
, ,
1

I confirm this is a Feature Request and NOT a support/technical query. Please use your Bitmovin Dashboard for raising support tickets.

on

Which product is your request related to?

Player

Description

Hey!

First of all, I’m putting this as feature request as it could be part of the React Native example app :innocent:

As recommended here, we’d like to embed our Bitmovin Player UI with the app bundle directly for offline support.

However, the implementation with React Native + Expo is a bit tricky.
I’m trying to embed the assets using expo-assets, and reference them through local URIs. It’s a bit tricky especially because you can’t require the .js file. So, we rename the file to .bmjs extension, whitelist them for expo-assets, and at runtime we rename the file to .js. I do get a local URI with a file:// pointing to a local JS file, embedded in the phone, and yet it does not work with Bitmovin. No UI loads.

I wonder if I have done something wrong, and if there is a better strategy for that.

My post is a bit ambiguous between support / bug / feature request, but as I said above: I think this should be part of the documentation or part of the example.

Any help appreciated :raising_hands:

Thanks!

2

Dumb mistake on my end, what I’ve done actually works.

If you’re interested, here’s a piece of code that solves it.

import { Asset } from 'expo-asset'
import * as FileSystem from 'expo-file-system/legacy'

const asFileWithExt = async (moduleRef: number, desiredExt: 'js' | 'css') => {
  const asset = Asset.fromModule(moduleRef)
  await asset.downloadAsync()

  if (!FileSystem.cacheDirectory || !asset.hash) {
    throw new Error('asdflkjasdknj')
  }

  const dest = `${FileSystem.cacheDirectory}${asset.hash}.${desiredExt}`

  if (asset.localUri) {
    await FileSystem.copyAsync({ from: asset.localUri, to: dest })
  }

  return dest
}

export const getBitmovinUrl = async () => {
  const js = await asFileWithExt(require('./assets/player-ui.bmjs'), 'js')
  const css = await asFileWithExt(require('./assets/player-ui-css.bmcss'), 'css')

  return { js, css }
}