Replies: 5 comments 3 replies
-
Hey, I recommend you somethings like this: Codeimport React from 'react';
import { View, Button } from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
withTiming,
useDerivedValue,
} from 'react-native-reanimated';
export default function AnimatedStyleUpdateExample() {
const progress = useSharedValue(0)
const translateX = useDerivedValue(() => {
return progress.value * 100
})
const animatedStyles = useAnimatedStyle(() => {
'worklet'
return {
transform: [{
translateX: withTiming(translateX.value)
}]
};
});
return (
<View>
<Animated.View style={[{ height: 100, width: 100, backgroundColor: "red" }, animatedStyles]} />
<Button onPress={() => progress.value = Math.random()} title="Hey" />
</View>
);
} |
Beta Was this translation helpful? Give feedback.
-
const AnimatedCharts: React.FC<AnimatedChartsProps> = ({ data }) => {
const transition = useSharedValue(0);
const canvasWidth = 300;
const height = canvasWidth;
const marginTop = 150;
const xValues = data.map(values => values.x);
const yValues = data.map(values => values.y);
const minX = Math.min(...xValues);
const maxX = Math.max(...xValues);
const minY = Math.min(...yValues);
const maxY = Math.max(...yValues);
const step = canvasWidth / data.length;
useEffect(() => {
transition.value = 1;
});
return (
<SafeAreaView>
<View style={styles.container}>
<View style={[styles.yAxis, { height: maxY, top: marginTop - 2 }]}>
{[...data].reverse().map(({ y }) => {
return (
<Text key={y} style={[styles.axisTicks, styles.yAxisTicks]}>
{y}
</Text>
);
})}
</View>
<View style={{ width: canvasWidth, marginTop }}>
{data.map((point, index) => {
if (point.y === 0) {
return null;
}
const barHeight = mix(point.y / maxY, 0, height);
// eslint-disable-next-line react-hooks/rules-of-hooks
const rStyle = useAnimatedStyle(() => {
'worklet';
const currentHeight = barHeight * transition.value;
const translateY = (barHeight - currentHeight) / 2;
return {
transform: [{ translateY: withSpring(translateY) }, { scale: transition.value }]
};
});
return (
<Animated.View key={point.x} style={[styles.barContainer, { left: index * step, width: step, height: barHeight }, rStyle]}>
<View style={styles.bar} />
</Animated.View>
);
})}
</View>
<View style={[styles.xAxis, { width: canvasWidth }]}>
{data.map(({ x }) => {
return (
<Text key={x} style={[styles.axisTicks, { width: step, paddingHorizontal: step / 2.5 }]}>
{x}
</Text>
);
})}
</View>
</View>
</SafeAreaView>
);
}; I am getting the same error in the above code, and I tried the aforementioned solution. Doesn't seem to work. |
Beta Was this translation helpful? Give feedback.
-
I am also getting the same error however I have no idea where I would incorporate runOnJS as I am not running any functions. The error is appearing on immediate load.
|
Beta Was this translation helpful? Give feedback.
-
@wcandillon , anything on this? Even if i use any of the functions(eg. diffclamp, animatedstyle, etc,) from skia/reanimated it throws me this error. |
Beta Was this translation helpful? Give feedback.
-
in my case reset cache helps me |
Beta Was this translation helpful? Give feedback.
-
Hi guys,
I'm learning reanimated library by following tutorial. When i try to run codes i got an error.
Let me explain,
This code is working correctly. When i click button, View is displaying anywhere randomly. But when want to make it by using withTiming it throws an error "tried to synchoronously call function"
<Button onPress={() => (progress.value = withTiming(Math.random()))} title="Hey" />
the only part of code i changed is adding withTiming. Is there any idea?
Beta Was this translation helpful? Give feedback.
All reactions