
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-native-image-preview-reanimated
Advanced tools
React native image previewer made with Reanimated RNGH
React native image previewer made with Reanimated RNGH
npm install react-native-image-preview-reanimated
or with Yarn
yarn add react-native-image-preview-reanimated
If you have already installed Reanimated and React native Gesture Handler you're already setup, else follow these steps
1- Install the packages
Using npm:
npm install react-native-reanimated react-native-gesture-handler
Using yarn:
yarn add react-native-reanimated react-native-gesture-handler
2- Install the pods in the ios project
cd ios && pod install
3- Make sure to add Reanimated babel plugin to babel.config.js
PS: make sure to put it last
module.exports = {
...
plugins: [
...
'react-native-reanimated/plugin',
],
};
4- Import react-native-gesture-handler in your index.js file
PS: This is necessary as you may have unexpected crashes/weird behaviors on production
import 'react-native-gesture-handler';
import { PreviewModal } from 'react-native-image-preview';
// ...
<PreviewModal onCloseModal={onCloseModal} isModalOpen={isModalOpen} images={[]}/>
import * as React from 'react';
import { useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { PreviewModal } from 'react-native-image-preview';
export default function App() {
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
return (
<View style={styles.container}>
<Button title={'Open Modal'} onPress={() => setIsModalOpen(true)} />
<PreviewModal
onCloseModal={() => {
setIsModalOpen(false);
}}
isModalOpen={isModalOpen}
images={[
'https://sample-videos.com/img/Sample-jpg-image-30mb.jpg',
'https://img.freepik.com/photos-gratuite/peinture-numerique-montagne-arbre-colore-au-premier-plan_1340-25699.jpg?size=626&ext=jpg&ga=GA1.1.1826414947.1699142400&semt=ais',
'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
'https://theintercept.com/wp-content/uploads/2019/01/GettyImages-1077343584-1547140810-e1547141434550.jpg?fit=5000%2C2500',
'https://google.com',
'wys',
]}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
});
Props | Default | Type | Description |
---|---|---|---|
images | [] | ImageSourcePropType[] | Array of images to be shown |
isModalOpen | false | boolean | A boolean defining if the modal is open or not |
onCloseModal | ()=> {} | Function | executes a callback closing the modal |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library
FAQs
React native image previewer made with Reanimated RNGH
The npm package react-native-image-preview-reanimated receives a total of 89 weekly downloads. As such, react-native-image-preview-reanimated popularity was classified as not popular.
We found that react-native-image-preview-reanimated demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.