search

kesha-antonov / react-native-zoom-reanimated

Zoom component on react-native + react-native-reanimated + react-native-gesture-handler
https://www.npmjs.com/package/react-native-zoom-reanimated
MIT License
193 stars 17 forks source link

readme

react-native-zoom-reanimated

Zoom component on React Native + react-native-reanimated + react-native-gesture-handler

Preview

iOS preview

iOS Preview

Android preview

Android Preview

Getting started

Install the library using either Yarn:

yarn add react-native-zoom-reanimated

or npm:

npm install --save react-native-zoom-reanimated

Required peer dependencies

dependency required version
react-native-reanimated >= 2.0.0
react-native-gesture-handler >= *

Usage

import Zoom from 'react-native-zoom-reanimated'

Example

import Zoom from 'react-native-zoom-reanimated'

...
  <Zoom>
    <Image
      source={{ uri: ... }}
      resizeMode='contain'
      style={{
        width: deviceWidth,
        height: imageHeight * deviceWidth / imageWidth,
       }}
    />
  </Zoom>
...

Parameters

Name Type Required Description
style StyleProp<ViewStyle> No Container style
contentContainerStyle StyleProp<ViewStyle> No Content container style
animationFunction function No Animation function from react-native-reanimated. Default: withTiming. For example, you can use withSpring instead: https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withSpring
animationConfig object No Config for animation function from react-native-reanimated. For example, avaiable options for withSpring animation: https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withSpring#options-object
doubleTapConfig { defaultScale?: number, minZoomScale?: number, maxZoomScale?: number } No Config for zoom on double tap. defaultScale - if you want to have fixed zoom on double tap, or calculated based on dimensions then leave it as it is. minZoomScale and maxZoomScale define range with min zoom & max zoom on double tap

License

The library is released under the MIT licence. For more information see LICENSE.

TODO