Set up the player with the Wowza Flowplayer React Native SDK

This page provides information about setting up the player within your React Native development projects.

All of the examples on this page are written in TypeScript. For a more complete example, see the App.tsx file in our react-native-sdk-demo repository. When working with this React Native project, it's helpful to understand how these types, components, and hooks work together.

Package element	Description
`FlowplayerAdType`	Provides an enumeration specifying the advertisement type used with the player. For example, pre-roll, mid-roll, or post-roll.
`FlowplayerContext`	Represents the context of the player and a way to manage it using React context. Consists of the player's state represented by `FlowplayerState` type, and dispatch functions represented by the `FlowplayerDispatch` type.
`FlowplayerDispatch`	Defines dispatch functions available in the player context.
`FlowplayerMedia`	Defines the media type to use the player. Can contain a direct URL to the remote media or an object with identifiers for a media ID and player configuration from Wowza Video.
`FlowplayerProps`	Defines properties for the video player component. It extends React Native's `ViewProps` and includes additional properties specific to video player functionality.
`FlowplayerProvider`	Provides the player context to its child components. Sets up state management using a reducer and binds action creators to the dispatch function for both external and internal player actions.
`FlowplayerRef`	Represents a set of methods to control the video player using a React ref.
`FlowplayerState`	Represents the publicly accessible state of the player.
`useFlowplayer`	Creates a custom hook to access the player context. Extracts and provides the external, public state and dispatch functions from the player's context. Should be used within components that are descendants of `FlowplayerProvider`. Throws an error if used outside the scope of `FlowplayerProvider`.

info

The ref property for the <FlowplayerView /> component is always mandatory. When using this component, make sure to always pass a reference to the player instances as a prop. The <FlowplayerView /> component depends on this ref to render the player UI correctly.

Import the player component

To create a player instance, start by importing the FlowplayerView component from the @flowplayer/react-native-sdk package.

Copy

Copied

import FlowplayerView from '@flowplayer/react-native-sdk';

Use the player component

Once you import the FlowplayerView component, you can use the player as in the following basic example, which uses a React ref to initialize the player. You should also import the FlowplayerRef type and the useRef hook from React to persist values between renders.

Copy

Copied

import FlowplayerView, { FlowplayerRef } from '@flowplayer/react-native-sdk';
import React, { useRef } from 'react';

// Define a functional component
const MyPlayerComponent = () => {

  // Initialize a ref using the useRef hook
  const flowplayerRef = useRef<FlowplayerRef>(null);

  // Return JSX and render the FlowplayerView component
  // Set the ref prop set to the flowplayerRef instance that was initialized
  return <FlowplayerView ref={flowplayerRef} />;

};

The component sets up a FlowplayerView in your React Native application and uses a ref to interact with or control the player instance programmatically. For a more complete example, see the following section about loading media files. You can also check the Manage the player page.

Load media files

You can use the example in this section to initialize a player instance, load a remote video when the component mounts, and render the <FlowplayerView /> component displaying a remote video file.

Begin by importing the FlowplayerView component, and the FlowplayerRef and FlowplayerMedia types from the @flowplayer/react-native-sdk package. Additionally, you need to add the React useRef hook.

Copy

Copied

// Add to App.tsx
import FlowplayerView, {
  type FlowplayerRef,
  type FlowplayerMedia,
} from '@flowplayer/react-native-sdk';
import React, { useRef } from 'react';
import { StyleSheet } from 'react-native';

// Define constant to load a remote video
const VIDEO: FlowplayerMedia = {
    // Point to a URL for content
    url: 'https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8',
    // Or load Wowza media from Wowza Video with its configuration
    // mediaId: '[media-id]',
    // playerId: '[player-configuration-id]',
};

// Define a functional component
const MyPlayerComponent = () => {
  // Initialize a ref with the useRef hook to hold a reference to the player instance
  const flowplayerRef = useRef<FlowplayerRef>(null);

  // Call when the player view is ready
  const onViewReady = () => {
    // Use the prepare method on flowplayerRef.current if it exists
    // Load the player when the view renders
    flowplayerRef.current?.prepare(VIDEO);
  };

  // Render the FlowplayerView component
  // Set ref prop to the flowplayerRef, pass style and onViewReady function as props
  return (
    <FlowplayerView
      ref={flowplayerRef}
      style={styles.flowplayer}
      onViewReady={onViewReady}
    />
  );
};

function App(): JSX.Element {
    return <MyPlayerComponent />;
}

// Style and view the component
const styles = StyleSheet.create({
  flowplayer: {
    width: '100%',
    height: 250,
    backgroundColor: '#000000',
    marginTop: '25%',
  },
});

You can find a complete working example in our demo React Native application for iOS or Android React Native projects. For more information about working with the player once you've completed set up, see Listen for events and Manage the player.