How can we use UIManager in React Native to customize the player?

Is it possible to use UIManager in React Native same way it’s used in React to customize the player and add more components ? And also how can we add the forked and customized html web player repository instead of the default one ?
Thank you.

Hi @youcef.ben! Thanks for reaching out!

Currently, it is not supported to interact with the UIManager on the mobile SDKs, therefore also not supported with React Native.

As an alternative - as you already asked - a forked and custom build of the Player Web UI can be included.

Please see this example here: bitmovin-player-react-native/CustomHtmlUI.tsx at 7693a0b03954f983634e4583654defac98127666 · bitmovin/bitmovin-player-react-native · GitHub

@roland.kakonyi Thank you for replying,
We are adding css and js using the styleConfig prop. However is there a way to customize html as well ? For example if we want to add buttons. How can I use the forked and custom build instead of the default one ?

Hey @youcef.ben,

You can fork the Player UI repository and make all the relevant changes like adding/removing buttons. Please make sure you change the buildDefaultSmallScreenUI method, as this gets called internally by the Bitmovin Player Android & iOS SDKs (thus the React Native wrapper project as well) to initialize the UI.

You only need to adjust (adding/removing) components of the framework as these generate the HTML on initialization.

If you then build the projects, you’ll receive your custom JS and CSS files, which you can then use in your RN project.