@0-a-e/react-native-media-viewing NPM

react-native-media-viewing

react-native-image-viewingのフォークです.動画再生に対応.音声にも後で対応するかも. Expo非対応

React Native modal component for viewing image and Video as a sliding gallery.

🔥Pinch zoom for both iOS and Android
🔥Double tap to zoom for both iOS and Android
🔥Supports swipe-to-close animation
🔥Custom header and footer components
🔥Uses VirtualizedList to optimize image loading and rendering

Installation

yarn add react-native-image-viewing

npm install --save react-native-image-viewing

Usage

import MediaView from "@0-a-e/react-native-media-viewing";

const medias = [
  {
    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);

<MediaView
  mediaSource={medias}
  mediaIndex={0}
  visible={visible}
  onRequestClose={() => setIsVisible(false)}
  unknownErrorMessage={"不明なエラー"}
  unsupportedFiletypeMessage={"対応していないファイル形式です"}
  errorMessage={"エラー"}
  noFileMessage={'表示可能なメディアがありません。'}
/>;

See Example

Props

Prop name	Description	Type	Required
`medias`	Array of medias to display	ImageSource[]	true
`keyExtractor`	Uniqely identifying each image	(imageSrc: ImageSource, index: number) => string	false
`mediaIndex`	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: ImageSource)	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
`unknownErrorMessage`	unknown Error Message.	string	false
`unsupportedFiletypeMessage`	Unsupported file Message.	string	false
`errorMessage`	error Message.	string	false
`noFileMessage`	no file Message.	string	false