
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
react-native-images-preview
Advanced tools
A React Native animated custom images preview component.
Introducing an image preview built with pure JavaScript and leveraging React Native Reanimated and GesturesHandler, enabling full-screen image previewing and zooming via double-tap and pinch gestures for effortless integration into applications.
Our library is designed to be highly customizable, allowing developers to tailor it to their specific needs, such as changing the colors, styles, and other visual elements. Whether you're an Android or iOS user, our library is compatible with both platform, guaranteeing optimal performance.
Simple | SwipeDown Close |
---|---|
![]() | ![]() |
DoubleTap Zoom | Pinch Zoom |
---|---|
![]() | ![]() |
Here's how to get started with react-native-images-preview in your React Native project:
Using npm
:
npm install react-native-images-preview react-native-reanimated react-native-gesture-handler
Using yarn
:
yarn add react-native-images-preview react-native-reanimated react-native-gesture-handler
cd ios && pod install
Note: Make sure to add Reanimated's babel plugin to your
babel.config.js
module.exports = {
...
plugins: [
...
'react-native-reanimated/plugin',
],
};
Note: For React Native 0.61 or greater, add react-native-gesture-handler in index.js file.
import 'react-native-gesture-handler';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { ImagePreview } from 'react-native-images-preview';
import { images } from './assets';
const App = () => {
return (
<View style={styles.screen}>
<ImagePreview
imageSource={images.forest}
imageStyle={styles.imageStyle}
/>
</View>
);
};
export default App;
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
imageStyle: {
height: 150,
width: 250,
},
});
Props | Default | Type | Description |
---|---|---|---|
imageSource | - | ImageSourcePropType | Source of image |
imageStyle | - | StyleProp<ImageStyle> | Styling of image |
imageProps | - | ImageProps | Provide image props |
swipeDownCloseEnabled | true | boolean | Enable/Disable swipe down to close modal |
doubleTapZoomEnabled | true | boolean | Enable/Disable double tap to zoom |
pinchZoomEnabled | true | boolean | Enable/Disable pinch to zoom |
renderHeader | - | function | Call back function to render custom header and provide close() in argument |
renderImageLoader | - | function | Call back function to render custom image loader |
errorImageSource | - | ImageSourcePropType | Source of error image |
imageLoaderProps | - | ActivityIndicatorProps | Provide ActivityIndicator props |
A full working example project is here Example
yarn
yarn example ios // For ios
yarn example android // For Android
Support it by joining stargazers for this repository.⭐
For bugs, feature requests, and discussion please use GitHub Issues, GitHub New Feature, GitHub Feedback
We'd love to have you improve this library or fix a problem 💪 Check out our Contributing Guide for ideas on contributing.
FAQs
A React Native animated custom images preview component.
The npm package react-native-images-preview receives a total of 65 weekly downloads. As such, react-native-images-preview popularity was classified as not popular.
We found that react-native-images-preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.