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

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

| 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

Author

FreakyCoder, [email protected] | [email protected]

License

Paraboly React Native Video Modal Library is available under the MIT license. See the LICENSE file for more info.