div
# 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.


```typescript
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](/docs/wowza-flowplayer/react-native-sdk/manage-the-player/#pass-value-based-props) to initialize the player. You should also import the `FlowplayerRef` type and the `useRef` hook from React to persist values between renders.


```typescript
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](/docs/wowza-flowplayer/react-native-sdk/manage-the-player/#call-player-actions-with-a-ref) programmatically. For a more complete example, see the following section about loading media files. You can also check the [Manage the player](/docs/wowza-flowplayer/react-native-sdk/manage-the-player/#call-player-actions-with-a-ref) 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.


```typescript
// 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](/docs/wowza-flowplayer/react-native-sdk/listen-for-events/) and [Manage the player](http://localhost:3000/docs/wowza-flowplayer/react-native-sdk/manage-the-player/).