Back to packageRELEASE DETAILS

99999.114514.5

npm

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

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

Published26 Dec 2022

Direct dependencies11

Transitive dependenciesNot calculated

README

Current package documentation

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

Contributing

To start contributing clone this repo and then run inside react-native-media-viewing folder:

yarn

Then go inside example folder and run:

yarn & yarn start

This will start packager for expo so you can change /src/ImageViewing and see changes in expo example app.

License(ライセンス)

MIT

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 13

Native requirements

11 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
@react-native-community/slider Environment { "local_name": "@react-native-community/slider", "alias": false, "peer_metadata": null }	`^4.4.0`	runtime
lodash Environment { "local_name": "lodash", "alias": false, "peer_metadata": null }	`^4.16.4`	runtime
react-native-video Environment { "local_name": "react-native-video", "alias": false, "peer_metadata": null }	`^5.2.1`	runtime
@babel/runtime Environment { "local_name": "@babel/runtime", "alias": false, "peer_metadata": null }	`7.7.4`	development
@types/react Environment { "local_name": "@types/react", "alias": false, "peer_metadata": null }	`16.9.13`	development
@types/react-native Environment { "local_name": "@types/react-native", "alias": false, "peer_metadata": null }	`0.60.23`	development
copy-webpack-plugin Environment { "local_name": "copy-webpack-plugin", "alias": false, "peer_metadata": null }	`^11.0.0`	development
copyfiles Environment { "local_name": "copyfiles", "alias": false, "peer_metadata": null }	`^2.4.1`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`18.2.0`	development
react-native Environment { "local_name": "react-native", "alias": false, "peer_metadata": null }	`0.61.5`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`3.7.2`	development
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`>=18.2.0`	peer
react-native Environment { "local_name": "react-native", "alias": false, "peer_metadata": null }	`>=0.61.3`	peer

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "integrity": "sha512-npQVCbvQ/yY/YYkn93T8JGydW0ANr9le5nomWOY39YyVee+jlpdIP/ugwvMS7k8jwv8G+pM/L0yu/PC2lBYL0A==",
  "shasum": "8bbca41bf8c2c2d0d6b5ffd75ced84fcfabd4b2a",
  "tarball": "https://registry.npmjs.org/@0-a-e/react-native-media-viewing/-/react-native-media-viewing-99999.114514.5.tgz",
  "fileCount": 80,
  "unpackedSize": 243430,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEQCIEZamkQnWqXJI2wQJXz+baQPojiZ0hf3ruHZTL30KUPIAiAE37INiRTJGH1oO0GnbZ2EK/yqW6C3faYTUmMf0HzmQw=="
    }
  ],
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqbjtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraDQ/+MG5dfsn//VgzHOhRKReYs/puAh8aAgJnm6jkcevHYhQjvx87\r\nWPPLApQX2TyPQJtpnLhcrbAVF9mLB+Kw7/QitiNtanznWraNAMNngj6Vjtcq\r\n1pQopcyRaVBuzyyNKzEiBtUmM138kpyePozVzekjN96WAfY6HjiS8WWuBqZS\r\n9QCM26Hdma90N77zk3YNQ38LpeNPfUlrkcIYy6As+X76GWDv/lex8LQprBVR\r\nDXZM2R7acspDVlOiwMwyacyfrX/T4uL33/SaUJhxIHwQOBcePLjHUXOoWhfM\r\n8oaNHJTMbC6qaYYojePLPoJCyKnW1IFqFtuixcK/RPOre2zFt4OfD8RwoQRF\r\njgD6o4g9hmlCHhMchmJOV8qyaMpbmGvNtAQqKkyKrfONKcQqC+RwUPrwxSHO\r\n9NEapTOhn1sSVXZeKAhEXUcx+/LT0HDTBXx5nebcgIbaKd8u/JJGoPiNl8W1\r\nsqf4dI4HolIUYZYiRZLK/SticMu7JCw4AvPOZStinr6rKPoZStrzeAiQ2v+y\r\nWeHI6J0PEasjqU6NfcDDQvg3I0s63h8f8WBOZeGppYaK9BvaPDpcVYAPoymy\r\nqpdZJVFv7RgT8H0lcka99KxEX49P8aSDwR4bajOv0vcVwAbBNwNswsCyMOQ8\r\nOiIRlBWxfMLwG0HXUIPc1dBJK35N1AZ6/7Q=\r\n=4kHC\r\n-----END PGP SIGNATURE-----\r\n"
}

Repository

PENDING

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

Shared repository data · GitHub

License detected in repository: Not collected

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 21:53 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:12c1b2efd3c9794c5eff9c5a4f568fa6ff98f5ec2c9712aa5c5e40daa427e7ea

Other collected versions

99999.114514.627 Dec 99999.114514.423 Dec 99999.114514.322 Dec 99999.114514.222 Dec 99999.114514.112 Dec 1.0.012 Dec View all collected versions →