### Start Local Documentation Server
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
Once dependencies are installed, execute this command from the 'docs' directory to start the local documentation server. This allows you to preview documentation changes.
```sh
yarn start
```
--------------------------------
### Start React Native Example App Packager
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
This command starts the Metro server for the example application, which is configured to use the local version of the library. This allows real-time reflection of JavaScript code changes.
```sh
yarn example start
```
--------------------------------
### Basic Usage of React Native Video Player Component
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/installation.md
A simple React Native example demonstrating how to integrate and use the `VideoPlayer` component with a video source and thumbnail, enabling autoplay.
```tsx
import React from 'react';
import {View} from 'react-native';
import VideoPlayer from 'react-native-video-player';
const App = () => (
);
export default App;
```
--------------------------------
### Install Project Dependencies with Yarn
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
To set up the monorepo project, run this command in the root directory. It installs all required dependencies for both the library and the example app using Yarn workspaces. Note that npm cannot be used for development.
```sh
yarn
```
--------------------------------
### Install Documentation Dependencies
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
After navigating to the 'docs' directory, run this command to install all necessary dependencies for building and serving the documentation locally.
```sh
yarn install
```
--------------------------------
### Install React Native Video Player Library
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/installation.md
Instructions for installing the `react-native-video-player` and `react-native-video` libraries using either npm or yarn package managers.
```bash
npm install react-native-video-player react-native-video
```
```bash
yarn add react-native-video-player react-native-video
```
--------------------------------
### Run React Native Example App on iOS
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
Execute this command from the root directory to build and run the example application on an iOS simulator or device. Native code changes will require a rebuild of the example app.
```sh
yarn example ios
```
--------------------------------
### Run React Native Example App on Android
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
Execute this command from the root directory to build and run the example application on an Android emulator or device. Native code changes will require a rebuild of the example app.
```sh
yarn example android
```
--------------------------------
### Install iOS Dependencies with CocoaPods
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/installation.md
Steps to install necessary iOS dependencies for `react-native-video-player` by navigating to the `ios` directory and running `pod install`.
```bash
cd ios
pod install
```
--------------------------------
### Run React Native Example App on Web
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
Execute this command from the root directory to build and run the example application in a web browser. This allows testing the library's functionality in a web environment.
```sh
yarn example web
```
--------------------------------
### Install Docusaurus Website Dependencies
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md
Installs all required project dependencies using Yarn, preparing the environment for local development and building the Docusaurus site.
```bash
$ yarn
```
--------------------------------
### Install React Native Video Player Packages
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/README.md
Provides commands to install the `react-native-video-player` and its `react-native-video` dependency using either Yarn or NPM.
```Yarn
yarn add react-native-video-player react-native-video
```
```NPM
npm install --save react-native-video-player react-native-video
```
--------------------------------
### Start Docusaurus Local Development Server
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md
Launches a local development server and opens a browser, enabling live updates without restarts for efficient development of the Docusaurus website.
```bash
$ yarn start
```
--------------------------------
### Example Usage of VideoPlayerRef.stop()
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md
Provides an example of using the `stop()` method on a `VideoPlayerRef` to halt video playback and reset it to the beginning.
```ts
playerRef.current?.stop();
```
--------------------------------
### Install iOS Dependencies (CocoaPods)
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/README.md
Executes the necessary CocoaPods installation step for iOS projects after adding the React Native packages.
```Shell
cd ios
pod install
```
--------------------------------
### Example Usage of VideoPlayerRef.resume()
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md
Shows how to use the `resume()` method on a `VideoPlayerRef` to resume video playback from its current position.
```ts
playerRef.current?.resume();
```
--------------------------------
### Handle Video Start Event in React Native
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md
Callback function triggered when the start button is pressed, indicating the video has begun playback. This allows for custom actions or logging at the beginning of video playback.
```JavaScript
onStart={() => {
console.log('Video started!');
}}
```
--------------------------------
### Example Usage of VideoPlayerRef.pause()
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md
Demonstrates how to use the `pause()` method on a `VideoPlayerRef` to pause the video playback.
```ts
playerRef.current?.pause();
```
--------------------------------
### Example Usage of VideoPlayerRef.seek()
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md
Illustrates how to use the `seek()` method on a `VideoPlayerRef` to move the video playback to a specific time.
```ts
playerRef.current?.seek(30); // Seeks to the 30th second
```
--------------------------------
### hideControlsOnStart property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Hides controls when the video starts playing.
```APIDOC
hideControlsOnStart:
Type: boolean
Default: false
Description: Hides controls when the video starts playing.
```
--------------------------------
### thumbnail property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
An image source to display as a thumbnail before the video starts. This is useful for showing a preview or placeholder.
```APIDOC
thumbnail:
Type: object
Description: An image source to display as a thumbnail before the video starts. This is useful for showing a preview or placeholder.
```
```JavaScript
thumbnail={{
uri: 'https://example.com/thumbnail.jpg',
}}
```
--------------------------------
### autoplay property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Automatically starts video playback when the component is loaded.
```APIDOC
autoplay:
Type: boolean
Default: false
Description: Automatically starts video playback when the component is loaded.
```
--------------------------------
### defaultMuted property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Starts the video muted but allows toggling sound.
```APIDOC
defaultMuted:
Type: boolean
Description: Starts the video muted but allows toggling sound.
```
--------------------------------
### Applying Custom Styles to React Native Video Player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/styles.md
Demonstrates how to use the `customStyles` property to apply custom styling to the `react-native-video-player` component. This example shows how to import the component and define styles using `StyleSheet.create` for specific player elements like the wrapper, play control, seek bar knob, and thumbnail image.
```tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import VideoPlayer from 'react-native-video-player';
const App = () => (
);
const styles = StyleSheet.create({
wrapper: {
// ...
},
playControl: {
// ...
},
seekBarKnob: {
// ...
},
thumbnailImage: {
resizeMode: 'contain',
// ...
}
});
export default App;
```
--------------------------------
### muted property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Starts the video muted and hides the mute toggle.
```APIDOC
muted:
Type: boolean
Description: Starts the video muted and hides the mute toggle.
```
--------------------------------
### Navigate to Documentation Directory
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
This command changes the current directory to the 'docs' folder, which contains the project's documentation source files. This is the first step to run the documentation locally.
```sh
cd docs
```
--------------------------------
### Build Docusaurus Static Website Content
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md
Generates static content for the Docusaurus website into the `build` directory. The resulting files can be served by any standard static content hosting service.
```bash
$ yarn build
```
--------------------------------
### Deploy Docusaurus Website via SSH
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md
Deploys the Docusaurus website using SSH for authentication. This command is commonly used to build and push the site to a `gh-pages` branch for GitHub Pages hosting.
```bash
$ USE_SSH=true yarn deploy
```
--------------------------------
### Overview of Common Project Scripts
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
This section provides a summary of frequently used `yarn` scripts defined in the `package.json` file. These scripts streamline common development, testing, and build tasks within the monorepo.
```APIDOC
yarn: setup project by installing dependencies.
yarn typecheck: type-check files with TypeScript.
yarn lint: lint files with ESLint.
yarn test: run unit tests with Jest.
yarn example start: start the Metro server for the example app.
yarn example android: run the example app on Android.
yarn example ios: run the example app on iOS.
```
--------------------------------
### Run Unit Tests with Jest
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
Execute this command to run the project's unit tests using Jest. It's recommended to add new tests for any changes and ensure all existing tests pass.
```sh
yarn test
```
--------------------------------
### Publish New Versions to npm
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
This command uses 'release-it' to automate the publishing process for new versions to npm. It handles tasks like bumping versions, creating tags, and releases based on semantic versioning.
```sh
yarn release
```
--------------------------------
### Deploy Docusaurus Website without SSH
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md
Deploys the Docusaurus website by specifying a GitHub username instead of SSH. This method is also convenient for building and pushing to a `gh-pages` branch for GitHub Pages.
```bash
$ GIT_USER= yarn deploy
```
--------------------------------
### Basic Usage of React Native Video Player Component
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/README.md
Demonstrates how to import and use the `VideoPlayer` component in a React Native application, including setting a thumbnail, video source, and handling errors. It also shows how to use a ref to control the player.
```TypeScript
import VideoPlayer, { type VideoPlayerRef } from 'react-native-video-player';
const playerRef = useRef(null);
console.log(e)}
showDuration={true}
/>
```
--------------------------------
### Linting and Testing Tools Overview
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
This section details the primary tools used for maintaining code quality and ensuring correctness. TypeScript is used for type checking, ESLint with Prettier for linting and formatting, and Jest for unit testing.
```APIDOC
ESLint: Code linting.
Prettier: Code formatting.
TypeScript: Static type checking.
Jest: Unit testing framework.
```
--------------------------------
### Verify Code Quality with TypeScript and ESLint
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
Before committing, ensure your code adheres to the project's quality standards by running type checks with TypeScript and linting with ESLint. Both commands must pass for a successful contribution.
```sh
yarn typecheck
yarn lint
```
--------------------------------
### Conventional Commits Specification
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
This section outlines the commit message conventions followed by the project, based on the Conventional Commits specification. Adhering to these types helps in automated changelog generation and understanding commit purposes.
```APIDOC
fix: bug fixes, e.g. fix crash due to deprecated method.
feat: new features, e.g. add new method to the module.
refactor: code refactor, e.g. migrate from class components to hooks.
docs: changes into documentation, e.g. add usage example for the module..
test: adding or updating tests, e.g. add integration tests using detox.
chore: tooling changes, e.g. change CI config.
```
--------------------------------
### VideoPlayerRef Component API Method Definitions
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md
Defines the core methods available on the `VideoPlayerRef` object for programmatic control of video playback.
```APIDOC
seek(time)
Description: Moves the video playback to the specified time (in seconds).
Parameters:
time (number): The time in seconds to which the player should seek.
pause()
Description: Pauses the video playback.
resume()
Description: Resumes video playback from the current position.
stop()
Description: Stops the video playback and resets it to the beginning.
```
--------------------------------
### Additional Props from react-native-video
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
The `react-native-video-player` component supports all properties available in the `react-native-video` library. Refer to the `react-native-video` documentation for a detailed list of these additional props.
```APIDOC
Additional Props:
Source: react-native-video library
Description: All props available in the `react-native-video` library are supported. Refer to its documentation for details.
```
--------------------------------
### Automatically Fix Code Formatting with ESLint
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md
Use this command to automatically fix common formatting issues identified by ESLint. This helps maintain consistent code style across the project.
```sh
yarn lint --fix
```
--------------------------------
### Supported Events from react-native-video Library
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md
The `react-native-video-player` component also supports all events from the underlying `react-native-video` library. These include common events like `onLoad`, `onError`, and `onEnd`, providing comprehensive control over video playback lifecycle.
```APIDOC
Events inherited from `react-native-video`:
- `onLoad`: Triggered when the video is loaded and ready for playback.
- `onError`: Triggered when an error occurs during video playback.
- `onEnd`: Triggered when the video playback reaches its end.
For a full list of events and how to use them, refer to the `react-native-video` events documentation.
```
--------------------------------
### resizeMode property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Defines how the video should be resized within the player. Options include 'contain', 'cover', and 'stretch'.
```APIDOC
resizeMode:
Type: string
Default: 'contain'
Description: Defines how the video should be resized within the player. Options include 'contain', 'cover', and 'stretch'.
```
--------------------------------
### Accessing VideoPlayer Ref Methods in React Native
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md
Demonstrates how to create and use a ref with the `VideoPlayer` component to access its programmatic methods, such as `pause()`, for controlling video playback.
```tsx
import React, {useRef} from 'react';
import VideoPlayer, {type VideoPlayerRef} from 'react-native-video-player';
const App = () => {
const playerRef = useRef(null);
const handlePause = () => {
playerRef.current?.pause();
};
return (
);
};
```
--------------------------------
### repeat property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Loops the video playback continuously when enabled.
```APIDOC
repeat:
Type: boolean
Default: false
Description: Loops the video playback continuously when enabled.
```
--------------------------------
### source property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
The video source object passed to the underlying `react-native-video` component. This is a required property to define the video file or stream.
```APIDOC
source:
Type: object
Description: The video source object passed to the underlying `react-native-video` component. This is a required property to define the video file or stream.
```
```JavaScript
source={{
uri: 'https://example.com/video.mp4',
}}
```
--------------------------------
### Custom Styles API for React Native Video Player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/styles.md
Defines the available `customStyles` properties for the `react-native-video-player` component, allowing granular control over its appearance. Each property targets a specific part of the video player's UI.
```APIDOC
customStyles properties:
wrapper: Styles the main container that wraps the entire video player.
videoWrapper: Styles the container that holds the video element and controls.
video: Styles the video element itself. Supports properties like `backgroundColor` for older Android versions.
controls: Styles the container for the control elements (play, pause, seek bar, etc.).
playControl: Styles the play/pause button within the controls.
controlButton: Styles for all buttons in the controls (e.g., mute, fullscreen).
controlIcon: Styles for the icons inside the control buttons, such as the volume or fullscreen icons.
playIcon: Styles specifically for the play/pause icon on the start button.
seekBar: Styles the seek bar container, which shows the progress of the video.
seekBarFullWidth: Styles the seek bar when it spans the full width (e.g., in fullscreen mode).
seekBarProgress: Styles the bar indicating playback progress.
seekBarKnob: Styles the draggable knob used to seek (move playback position).
seekBarKnobSeeking: Styles the knob when the user is actively seeking (dragging the knob).
seekBarBackground: Styles the background of the seek bar.
thumbnail: Styles the video thumbnail container shown before playback starts.
thumbnailImage: Styles the video thumbnail image shown before playback starts.
playButton: Styles the start button overlaying the thumbnail.
playArrow: Styles the play arrow icon inside the start button.
durationText: Styles the text displaying the video duration.
```
--------------------------------
### videoWidth property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Width of the video to calculate the player’s aspect ratio.
```APIDOC
videoWidth:
Type: number
Description: Width of the video to calculate the player’s aspect ratio.
```
--------------------------------
### showDuration property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
If true, displays the video’s duration on the seek bar.
```APIDOC
showDuration:
Type: boolean
Default: false
Description: If true, displays the video’s duration on the seek bar.
```
--------------------------------
### endThumbnail property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
An image source displayed after the video ends. If not provided, the `thumbnail` is reused.
```APIDOC
endThumbnail:
Type: object
Description: An image source displayed after the video ends. If not provided, the `thumbnail` is reused.
```
```JavaScript
endThumbnail={{
uri: 'https://example.com/end-thumbnail.jpg',
}}
```
--------------------------------
### videoHeight property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Height of the video to calculate the player’s aspect ratio.
```APIDOC
videoHeight:
Type: number
Description: Height of the video to calculate the player’s aspect ratio.
```
--------------------------------
### duration property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
The duration of the video in seconds. If not provided, the player attempts to fetch it automatically.
```APIDOC
duration:
Type: number
Description: The duration of the video in seconds. If not provided, the player attempts to fetch it automatically.
```
--------------------------------
### Handle Video Controls Shown Event in React Native
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md
Callback function triggered when the video controls are shown. This event can be used to modify the UI or display additional information when controls become visible.
```JavaScript
onShowControls={() => {
console.log('Controls are shown.');
}}
```
--------------------------------
### endWithThumbnail property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
After the video ends, the player returns to displaying the thumbnail. If `endThumbnail` is not provided, the `thumbnail` is reused.
```APIDOC
endWithThumbnail:
Type: boolean
Default: false
Description: After the video ends, the player returns to displaying the thumbnail. If `endThumbnail` is not provided, the `thumbnail` is reused.
```
--------------------------------
### fullScreenOnLongPress property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Enables entering fullscreen mode with a long press gesture.
```APIDOC
fullScreenOnLongPress:
Type: boolean
Default: false
Description: Enables entering fullscreen mode with a long press gesture.
```
--------------------------------
### pauseOnPress property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Pauses or resumes playback when the player is tapped.
```APIDOC
pauseOnPress:
Type: boolean
Default: false
Description: Pauses or resumes playback when the player is tapped.
```
--------------------------------
### Handle Play Button Press Event in React Native
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md
Callback function triggered when the play button is pressed. This event can be used to perform actions such as tracking user interaction or controlling external UI elements.
```JavaScript
onPlayPress={() => {
console.log('Play button pressed!');
}}
```
--------------------------------
### disableSeek property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Disables seeking within the video.
```APIDOC
disableSeek:
Type: boolean
Default: false
Description: Disables seeking within the video.
```
--------------------------------
### controlsTimeout property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
The time (in milliseconds) before the controls are hidden automatically when inactive.
```APIDOC
controlsTimeout:
Type: number
Default: 3000 (ms)
Description: The time (in milliseconds) before the controls are hidden automatically when inactive.
```
--------------------------------
### disableControlsAutoHide property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Prevents the controls from being hidden automatically, keeping them visible at all times.
```APIDOC
disableControlsAutoHide:
Type: boolean
Default: false
Description: Prevents the controls from being hidden automatically, keeping them visible at all times.
```
--------------------------------
### disableFullscreen property for react-native-video-player
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md
Disables the fullscreen toggle button in the player.
```APIDOC
disableFullscreen:
Type: boolean
Default: false
Description: Disables the fullscreen toggle button in the player.
```
--------------------------------
### Handle Video Controls Hidden Event in React Native
Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md
Callback function triggered when the video controls are hidden. This is useful for adjusting the UI or overlay elements when the controls are no longer visible.
```JavaScript
onHideControls={() => {
console.log('Controls are hidden.');
}}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.