Skip to content

Commit

Permalink
docs: Update docs (#403)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dev-yakuza
dev-yakuza authored Oct 20, 2024
1 parent c336ddc commit 6ed24e1
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 35 deletions.
8 changes: 4 additions & 4 deletions Example/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"react": "18.3.1",
"react-native": "0.75.4",
"react-native-fast-image": "^8.6.3",
"react-native-image-modal": "^3.0.4",
"react-native-image-modal": "^3.0.12",
"react-native-safe-area-context": "^4.10.7",
"react-native-screens": "^3.32.0"
},
Expand Down
60 changes: 30 additions & 30 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,36 +93,36 @@ import FastImage, {ImageStyle, ResizeMode} from 'react-native-fast-image';
You can use All props of React Native Image for the original image(not full size modal image).
Below are `react-native-image-modal` specific properties.

| Prop | required | Type | Description |
| ------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| renderToHardwareTextureAndroid | X | boolean | It is for Android animation. Default is `true`. If you don't want to use Hardware Texture on Android, set `false`. |
| isTranslucent | X | boolean | if you use `translucent` status bar in android, set `true` to prevent wrong position animation. (In Expo, `translucent` default is `true`) |
| swipeToDismiss | X | boolean | set `true` to swipe to dismiss (`default: true`) |
| imageBackgroundColor | X | string | background color for `the original image` |
| overlayBackgroundColor | X | string | background color for `the full size modal`(`default: #000000`) |
| (Deprecated) modalRef | X | ImageDetail | You can use this Ref for closing the Modal programmatically. (This pros is deprecated. Please use the ref props.) |
| ref | X | ReactNativeImageModal | You can use this Ref for opening or closing the Modal programmatically. |
| disabled | X | boolean | disable opening the modal |
| modalImageStyle | X | ImageStyle | Image Style in Modal |
| resizeMode | X | ResizeMode('contain', 'cover', 'stretch','center') | Image resizeMode |
| modalImageResizeMode | X | ResizeMode('contain', 'cover', 'stretch','center') | Image resizeMode for modal image. If it is not passed, it will follow the `resizeMode`. |
| parentLayout | X | { x: number; y: number; width: number; height: number; } | Parent layout of image modal to hide overflow of image. |
| animationDuration | X | number | Duration of animation. Default is 100ms. |
| hideCloseButton | X | boolean | hide hide the default close button |
| onLongPressOriginImage | X | () => void | long press event callback for `the original image` |
| renderHeader | X | (close: () => void) => ReactNode | You can customize the header of `the full size modal` with react native components |
| renderFooter | X | (close: () => void) => ReactNode | You can customize the footer of `the full size modal` with react native components |
| renderImageComponent | X | ({ source: ImageSourcePropType, style?: StyleProp<ImageStyle>, resizeMode?: ImageResizeMode}) => ReactNode | You can customize the footer of `the full size modal` with react native components |
| isRTL | X | boolean | You can use this library with right-to-left-devices. ([#35](https://github.com/dev-yakuza/react-native-image-modal/issues/35)) |
| onTap | X | (eventParams: {locationX: number; locationY: number; pageX: number; pageY: number;}) => void | one tap event callback for `the full size modal` |
| onDoubleTap | X | () => void | double tap event callback for `the full size modal` |
| onLongPress | X | () => void | long press event callback for `the full size modal` |
| onOpen | X | () => void | open event callback for `the full size modal` |
| didOpen | X | () => void | event callback after open for `the full size modal` |
| onMove | X | (position: {type: string; positionX: number; positionY: number; scale: number; zoomCurrentDistance: number;}) => void | move event callback for `the full size modal` |
| responderRelease | X | (vx?: number, scale?: number) => void | responder release event callback for `the full size modal` |
| willClose | X | () => void | event callback before close for `the full size modal` |
| onClose | X | () => void | close event callback for `the full size modal` |
| Prop | required | Type | Description |
| ------------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| renderToHardwareTextureAndroid | X | boolean | It is for Android animation. Default is `true`. If you don't want to use Hardware Texture on Android, set `false`. |
| isTranslucent | X | boolean | if you use `translucent` status bar in android, set `true` to prevent wrong position animation. (In Expo, `translucent` default is `true`) |
| swipeToDismiss | X | boolean | set `true` to swipe to dismiss (`default: true`) |
| imageBackgroundColor | X | string | background color for `the original image` |
| overlayBackgroundColor | X | string | background color for `the full size modal`(`default: #000000`) |
| (Deprecated) modalRef | X | ImageDetail | You can use this Ref for closing the Modal programmatically. (This pros is deprecated. Please use the ref props.) |
| ref | X | ReactNativeImageModal | You can use this Ref for opening or closing the Modal programmatically. |
| disabled | X | boolean | disable opening the modal |
| modalImageStyle | X | ImageStyle | Image Style in Modal |
| resizeMode | X | ResizeMode('contain', 'cover', 'stretch','center') | Image resizeMode |
| modalImageResizeMode | X | ResizeMode('contain', 'cover', 'stretch','center') | Image resizeMode for modal image. If it is not passed, it will follow the `resizeMode`. |
| parentLayout | X | { x: number; y: number; width: number; height: number; } | Parent layout of image modal to hide overflow of image. |
| animationDuration | X | number | Duration of animation. Default is 100ms. |
| hideCloseButton | X | boolean | hide hide the default close button |
| onLongPressOriginImage | X | () => void | long press event callback for `the original image` |
| renderHeader | X | (close: () => void) => ReactNode | You can customize the header of `the full size modal` with react native components |
| renderFooter | X | (close: () => void) => ReactNode | You can customize the footer of `the full size modal` with react native components |
| renderImageComponent | X | ({ source: ImageSourcePropType, style?: StyleProp<ImageStyle>, resizeMode?: ImageResizeMode, isModalOpen: boolean}) => ReactNode | You can customize the footer of `the full size modal` with react native components |
| isRTL | X | boolean | You can use this library with right-to-left-devices. ([#35](https://github.com/dev-yakuza/react-native-image-modal/issues/35)) |
| onTap | X | (eventParams: {locationX: number; locationY: number; pageX: number; pageY: number;}) => void | one tap event callback for `the full size modal` |
| onDoubleTap | X | () => void | double tap event callback for `the full size modal` |
| onLongPress | X | () => void | long press event callback for `the full size modal` |
| onOpen | X | () => void | open event callback for `the full size modal` |
| didOpen | X | () => void | event callback after open for `the full size modal` |
| onMove | X | (position: {type: string; positionX: number; positionY: number; scale: number; zoomCurrentDistance: number;}) => void | move event callback for `the full size modal` |
| responderRelease | X | (vx?: number, scale?: number) => void | responder release event callback for `the full size modal` |
| willClose | X | () => void | event callback before close for `the full size modal` |
| onClose | X | () => void | close event callback for `the full size modal` |

## Demo

Expand Down

0 comments on commit 6ed24e1

Please sign in to comment.