24-zoom-react-native

Author: lasfito

24-zoom-react-native/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

24-zoom-react-native/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

24-zoom-react-native/App.js

@@ -0,0 +1,80 @@
+import { StyleSheet, SafeAreaView, Dimensions } from "react-native";
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from "react-native-gesture-handler";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
+
+export default function App() {
+  const width = Dimensions.get("window").width;
+  const ANCHO_IMAGEN = width;
+  const ALTO_IMAGEN = width;
+
+  const escalaImg = useSharedValue(1);
+  const focoX = useSharedValue(0);
+  const focoY = useSharedValue(0);
+
+  const pinchazoPantalla = Gesture.Pinch()
+    .onStart((e) => {
+      focoX.value = e.focalX;
+      focoY.value = e.focalY;
+    })
+    .onUpdate((e) => {
+      escalaImg.value = e.scale;
+    })
+    .onEnd(() => {
+      escalaImg.value = withTiming(1, { duration: 500 });
+    });
+
+  const centroImagen = {
+    x: ANCHO_IMAGEN / 2,
+    y: ALTO_IMAGEN / 2,
+  };
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: "#fff",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    img: {
+      width: ANCHO_IMAGEN,
+      height: ALTO_IMAGEN,
+    },
+  });
+
+  const estiloAnimado = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: focoX.value },
+      { translateY: focoY.value },
+      { translateX: -centroImagen.x },
+      { translateY: -centroImagen.y },
+      { scale: escalaImg.value },
+      { translateX: -focoX.value },
+      { translateY: -focoY.value },
+      { translateX: centroImagen.x },
+      { translateY: centroImagen.y },
+    ],
+  }));
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <GestureHandlerRootView>
+        <GestureDetector gesture={pinchazoPantalla}>
+          <Animated.Image
+            style={[styles.img, estiloAnimado]}
+            source={{
+              uri: "https://images.unsplash.com/photo-1642880384912-2cd8371979b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80",
+            }}
+          />
+        </GestureDetector>
+      </GestureHandlerRootView>
+    </SafeAreaView>
+  );
+}

24-zoom-react-native/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "zoom-react-native",
+    "slug": "zoom-react-native",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

24-zoom-react-native/assets/adaptive-icon.png

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};