Paraboly React Native Video Modal

Fully customizable, loading style implemented Video Modal for React Native via Paraboly.

npm version
npm
License: MIT

Video Modal

Paraboly React Native Video Modal

Installation

Add the dependency:

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

<VideoModal title="Test Video Stream" source={source} />

Example Application

  • check the code, 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

PropertyTypeDefaultDescription
titlestring“”use this to change the title
sourcesourceuriuse this to set your own source for the Video Modal
isOpenbooleantruechange the automatically open modal
easingeasingEasing.elastic(1)change the easing animation option
refNamestringnullset ref name for the modal
onOpenedfunctionnullset your own logic for the modal onOpen function
onClosedfunctionnullset your own logic for the modal onClose function
backdropbooleantruechange the backdrop visibility
coverScreenbooleanfalsechange it for cover the screen for modal
backgroundColorcolor“black”change the modal’s background color
textColorcolor“white”change the title’s color
fontFamilyFontFamilydefaultset your own FontFamily for the title
buttonSizenumber40change FAB buttons’ size
resizeModestring“contain”change the video resize mode
modalWidthnumberScreenWidth * 0.9change the modal’s width
modalHeightnumber350change the modal’s height
modalBottomnumber18change title’s font size
shadowColorcolor“#000”change main video modal’s shadow color
shadowStylestylecheck the codeset your own shadow style for the main video modal
titleStylestyle{ bottom: ScreenHeight * 0.55 }IMPORANT! it should be style to give it as bottom adjustment
heartOnPressfunctionnullset your own logic for heart button
fullScreenOnPressfunctionOpen the fullscreen videoset your own logic for fullscreen button
disableButtonsbooleanfalsedisable the buttons
buttonContainerStylestylecheck the codeset your own button container style
buttonsComponentcomponentcheck the codeset your own button and its logic with your own component
videoPlayerStylestylecheck the codeset your own style for the video player
heartIconComponentcomponentFABset your own style for button component instead of heart icon component
fullScreenIconComponentcomponentFABset your own style for button component instead of fullscreen icon component
loadingSizenumber40change the loading icon’s size
loadingTypestring“FadingCircleAlt”change the type of loading icon
loadingColorcolor“white”change the color of loading icon
loadingIsVisiblebooleanbusiness logic (check the code)if you do not want to use default logic, you can change this prop to implement yours
customVideoComponentcomponent(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

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.