strogo
diff --git a/‎Chapter26/animate-styling/.gitignore
Copy file name to clipboard
+35Lines changed: 35 additions & 0 deletions b/‎Chapter26/animate-styling/.gitignore
Copy file name to clipboard
+35Lines changed: 35 additions & 0 deletions
diff --git a/‎Chapter26/animate-styling/App.tsx
Copy file name to clipboard
+66Lines changed: 66 additions & 0 deletions b/‎Chapter26/animate-styling/App.tsx
Copy file name to clipboard
+66Lines changed: 66 additions & 0 deletions
diff --git a/‎Chapter26/animate-styling/app.json
Copy file name to clipboard
+30Lines changed: 30 additions & 0 deletions b/‎Chapter26/animate-styling/app.json
Copy file name to clipboard
+30Lines changed: 30 additions & 0 deletions
diff --git a/‎Chapter26/animate-styling/assets/adaptive-icon.png
Copy file name to clipboard
17.1 KB b/‎Chapter26/animate-styling/assets/adaptive-icon.png
Copy file name to clipboard
17.1 KB
diff --git a/‎Chapter26/animate-styling/assets/favicon.png
Copy file name to clipboard
1.43 KB b/‎Chapter26/animate-styling/assets/favicon.png
Copy file name to clipboard
1.43 KB
diff --git a/‎Chapter26/animate-styling/assets/icon.png
Copy file name to clipboard
21.9 KB b/‎Chapter26/animate-styling/assets/icon.png
Copy file name to clipboard
21.9 KB
diff --git a/‎Chapter26/animate-styling/assets/splash.png
Copy file name to clipboard
46.2 KB b/‎Chapter26/animate-styling/assets/splash.png
Copy file name to clipboard
46.2 KB
diff --git a/‎Chapter26/animate-styling/babel.config.js
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions b/‎Chapter26/animate-styling/babel.config.js
Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
@@ -0,0 +1,66 @@
+import React from "react";
+import { Text, View, Pressable } from "react-native";
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import styles from "./styles";
+
+const App = () => {
+  const radius = useSharedValue(30);
+  const opacity = useSharedValue(1);
+  const scale = useSharedValue(1);
+  const color = useSharedValue(0);
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      color.value,
+      [0, 1],
+      ["orange", "red"]
+    );
+
+    return {
+      opacity: opacity.value,
+      borderRadius: radius.value,
+      transform: [{ scale: scale.value }],
+      backgroundColor: backgroundColor,
+    };
+  }, []);
+
+  const onPressIn = () => {
+    radius.value = withSpring(20);
+    opacity.value = withSpring(0.7);
+    scale.value = withSpring(0.9);
+  };
+
+  const onLongPress = () => {
+    scale.value = withSpring(0.8);
+    color.value = withSpring(1);
+  };
+
+  const onPressOut = () => {
+    radius.value = withSpring(30);
+    opacity.value = withSpring(1);
+    scale.value = withSpring(1, { damping: 50 });
+    color.value = withSpring(0);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.buttonContainer, animatedStyles]}>
+        <Pressable
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+          onLongPress={onLongPress}
+          style={styles.button}
+        >
+          <Text style={styles.buttonText}>Press me</Text>
+        </Pressable>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default App;
@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "animate-styling",
+    "slug": "animate-styling",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}
@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};