Listen for events with the Wowza Flowplayer React Native SDK
When you use the React Native SDK to work with the Wowza Flowplayer in your React Native applications, you can listen to different events that are emitted by the player.
Under the surface, the React Native and JavaScript layers allow you to communicate with our native Apple and Android SDKs and to receive updates and notifications from them. Ultimately, you can capture these events to help manage the player when a user interacts with the player component. You can also handle different error scenarios when they occur. For more, see Manage the player.
To better understand how to listen for events, see the App.tsx file in our react-native-sdk-demo repository. You can also check the load media files example, which uses the onViewReady callback function to prepare a video to load.
Lifecycle events
These callback functions can be passed as event handlers to the player component in response to the player's lifecycle.
| Callback function | Description |
|---|---|
onViewDestroyed?: () => void; |
Triggered when the player is removed from view. Use this instead of React.useEffect() for any type of state cleanup. |
onViewReady?: () => void; |
Triggered when the player is ready to be used. Use this instead of React.useEffect() to apply changes to the player. |
Playback-specific events
These callback functions can be passed as event handlers to the player component in response to playback-specific events.
| Callback function | Description |
|---|---|
onComplete?: () => void; |
Triggered when the video playback completes. |
onPause?: () => void; |
Triggered when the video playback is paused. |
onPlay?: () => void; |
Triggered when the video starts playing. |
onReload?: () => void; |
Triggered when the video is reloaded. |
onStop?: () => void; |
Triggered when the video stops. |
Ad events
These callback functions can be passed as event handlers to the player component in response to ad-related events.
| Callback function | Description |
|---|---|
onAdClick?: (type: FlowplayerAdType) => void; |
Triggered when an advertisement is clicked. The type parameter identifies the type of clicked advertisement, such as pre-roll, mid-roll, or post-roll. |
onAdComplete?: (type: FlowplayerAdType) => void; |
Triggered when an advertisement completes. The type parameter identifies the type of completed advertisement, such as pre-roll, mid-roll, or post-roll. |
onAdError?: (error: Error) => void; |
Triggered when an error occurs during advertisement playback. The error object indicates the issue with the advertisement. |
onAdResume?: (type: FlowplayerAdType) => void; |
Triggered when an advertisement resumes. The type parameter identifies the type of resumed advertisement. |
onAdSkip?: (type: FlowplayerAdType) => void; |
Triggered when an advertisement is skipped. The type parameter identifies the skipped advertisement. |
onAdStart?: (type: FlowplayerAdType) => void; |
Triggered at the start of an advertisement. The type parameter identifies the advertisement type. |
Error-handling events
These callback functions can be passed as event handlers to the player component in response to error-related events.
| Callback function | Description |
|---|---|
onError?: (error: Error) => void; |
Triggered when an error occurs during video playback. The error object describes the issue that occurred. |