@popp0102/nova 0.2.4 → 0.3.0

package/lib/components/animations/FadeView.js

@@ -0,0 +1,33 @@
+import { Animated } from 'react-native';
+import { useRef, useEffect } from 'react';
+
+const DIRECTIONS = {
+  IN: 'in',
+  OUT: 'out'
+};
+
+const VALID_DIRECTIONS = Object.values(DIRECTIONS);
+
+export default function FadeView({ children, direction = DIRECTIONS.IN, duration = 1000 }) {
+  if (!VALID_DIRECTIONS.includes(direction)) {
+    throw new Error(`FadeView: direction must be one of ${VALID_DIRECTIONS.join(', ')}. Got: ${direction}`);
+  }
+
+  const fadeAnimationValue = useRef(
+    new Animated.Value(direction === DIRECTIONS.IN ? 0 : 1)
+  ).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnimationValue, {
+      toValue: direction === DIRECTIONS.IN ? 1 : 0,
+      duration,
+      useNativeDriver: true
+    }).start();
+  }, []);
+
+  return (
+    <Animated.View style={{ opacity: fadeAnimationValue }}>
+      {children}
+    </Animated.View>
+  );
+}

package/lib/components/animations/SlideView.js

@@ -0,0 +1,58 @@
+import { Animated } from 'react-native';
+import { useRef, useEffect } from 'react';
+
+const DIRECTIONS = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  UP: 'up',
+  DOWN: 'down',
+};
+
+const VALID_DIRECTIONS = Object.values(DIRECTIONS);
+
+export default function SlideView({ children, direction = DIRECTIONS.LEFT, duration = 1000 }) {
+  if (!VALID_DIRECTIONS.includes(direction)) {
+    throw new Error(`SlideView: direction must be one of ${VALID_DIRECTIONS.join(', ')}. Got: ${direction}`);
+  }
+  let initialValue = 300;
+  let transformProperty = 'translateX';
+
+  switch(direction) {
+    case DIRECTIONS.LEFT:
+      initialValue = 300;
+      transformProperty = 'translateX';
+      break;
+    case DIRECTIONS.RIGHT:
+      initialValue = -300;
+      transformProperty = 'translateX';
+      break;
+    case DIRECTIONS.UP:
+      initialValue = 300;
+      transformProperty = 'translateY';
+      break;
+    case DIRECTIONS.DOWN:
+      initialValue = -300;
+      transformProperty = 'translateY';
+      break;
+  }
+
+  const slideAnimationValue = useRef(new Animated.Value(initialValue)).current;
+
+  const slideIn = () => {
+    Animated.timing(slideAnimationValue, {
+      toValue: 0,
+      duration: duration,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  useEffect(() => {
+    slideIn();
+  }, []);
+
+  return (
+    <Animated.View style={{ transform: [{ [transformProperty]: slideAnimationValue }] }}>
+      {children}
+    </Animated.View>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popp0102/nova",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "React Native component library",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -30,10 +30,10 @@
     "prepublishOnly": "npm run lint && npm run test"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
-    "react-native-safe-area-context": ">=4.0.0",
-    "@expo/vector-icons": ">=14.0.0"
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -49,7 +49,5 @@
     "react": "^18.3.1",
     "react-native": "^0.75.0",
     "react-test-renderer": "^18.3.1"
-  },
-  "dependencies": {
   }
 }