React-native-media-viewing NPM

react-native-media-viewing

Media viewing inherit from react-native-image-viewing library.

React Native modal component for viewing images and videos as a sliding gallery.

Installation

yarn add react-native-media-viewing

npm install --save react-native-media-viewing

Usage

import MediaViewing from "react-native-media-viewing";

const media = [
  {
    uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4",
  },
  {
    uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
  },
  {
    uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
  },
];

const [visible, setIsVisible] = useState(false);

<MediaViewing
  media={media}
  imageIndex={0}
  visible={visible}
  onRequestClose={() => setIsVisible(false)}
/>;

See Example

Props

Prop name	Description	Type	Required
`images`	Array of images to display	MediaSource[]	true
`keyExtractor`	Uniqely identifying each image	(mediaSrc: MediaSource, index: number) => string	false
`imageIndex`	Current index of image to display	number	true
`visible`	Is modal shown or not	boolean	true
`onRequestClose`	Function called to close the modal	function	true
`onImageIndexChange`	Function called when image index has been changed	function	false
`onLongPress`	Function called when image long pressed	function (event: GestureResponderEvent, image: MediaSource)	false
`delayLongPress`	Delay in ms, before onLongPress is called: default `800`	number	false
`animationType`	Animation modal presented with: default `fade`	`none`, `fade`, `slide`	false
`presentationStyle`	Modal presentation style: default: `fullScreen` Android: Use `overFullScreen` to hide StatusBar	`fullScreen`, `pageSheet`, `formSheet`, `overFullScreen`	false
`backgroundColor`	Background color of the modal in HEX (#000000EE)	string	false
`swipeToCloseEnabled`	Close modal with swipe up or down: default `true`	boolean	false
`doubleTapToZoomEnabled`	Zoom image by double tap on it: default `true`	boolean	false
`HeaderComponent`	Header component, gets current `imageIndex` as a prop	component, function	false
`FooterComponent`	Footer component, gets current `imageIndex` as a prop	component, function	false

type MediaSource = ImageURISource | ImageRequireSource

Contributing

See the repository to learn how to contribute to the repository and the development workflow.

License

MIT

react react-native image gallery image-gallery image-viewer video-viewer video-gallery video

react-native-video-controls

@infinitebrahmanuniverse/nolb-react-native-me @everything-registry/sub-chunk-2583

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago