react-native-simple-image-viewer

한국어 | English

react-native-simple-image-viewer

• 간단한 이미지 모달 컴포넌트 입니다.
• react-native-reanimated, react-native-gesture-handler, react-native-modal, react-native-fast-image를 사용하여 구현 하였습니다.
• pan, pinch, rotate 제스쳐를 지원하여 이미지를 확대, 축소, 회전하여 볼 수 있습니다.
• 더블 탭으로 기본크기로 복귀 합니다.

single image

---

multiple images

Installation

with Dependencies

• npm

 npm install react-native-modal react-native-reanimated react-native-gesture-handler react-native-simple-image-viewer

• yarn

yarn add react-native-modal react-native-reanimated react-native-gesture-handler react-native-simple-image-viewer

Android

| Setting for react-native-reanimated

1. your-project-name/babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ...
    ['react-native-reanimated/plugin'] //<- add, end of array
  ],
}

1. your-project-name/android/app/build.gradle

   project.ext.react = [
      enableHermes: true  // <- false to true
  ]

1. your-project-name/android/app/src/main/MainApplication.java

   import com.facebook.react.bridge.JSIModulePackage;          // <- add
   import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override                                          // <- add
      protected JSIModulePackage getJSIModulePackage() { // <- add
        return new ReanimatedJSIModulePackage();         // <- add
      }                                                  // <- add

    };
  ...

1. Rebuild

  X:\your-project-name\android\gradlew clean
  X:\your-project-name\npx react-native run-android

iOS

1. your-project-name/ios/Podfile

  ...
  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => true # <- false to true
  )

  # this is option
  # use_flipper!()
  ...

1. Rebuild

  c:\your-project-name\ios\pod cache clean --all
  c:\your-project-name\ios\pod deintegrate
  c:\your-project-name\ios\pod install
  c:\your-project-name\npm react-native run-ios

Usage

single image

import { SimpleImageViewer } from "react-native-simple-image-viewer";
  //...
  const [isVisible, setIsVisible] = useState<boolean>(false);
  return (
    <View style={{flex:1}}>
        <Button
          title={'show'}
          style={{width: '100%', height: 80}}
          onPress={()=>setIsVisible(prevState => !prevState)} />
        <SimpleImageViewer
          imageUri={{ uri: 'https://via.placeholder.com/2048/18A6F6' }}
          isVisible={isVisible}
        />
    </View>
  );

multiple images

      <SimpleImageViewer
        perPage={itemsPerPage}
        imageUri={defaultImage}
        images={defaultImages}
        isVisible={showHide}
        onClose={() => setShowHide(false)}
        bgColor={'#333333'}
      />

Properties

Name	Parameter Type	Required	Default	Description
isVisible	Boolean	O	false	show / hide modal
imageUri	Object : { uri : string , title? : string }	O	https://via.placeholder.com/2048/18A6F6	jsonPlaceHolder image url
images?	Array	X	[ ]	Array of imageUri
bgColor?	String	X	#333333
onClose?	Function : (state:boolean) => void	X	false	return false when turn off
viewMode	'single','multi'	X	'single'
perPage	number	X	3
itemMargin	number	X	auto
naviPosition	'top', 'bottom'	X
leftHanded	boolean	X	false
selectedIndex	number	X	0	Selected array of imageUri object's index
showTitle	boolean	X	false	Show selected imageUri object's title

Changelog

0.2.1

• Added react-native-fast-image dependency for list performance.
• When image not found or error, show Alternative component.

0.2.0

• Added horizontal scroll list bar for multi-image support
• A complementary color for the close-button background and item border are automatically generated by the background color.
• The item size of the list is automatically changed according to "perPage" props.
• Example update.

---

known issues

• The Item of list component show slow or laggy when open modal.

---

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT