@team-devmonster/react-native-img-viewer
v1.0.6
Published
This project is part of the `react-module`&`react-native-module` projects, that integrate `react`&`react-native` by the devmonster team.
Downloads
8
Readme
@team-devmonster/react-native-img-viewer
This is react-native simple image viewer. You can edit bottom close button style whatever you want to.
author: devmonster
We are always looking for investment or assistance. hompage: https://devmonster.co.kr email: [email protected]
items
- [o] [ImgViewer]
Getting started
install prev libraries
$ npm install react-native-safe-area-context react-native-reanimated react-native-gesture-handler
install @team-devmonster/react-native-img-viewer
$ npm install @team-devmonster/react-native-tags@latest @team-devmonster/react-native-img-viewer@latest
Examples
Easy. Too Easy.
usage
// App.theme.tsx => You can use any file name :)
import React, { useState } from "react";
import { ImgViewer } from '@team-devmonster/react-native-img-viewer';
export const AnyComponent = () => {
const [visible, setVisible] = useState(false);
return (
<ImgViewer
visible={visible}
onRequestClose={() => {
setVisible(false);
}}
src={'https://anything'}
closeText="close"
closeButtonContainerStyle={{ backgroundColor: '#FF6420' }}
closeButtonStyle={{ height: 44, color: '#ffffff' backgroundColor: '#FF6420' }}
/>
)
/** or */
return (
<ImgViewer
visible={visible}
onRequestClose={() => {
setVisible(false);
}}
src={['https://anything','https://anything','https://anything','https://anything']}
startIndex={1}
closeText="close"
closeButtonContainerStyle={{ backgroundColor: '#FF6420' }}
closeButtonStyle={{ height: 44, color: '#ffffff' backgroundColor: '#FF6420' }}
/>
)
}