Make Your Own UI

If you want to add a custom UI on top of Lura Player, you can add ui: "none" parameter to your config, and Lura Player won't load the default user interface.

import React, { useRef } from "react";
import { LuraPlayer, LuraPlayerProps } from "lura-react-native-core";

export default function MySampleComponent() {
  const playerRef = useRef<LuraPlayer>(null);

  const config = {
    token: "<TOKEN_FROM_MCP>",
    ui: "none",
  };

  return (
    <View>
      <LuraPlayer ref={playerRef} config={config} />
      <Button
        onClick={
          playerRef.current?.isPaused()
            ? playerRef.current?.play()
            : playerRef.current?.pause()
        }
      />
    </View>
  );
}