Skip to content

keyboardshotgun/react-native-simple-image-viewer

Repository files navigation

한국어 | English

react-native-simple-image-viewer

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

platforms react-native react-native-reanimated react-native-gesture-handler react-native-modal react-native-fast-image

single image

preview_single_1


multiple images

preview_multi_3 preview_multi_1 preview_multi_2 error_component

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

Run/Test Example

   * command-line
    x:\yourfolderName\react-native-simple-image-viewer> cd example
    x:\yourfolderName\react-native-simple-image-viewer\example> npm or yarn install
    \example> cd ios && pod install

   * run android
    \example> npx(npm) react-native run-android

   * run ios
    \example> npx(npm) react-native run-ios

Project Settings

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

Optional (Android)

  • Some images are displayed only on iOS ?
  • an error such as out of memory or pool hard cap violation
AndroidManifest.xml

<application
      android:name=".MainApplication"
      ...
      android:largeHeap="true" <-- add
      ...>
  • Release build with proguard
proguard-rules.pro
# Add project specific ProGuard rules here.
...

# react-native-reanimated
-keep class com.swmansion.reanimated.** { *; }
-keep class com.facebook.react.turbomodule.** { *; }

# react-native-fast-image
-keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

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}
          onClose={() => setIsVisible(false)}
        />
    </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 O false return false when turn off
viewMode 'single','multi' X 'single'
perPage number X 3
naviPosition 'top', 'bottom' X - working in progress
leftHanded boolean X false close-button position change
selectedIndex number X 0 Selected array of imageUri object's index
showTitle boolean X false Show/Hide Selected imageUri object's title
itemMargin number X 15 margin between items of list
showPage boolean X false Show/Hide page current and total page number
token string X - string token like jwt
tokenHeader string X 'Bearer' string token header like jwt header
requestMethod string X 'GET'

Changelog

0.4.2

  • fix minor errors

0.4.0

  • Added properties for secured-image. request header is automatically generated if token property existed.

0.3.2

  • fix minor errors

0.3.1

  • Added current / total page info
  • new property (showPage,itemMargin,leftHanded)
  • fix almost minor errors
  • Added new option component for example

0.2.3

  • fix ErrorComponent

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