react-native-simple-image-viewer v0.4.2

한국어 | English

react-native-simple-image-viewer

• Simple Image modal Component.
• Using react-native-reanimated, react-native-gesture-handler, react-native-modal and react-native-fast-image dependencies.
• Support Pan / Pinch / Rotate gesture.
• Double Tap to default size.

Single image

Multiple images

Installation

• 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 to end of array
  ],
}

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

   project.ext.react = [
      enableHermes: true  // <- here | clean and rebuild if changing
  ]

3. 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

    };
  ...

4. Rebuild

  c:\your-project-name\android\gradlew clean
  c:\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!()
  ...

2. 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}
        />
    </View>
  );

multiple images

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

Properties

Changelog

0.4

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

0.3.2

• fixed minor errors

0.3.1

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

0.2.3

• fixed 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.

Contributing

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

License

MIT