https://github.com/paraboly/react-native-video-modal
Fully customizable Video Modal for React Native via Paraboly.
https://github.com/paraboly/react-native-video-modal
Last synced: over 1 year ago
JSON representation
Fully customizable Video Modal for React Native via Paraboly.
- Host: GitHub
- URL: https://github.com/paraboly/react-native-video-modal
- Owner: Paraboly
- Created: 2019-05-27T12:52:41.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T04:27:08.000Z (over 3 years ago)
- Last Synced: 2025-03-21T21:11:55.987Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://www.freakycoder.com
- Size: 5.55 MB
- Stars: 25
- Watchers: 2
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Fully customizable, loading style implemented Video Modal for React Native via Paraboly.
[](https://www.npmjs.com/package/@paraboly/react-native-video-modal)
[](https://www.npmjs.org/package/@paraboly/react-native-video-modal)
[](https://opensource.org/licenses/MIT)
## Video Modal
## Installation
Add the dependency:
```ruby
npm i @paraboly/react-native-card
```
## Peer Dependencies
##### IMPORTANT! You need install them.
```
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-video": ">= 4.4.1",
"react-native-spinkit": ">= 1.3.0",
"react-native-vector-icons": ">= 6.x.x",
"react-native-material-ripple": ">= 0.8.0",
"@paraboly/react-native-modal-box": ">= 0.0.1",
"react-native-dynamic-vector-icons": ">= x.x.x",
"@freakycoder/react-native-helpers": ">= 0.0.12",
"react-native-floating-action-button": ">= 0.1.14",
"@freakycoder/react-native-custom-text": ">= 0.0.12"
```
## Basic Usage
```js
```
### Example Application
- [check the code](example/App.js), and yes! :) all of the images, screenshots are directly taken
from the this example. Of course, you can simply clone the project and run the example on your own environment.
### Configuration - Props
| Property | Type | Default | Description |
| ----------------------- | :--------: | :-----------------------------: | ------------------------------------------------------------------------------------ |
| title | string | "" | use this to change the title |
| source | source | uri | use this to set your own source for the Video Modal |
| isOpen | boolean | true | change the automatically open modal |
| easing | easing | Easing.elastic(1) | change the easing animation option |
| refName | string | null | set ref name for the modal |
| onOpened | function | null | set your own logic for the modal onOpen function |
| onClosed | function | null | set your own logic for the modal onClose function |
| backdrop | boolean | true | change the backdrop visibility |
| coverScreen | boolean | false | change it for cover the screen for modal |
| backgroundColor | color | "black" | change the modal's background color |
| textColor | color | "white" | change the title's color |
| fontFamily | FontFamily | default | set your own FontFamily for the title |
| buttonSize | number | 40 | change FAB buttons' size |
| resizeMode | string | "contain" | change the video resize mode |
| modalWidth | number | ScreenWidth * 0.9 | change the modal's width |
| modalHeight | number | 350 | change the modal's height |
| modalBottom | number | 18 | change title's font size |
| shadowColor | color | "#000" | change main video modal's shadow color |
| shadowStyle | style | check the code | set your own shadow style for the main video modal |
| titleStyle | style | { bottom: ScreenHeight * 0.55 } | IMPORANT! it should be style to give it as bottom adjustment |
| heartOnPress | function | null | set your own logic for heart button |
| fullScreenOnPress | function | Open the fullscreen video | set your own logic for fullscreen button |
| disableButtons | boolean | false | disable the buttons |
| buttonContainerStyle | style | check the code | set your own button container style |
| buttonsComponent | component | check the code | set your own button and its logic with your own component |
| videoPlayerStyle | style | check the code | set your own style for the video player |
| heartIconComponent | component | FAB | set your own style for button component instead of heart icon component |
| fullScreenIconComponent | component | FAB | set your own style for button component instead of fullscreen icon component |
| loadingSize | number | 40 | change the loading icon's size |
| loadingType | string | "FadingCircleAlt" | change the type of loading icon |
| loadingColor | color | "white" | change the color of loading icon |
| loadingIsVisible | boolean | business logic (check the code) | if you do not want to use default logic, you can change this prop to implement yours |
| customVideoComponent | component | (check the code) | you can implement your own video component as well |
### List of loading available types
- CircleFlip
- Bounce
- Wave
- WanderingCubes
- Pulse
- ChasingDots
- ThreeBounce
- Circle
- 9CubeGrid
- WordPress (IOS only)
- FadingCircle
- FadingCircleAlt
- Arc (IOS only)
- ArcAlt (IOS only)
## More Information about Loading SpinKit
### [React Native Spinkit](https://github.com/maxs15/react-native-spinkit)
## Author
FreakyCoder, kurayogun@gmail.com | kuray.ogun@paraboly.com
## License
Paraboly React Native Video Modal Library is available under the MIT license. See the LICENSE file for more info.