diff --git a/README.md b/README.md index 4b9a7ae..dfb4e84 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ Even though the demo shows the library used with images, it was initially design - Drag one finger to pan - Keep content inside container boundaries - Configurable minimum and maximum scale +- Methods for programmatically updating position and scale Thanks to `react-native-reanimated` all animations are running on the UI thread, so no fps drops are experienced. @@ -33,8 +34,8 @@ This library uses `react-native-reanimated` v2 and the new API of `react-native- Before installing it, you need to install those two libraries and set them up in your project: -- `react-native-reanimated`: [INSTALLATION](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) -- `react-native-gesture-handler`: [INSTALLATION](https://docs.swmansion.com/react-native-gesture-handler/docs/#installation) +- `react-native-reanimated`: [Installation & Setup](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) +- `react-native-gesture-handler`: [Installation & Setup](https://docs.swmansion.com/react-native-gesture-handler/docs/#installation) ## ⚙️ Installation @@ -96,8 +97,19 @@ const styles = StyleSheet.create({ | maxScale | Number? | `4` | Maximum value of scale. | | initialScale | Number? | `1` | Initial value of scale. | +## 🛠 Methods + +| Method | Params | Return | Description | +|----------------|-----------------------------------------|--------|----------------------------------------------------------------------------------------------| +| scaleTo | value: number, animated: boolean | void | Sets sharedValue `scale` to `value`,
if `animated` is **true** uses `withTiming` | +| setContentSize | width: number, height: number | void | Updates sharedValue `contentSize` and overrides prop: `contentDimensions` | +| translateTo | x: number, y: number, animated: boolean | void | Updates content `translateX` / `translateY`,
if `animated` is **true** uses `withTiming` | +| setMinScale | value: number | void | Updates `minScale` value | +| setMaxScale | value: number | void | Updates `maxScale` value | +| getScale | | number | Returns current value of sharedValue `scale` | You can also refer to the app inside `example/` for a running demo of this library. + ## Contributing See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle index 90f5563..14c2b14 100644 --- a/example/android/app/build.gradle +++ b/example/android/app/build.gradle @@ -76,7 +76,7 @@ import com.android.build.OutputFile */ project.ext.react = [ - enableHermes: false, // clean and rebuild if changing + enableHermes: true, // clean and rebuild if changing entryFile: "index.tsx", ] diff --git a/example/android/app/src/main/java/com/example/reactnativepanpinchview/MainApplication.java b/example/android/app/src/main/java/com/example/reactnativepanpinchview/MainApplication.java index f33a000..368c29c 100644 --- a/example/android/app/src/main/java/com/example/reactnativepanpinchview/MainApplication.java +++ b/example/android/app/src/main/java/com/example/reactnativepanpinchview/MainApplication.java @@ -10,6 +10,8 @@ import com.facebook.soloader.SoLoader; import java.lang.reflect.InvocationTargetException; import java.util.List; +import com.facebook.react.bridge.JSIModulePackage; +import com.swmansion.reanimated.ReanimatedJSIModulePackage; public class MainApplication extends Application implements ReactApplication { @@ -26,7 +28,7 @@ protected List getPackages() { List packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for PanPinchViewExample: // packages.add(new MyReactNativePackage()); - + return packages; } @@ -34,6 +36,10 @@ protected List getPackages() { protected String getJSMainModuleName() { return "index"; } + @Override + protected JSIModulePackage getJSIModulePackage() { + return new ReanimatedJSIModulePackage(); + } }; @Override diff --git a/example/src/App.tsx b/example/src/App.tsx index a5acee8..cfa2b0c 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,7 +1,16 @@ import * as React from 'react'; -import { Image, SafeAreaView, StatusBar, StyleSheet, View } from 'react-native'; +import { + Button, + Image, + SafeAreaView, + StatusBar, + StyleSheet, + View, +} from 'react-native'; import PanPinchView from 'react-native-pan-pinch-view'; +import { useRef } from 'react'; +import type { PanPinchViewRef } from '../../src/types.js'; const CONTENT = { width: 150, @@ -14,11 +23,56 @@ const CONTAINER = { }; export default function App() { + const panPinchViewRef = useRef(null); + + const scaleTo = (value: number) => { + panPinchViewRef.current?.scaleTo(value); + }; + + const moveTo = (x: number, y: number) => { + panPinchViewRef.current?.translateTo(x, y); + }; + return ( + +