React-native-reanimated 라이브러리 사용가능한지 문의

개발
,
1

안녕하세요, 특정 애니메이션을 넣기 위해 UI 스레드를 사용하는 라이브러리인 react-native-reanimated를 설치해서 테스트 해보았는데 동작하지 않아 문의합니다.

테스트 코드

import { createRoute } from "@granite-js/react-native";

import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";

export const Route = createRoute("/", {
  component: Page,
});

function Container({ children }: { children: React.ReactNode }) {
  return <View style={styles.container}>{children}</View>;
}

function Page() {
  const navigation = Route.useNavigation();
  const scale = useSharedValue(1);

  const goToAboutPage = () => {
    navigation.navigate("/about");
  };

  const handlePress = () => {
    scale.value = withSpring(scale.value === 1 ? 1.2 : 1);
  };

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
    };
  });

  return (
    <Container>
      <Text style={styles.title}>🎉 Welcome! 🎉</Text>
      <Text style={styles.subtitle}>
        This is a demo page for the{" "}
        <Text style={styles.brandText}>Granite</Text> Framework.
      </Text>
      <Text style={styles.description}>
        This page was created to showcase the features of the Granite.
      </Text>

      {/* Reanimated Test */}
      <TouchableOpacity onPress={handlePress}>
        <Animated.View style={[styles.testBox, animatedStyle]}>
          <Text style={styles.testText}>Tap to test Reanimated</Text>
        </Animated.View>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={goToAboutPage}>
        <Text style={styles.buttonText}>Go to About Page</Text>
      </TouchableOpacity>
    </Container>
  );
}

package.json

"dependencies": {
  "@apps-in-toss/framework": "^1.2.1",
  "@granite-js/native": "0.1.28",
  "@granite-js/react-native": "0.1.28",
  "react": "18.2.0",
  "react-native": "0.72.6",
  "react-native-reanimated": "^4.1.3",
  "react-native-worklets": "^0.6.1"
}

babel.config.js

module.exports = {
  presets: ["babel-preset-granite"],
  plugins: [
    "react-native-worklets/plugin",
  ],
};

현재 이 라이브러리를 사용 할 수 없는 상태라면, 혹시 나중에 지원할 예정인지도 알고싶습니다.

2

안녕하세요 :slight_smile:
현재 Reanimated 라이브러리는 사용이 불가해요.
메모리릭 이슈로 이전에 빌드에서 제외하였고, 아직 지원 계획은 없습니다 :cry:

3

답변 감사합니다. :cry: