한국어 | English
- 간단한 이미지 모달 컴포넌트 입니다.
- react-native-reanimated, react-native-gesture-handler, react-native-modal, react-native-fast-image를 사용하여 구현 하였습니다.
- pan, pinch, rotate 제스쳐를 지원하여 이미지를 확대, 축소, 회전하여 볼 수 있습니다.
- 더블 탭으로 기본크기로 복귀 합니다.
single image
multiple images
- 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-
React-native Development Environment? if not Read this and Setting first. (it'll be hard time. sorry.)
-
Download Code Zip and extract or git code.
* 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| Setting for react-native-reanimated
- your-project-name/babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
...
['react-native-reanimated/plugin'] //<- add, end of array
],
}- your-project-name/android/app/build.gradle
project.ext.react = [
enableHermes: true // <- false to true
]- 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
};
...- Rebuild
X:\your-project-name\android\gradlew clean
X:\your-project-name\npx react-native run-android- 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!()
...
- 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- 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 *;
}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>
); <SimpleImageViewer
perPage={itemsPerPage}
imageUri={defaultImage}
images={defaultImages}
isVisible={showHide}
onClose={() => setShowHide(false)}
bgColor={'#333333'}
/>| 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' |
- fix minor errors
- Added properties for secured-image. request header is automatically generated if token property existed.
- fix minor errors
- Added current / total page info
- new property (showPage,itemMargin,leftHanded)
- fix almost minor errors
- Added new option component for example
- fix ErrorComponent
- Added react-native-fast-image dependency for list performance.
- When image not found or error, show Alternative component.
- 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.
- The Item of list component show slow or laggy when open modal.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT