@team-devmonster/react-native-img-viewer NPM

@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: aldegad@devmonster.co.kr

items

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' }}
    />
  )
}