Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mrp/update readme #12

Merged
merged 3 commits into from
Oct 6, 2022
Merged

Mrp/update readme #12

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4d7b5b4
updated readme
mrpmohiburrahman Oct 6, 2022
956a191
update install instruction
mrpmohiburrahman Oct 6, 2022
e9957e2
update supported feature list
mrpmohiburrahman Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 73 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,76 @@
# react-native-before-after
<div style="text-align: center;">
<h1 align="center">React Native Before After</h1>

</div>

## Supported features

- Zoom to scale
- Double tap to scale
- Native iOS feeling (rubber effect, decay animation on pan gesture)
- Fully customizable
- Both orientations (portrait + landscape)
- Infinite list
- Supports both iOS and Android.

## Installation

First you have to follow installation instructions of [Reanimated v2](https://docs.swmansion.com/react-native-reanimated/) and [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/)

```sh
For now install using git from this repo using yarn.
Instructions are comming soon.
```

Expo is supported since SDK 40. More information [here](https://docs.expo.io/versions/latest/sdk/reanimated/)

## Usage

```js
Comming Soon
```

## Props

| Prop | Description | Type | Default |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
| data `(will be updated soon)` | Array of items to render | `T[]` | `undefined` |
| renderItem? | Callback func which can be used to render custom image component, e.g `FastImage`. NOTE: You have to call `setImageDimensions({width, height})` parameter after image is loaded | `(renderItemInfo: {item: T, index: number, setImageDimensions: Function}) => React.ReactElement` | `undefined` |
| keyExtractor? | Callback func which provides unique keys for items | `(item: T, index: number) => string or number` | Takes `id` or `key` or `_id` from `Item`, otherwise puts `Item` as key |
| initialIndex? | The initial image index | `number` | `0` |
| onIndexChange? | Is called when index of active item is changed | `(newIndex: number) => void` | `undefined` |
| doubleTapScale? | Image scale when double tap is fired | `number` | `3` |
| doubleTapInterval? | Time in milliseconds between single and double tap events | `number` | `500` |
| maxScale? | Maximum scale user can set with gesture | `number` | `6` |
| pinchEnabled? | Is pinch gesture enabled | `boolean` | `true` |
| disableTransitionOnScaledImage? | Disables transition to next/previous image when scale > 1 | `boolean` | `false` |
| hideAdjacentImagesOnScaledImage? | Hides next and previous images when scale > 1 | `boolean` | `false` |
| disableVerticalSwipe? | Disables vertical swipe when scale == 1 | `boolean` | `false` |
| disableSwipeUp? | Disables swipe up when scale == 1 | `boolean` | `false` |
| loop? | Allows user to swipe infinitely. Works when `data.length > 1` | `boolean` | `false` |
| onScaleChange? | Is called when scale is changed | `(scale: number) => void` | `undefined` |
| onScaleChangeRange? | Shows range of scale in which `onScaleChange` is called | `{start: number, end: number}` | `undefined` |
| containerDimensions? | Dimensions object for the View that wraps gallery. | `{width: number, height: number}` | value returned from `useWindowDimensions()` hook. |
| style? | Style of container | `ViewStyle` | `undefined` |

## Events

| Prop | Description | Type |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------- |
| onSwipeToClose | Fired when user swiped to top/bottom | `Function` |
| onTap | Fired when user tap on image | `Function` |
| onDoubleTap | Fired when user double tap on image | `Function` |
| onLongPress | Fired when long press is detected | `Function` |
| onScaleStart | Fired when pinch gesture starts | `Function` |
| onScaleEnd(scale: number) | Fired when pinch gesture ends. Use case: add haptic feedback when user finished gesture with `scale > maxScale` or `scale < 1` | `Function` |
| onPanStart | Fired when pan gesture starts | `Function` |

## Methods

```js
Comming Soon
```

## License

MIT
MIT