|
1 | | -# react-native-before-after |
| 1 | +<div style="text-align: center;"> |
| 2 | + <h1 align="center">React Native Before After</h1> |
| 3 | + |
| 4 | +</div> |
| 5 | + |
| 6 | +## Supported features |
| 7 | + |
| 8 | +- Zoom to scale |
| 9 | +- Double tap to scale |
| 10 | +- Native iOS feeling (rubber effect, decay animation on pan gesture) |
| 11 | +- Fully customizable |
| 12 | +- Both orientations (portrait + landscape) |
| 13 | +- Infinite list |
| 14 | +- Supports both iOS and Android. |
| 15 | + |
| 16 | +## Installation |
| 17 | + |
| 18 | +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/) |
| 19 | + |
| 20 | +```sh |
| 21 | +For now install using git from this repo using yarn. |
| 22 | +Instructions are comming soon. |
| 23 | +``` |
| 24 | + |
| 25 | +Expo is supported since SDK 40. More information [here](https://docs.expo.io/versions/latest/sdk/reanimated/) |
| 26 | + |
| 27 | +## Usage |
| 28 | + |
| 29 | +```js |
| 30 | +Comming Soon |
| 31 | +``` |
| 32 | + |
| 33 | +## Props |
| 34 | + |
| 35 | +| Prop | Description | Type | Default | |
| 36 | +| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | |
| 37 | +| data `(will be updated soon)` | Array of items to render | `T[]` | `undefined` | |
| 38 | +| 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` | |
| 39 | +| 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 | |
| 40 | +| initialIndex? | The initial image index | `number` | `0` | |
| 41 | +| onIndexChange? | Is called when index of active item is changed | `(newIndex: number) => void` | `undefined` | |
| 42 | +| doubleTapScale? | Image scale when double tap is fired | `number` | `3` | |
| 43 | +| doubleTapInterval? | Time in milliseconds between single and double tap events | `number` | `500` | |
| 44 | +| maxScale? | Maximum scale user can set with gesture | `number` | `6` | |
| 45 | +| pinchEnabled? | Is pinch gesture enabled | `boolean` | `true` | |
| 46 | +| disableTransitionOnScaledImage? | Disables transition to next/previous image when scale > 1 | `boolean` | `false` | |
| 47 | +| hideAdjacentImagesOnScaledImage? | Hides next and previous images when scale > 1 | `boolean` | `false` | |
| 48 | +| disableVerticalSwipe? | Disables vertical swipe when scale == 1 | `boolean` | `false` | |
| 49 | +| disableSwipeUp? | Disables swipe up when scale == 1 | `boolean` | `false` | |
| 50 | +| loop? | Allows user to swipe infinitely. Works when `data.length > 1` | `boolean` | `false` | |
| 51 | +| onScaleChange? | Is called when scale is changed | `(scale: number) => void` | `undefined` | |
| 52 | +| onScaleChangeRange? | Shows range of scale in which `onScaleChange` is called | `{start: number, end: number}` | `undefined` | |
| 53 | +| containerDimensions? | Dimensions object for the View that wraps gallery. | `{width: number, height: number}` | value returned from `useWindowDimensions()` hook. | |
| 54 | +| style? | Style of container | `ViewStyle` | `undefined` | |
| 55 | + |
| 56 | +## Events |
| 57 | + |
| 58 | +| Prop | Description | Type | |
| 59 | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------- | |
| 60 | +| onSwipeToClose | Fired when user swiped to top/bottom | `Function` | |
| 61 | +| onTap | Fired when user tap on image | `Function` | |
| 62 | +| onDoubleTap | Fired when user double tap on image | `Function` | |
| 63 | +| onLongPress | Fired when long press is detected | `Function` | |
| 64 | +| onScaleStart | Fired when pinch gesture starts | `Function` | |
| 65 | +| onScaleEnd(scale: number) | Fired when pinch gesture ends. Use case: add haptic feedback when user finished gesture with `scale > maxScale` or `scale < 1` | `Function` | |
| 66 | +| onPanStart | Fired when pan gesture starts | `Function` | |
| 67 | + |
| 68 | +## Methods |
| 69 | + |
| 70 | +```js |
| 71 | +Comming Soon |
| 72 | +``` |
2 | 73 |
|
3 | 74 | ## License |
4 | 75 |
|
5 | | -MIT |
| 76 | +MIT |
0 commit comments