# @creationdose/react-native-web-video

> Video component for react native project that is useful to render `` from [react-native-video](https://github.com/react-native-video/react-native-video) on web browser.

Latest version **1.0.2** (published 2023-12-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @creationdose/react-native-web-video
pnpm add @creationdose/react-native-web-video
yarn add @creationdose/react-native-web-video
bun add @creationdose/react-native-web-video
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-12-04 |
| First published | 2022-12-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gscripts, erikamolino, raffb |

## Links

- npm: https://www.npmjs.com/package/@creationdose/react-native-web-video
- Repository: https://github.com/CreationDose/react-native-web-video
- Homepage: https://github.com/CreationDose/react-native-web-video#readme
- Issues: https://github.com/CreationDose/react-native-web-video/issues
- npm.io page: https://npm.io/package/@creationdose/react-native-web-video

## Recent versions

- 1.0.2 (latest) — 2023-12-04
- 1.0.0-dev.3 (dev) — 2023-02-20
- 1.0.1 — 2023-02-20
- 1.0.0-dev.2 — 2022-12-30
- 1.0.0-dev.1 — 2022-12-29

## README

# React Native Web Video

> Video component for react native project that is useful to render `<Video>` from [react-native-video](https://github.com/react-native-video/react-native-video) on web browser.

## Getting started

    $ npm i @creationdose/react-native-web-video

Alias the package in your webpack config:

    resolve: {
	    alias: {
	       'react-native': 'react-native-web',
		    ...
	       'react-native-video': '@creationdose/react-native-web-video',
	    }
	}

### Use Case
This library has actually been integrated and tested in a project that use [Storybook for React Native](https://github.com/storybookjs/react-native).
If your use case it's the same, for integrate it in you storybook project you have to add the [storybook/addon-react-native-web](https://storybook.js.org/addons/@storybook/addon-react-native-web#adding-babel-plugins) .
After that you need to alias and traspile the package in the main.js config file from the .storybook folder. Add in addons key this:

 

    addons: [
        ...
        { 
            name:  '@storybook/addon-react-native-web',
            options: {
                modulesToTranspile: ['@creationdose/react-native-web-video'],
                modulesToAlias: {
                    'react-native-video':  '@creationdose/react-native-web-video',
                },
            },
        },
	]

## Roadmap
 - [x] Initialization react-native-video component on react-native-web with main props
 - [ ] Enhanced docs template from [react-native-web-community](https://github.com/react-native-web-community/example-new-library)
 - [ ] Map other props of [react-native-video](https://github.com/react-native-video/react-native-video)


## Contributing
PRs are welcome!

Actually the only `<video>` element's attributes mapped to work allineate with RN-Video component are:

 - src
 - style
 - loop
 - onError
 - onLoadedData
 - onLoadStart
 - autoPlay
 - muted

---
_Source: https://npm.io/package/@creationdose/react-native-web-video · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._