7 | We are TheWidlarzGroup
8 |
14 | Premium support →
15 |
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/example/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # react-native-reanimated
11 | -keep class com.swmansion.reanimated.** { *; }
12 | -keep class com.facebook.react.turbomodule.** { *; }
13 |
14 | # Add any project specific keep options here:
15 |
--------------------------------------------------------------------------------
/.github/workflows/check-docs-build.yml:
--------------------------------------------------------------------------------
1 | name: Check Documentation Build
2 |
3 | on:
4 | workflow_dispatch:
5 | pull_request:
6 | paths:
7 | - '.github/workflows/check-docs-build.yml'
8 | - 'docs/**'
9 | jobs:
10 | build_docs:
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: Checkout repository
14 | uses: actions/checkout@v3
15 | with:
16 | submodules: recursive
17 |
18 | - name: Setup
19 | uses: ./.github/actions/setup
20 | with:
21 | github_token: ${{ secrets.GITHUB_TOKEN }}
22 |
23 | - name: Build Documentation
24 | run: |
25 | cd docs
26 | yarn install
27 | yarn build
28 |
--------------------------------------------------------------------------------
/docs/src/pages/index.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS files with the .module.css suffix will be treated as CSS modules
3 | * and scoped locally.
4 | */
5 |
6 | .heroBanner {
7 | padding: 5rem 0;
8 | text-align: center;
9 | position: relative;
10 | overflow: hidden;
11 | background-color: #87ccef;
12 | color: black;
13 | }
14 |
15 | .hero__icon{
16 | font-size: 100px;
17 | }
18 |
19 | .hero__subtitle {
20 | max-width: 40rem;
21 | margin-inline: auto;
22 | }
23 |
24 | @media screen and (max-width: 996px) {
25 | .heroBanner {
26 | padding: 2rem;
27 | }
28 | }
29 |
30 | .buttons {
31 | display: flex;
32 | align-items: center;
33 | justify-content: center;
34 | margin-top: 4rem;
35 | }
36 |
--------------------------------------------------------------------------------
/example/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "example",
4 | "slug": "example",
5 | "version": "1.0.0",
6 | "orientation": "portrait",
7 | "icon": "./assets/icon.png",
8 | "userInterfaceStyle": "light",
9 | "splash": {
10 | "image": "./assets/splash.png",
11 | "resizeMode": "contain",
12 | "backgroundColor": "#ffffff"
13 | },
14 | "ios": {
15 | "supportsTablet": true,
16 | "bundleIdentifier": "videoplayer.example"
17 | },
18 | "android": {
19 | "adaptiveIcon": {
20 | "foregroundImage": "./assets/adaptive-icon.png",
21 | "backgroundColor": "#ffffff"
22 | },
23 | "package": "videoplayer.example"
24 | },
25 | "web": {
26 | "favicon": "./assets/favicon.png"
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-video-player-example",
3 | "version": "1.0.0",
4 | "main": "expo/AppEntry.js",
5 | "scripts": {
6 | "start": "expo start",
7 | "android": "expo run:android",
8 | "ios": "expo run:ios",
9 | "web": "expo start --web"
10 | },
11 | "dependencies": {
12 | "@expo/metro-runtime": "~3.2.3",
13 | "@shopify/react-native-skia": "^1.5.10",
14 | "expo": "~51.0.28",
15 | "expo-status-bar": "~1.12.1",
16 | "react": "18.2.0",
17 | "react-dom": "18.2.0",
18 | "react-native": "0.74.5",
19 | "react-native-reanimated": "^3.16.6",
20 | "react-native-video": "6.8.0",
21 | "react-native-web": "~0.19.10",
22 | "react-scan": "native"
23 | },
24 | "devDependencies": {
25 | "@babel/core": "^7.20.0",
26 | "react-native-builder-bob": "^0.31.0"
27 | },
28 | "private": true
29 | }
30 |
--------------------------------------------------------------------------------
/.github/actions/setup/action.yml:
--------------------------------------------------------------------------------
1 | name: Setup
2 | description: Setup Node.js and install dependencies
3 |
4 | runs:
5 | using: composite
6 | steps:
7 | - name: Setup Node.js
8 | uses: actions/setup-node@v3
9 | with:
10 | node-version-file: .nvmrc
11 |
12 | - name: Cache dependencies
13 | id: yarn-cache
14 | uses: actions/cache@v3
15 | with:
16 | path: |
17 | **/node_modules
18 | .yarn/install-state.gz
19 | key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
20 | restore-keys: |
21 | ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
22 | ${{ runner.os }}-yarn-
23 |
24 | - name: Install dependencies
25 | if: steps.yarn-cache.outputs.cache-hit != 'true'
26 | run: yarn install --immutable
27 | shell: bash
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": ".",
4 | "paths": {
5 | "react-native-video-player": ["./src/index"]
6 | },
7 | "allowUnreachableCode": false,
8 | "allowUnusedLabels": false,
9 | "esModuleInterop": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "jsx": "react-jsx",
12 | "lib": ["ESNext"],
13 | "module": "ESNext",
14 | "moduleResolution": "Bundler",
15 | "noEmit": true,
16 | "noFallthroughCasesInSwitch": true,
17 | "noImplicitReturns": true,
18 | "noImplicitUseStrict": false,
19 | "noStrictGenericChecks": false,
20 | "noUncheckedIndexedAccess": true,
21 | "noUnusedLocals": true,
22 | "noUnusedParameters": true,
23 | "resolveJsonModule": true,
24 | "skipLibCheck": true,
25 | "strict": true,
26 | "target": "ESNext",
27 | "verbatimModuleSyntax": true
28 | },
29 | "exclude": ["docs", "lib"]
30 | }
31 |
--------------------------------------------------------------------------------
/docs/src/theme/TOC/index.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import TOCItems from '@theme/TOCItems';
3 | import type { Props } from '@theme/TOC';
4 | import { PremiumSupport } from '@site/src/theme/components/PremiumSupport/PremiumSupport';
5 |
6 | import styles from './styles.module.css';
7 |
8 | // Using a custom className
9 | // This prevents TOCInline/TOCCollapsible getting highlighted by mistake
10 | const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
11 | const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
12 |
13 | export default function TOC({ className, ...props }: Props): JSX.Element {
14 | return (
15 |
16 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/docs/sidebars.ts:
--------------------------------------------------------------------------------
1 | import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
2 |
3 | const sidebars: SidebarsConfig = {
4 | docsSidebar: [
5 | 'intro',
6 | 'installation',
7 | {
8 | type: 'category',
9 | label: 'API',
10 | collapsed: false,
11 | link: {
12 | type: 'generated-index',
13 | },
14 | items: [
15 | {
16 | type: 'doc',
17 | id: 'api/properties',
18 | label: 'Properties',
19 | },
20 | {
21 | type: 'doc',
22 | id: 'api/events',
23 | label: 'Events',
24 | },
25 | {
26 | type: 'doc',
27 | id: 'api/methods',
28 | label: 'Methods',
29 | },
30 | {
31 | type: 'doc',
32 | id: 'api/styles',
33 | label: 'Styles',
34 | },
35 | ],
36 | },
37 | ],
38 | };
39 |
40 | export default sidebars;
41 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Website
2 |
3 | This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
4 |
5 | ### Installation
6 |
7 | ```
8 | $ yarn
9 | ```
10 |
11 | ### Local Development
12 |
13 | ```
14 | $ yarn start
15 | ```
16 |
17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18 |
19 | ### Build
20 |
21 | ```
22 | $ yarn build
23 | ```
24 |
25 | This command generates static content into the `build` directory and can be served using any static contents hosting service.
26 |
27 | ### Deployment
28 |
29 | Using SSH:
30 |
31 | ```
32 | $ USE_SSH=true yarn deploy
33 | ```
34 |
35 | Not using SSH:
36 |
37 | ```
38 | $ GIT_USER=
15 | 🎥
16 |
17 | {siteConfig.title}
18 |
19 |
32 |
20 | {' component for React Native with
21 | controls that uses react-native-video under the hood
22 |
24 |
28 | Get Started
29 |
30 |
31 | react-native-video foundation, this
29 | library enhances functionality and reliability, while also giving you
30 | the flexibility to extend it further as needed.
31 |
32 | ),
33 | },
34 | {
35 | title: 'Easy to Use',
36 | Svg: require('@site/static/img/easy-to-use.svg').default,
37 | description: (
38 | <>
39 | react-native-video-player makes video integration simple with custom
40 | controls and support for all react-native-video props,
41 | letting you easily switch your existing Video components.
42 |
43 | ),
44 | },
45 | ];
46 |
47 | function Feature({ title, Svg, description }: FeatureItem) {
48 | return (
49 |
50 |
58 | );
59 | }
60 |
61 | export default function HomepageFeatures(): JSX.Element {
62 | return (
63 |
51 |
52 |
53 |
54 | {title}
55 |
57 | {description}
56 |
65 |
71 |
66 | {FeatureList.map((props, idx) => (
67 |
70 |
6 |
9 |
10 |
11 | ## Documentation
12 | documentation is available at [docs.thewidlarzgroup.com/react-native-video-player/](https://docs.thewidlarzgroup.com/react-native-video-player/)
13 |
14 | ## Installation
15 |
16 | ```
17 | yarn add react-native-video-player react-native-video
18 | ```
19 |
20 | or
21 | ```
22 | npm install --save react-native-video-player react-native-video
23 | ```
24 |
25 | Then, install pods
26 | ```
27 | cd ios
28 | pod install
29 | ```
30 |
31 | ## Example
32 |
33 | ```tsx
34 | import VideoPlayer, { type VideoPlayerRef } from 'react-native-video-player';
35 |
36 | const playerRef = useRef61 | 📱 react-native-video-player is provided as it is. For enterprise support or other business inquiries, please contact us 🤝. We can help you with the integration, customization and maintenance. We are providing both free and commercial support for this project. let's build something awesome together! 🚀 62 |
63 | 64 |
68 |