React-native-reanimated: Reanimated does not give smooth animation

Created on 14 Jul 2020  路  5Comments  路  Source: software-mansion/react-native-reanimated

Description

I m using reanimated timing function to move some object but it doesn't give smooth animation my code return below

Code

const runTiming = clock => {
const state = {
finished: new Value(0),
position: new Value(0),
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: 1000,
toValue: new Value(0),
easing: Easing.inOut(Easing.ease),
};
return block([
timing(clock, state, config),
cond(eq(state.finished, 1), [
set(state.finished, 0),
set(state.frameTime, 0),
set(state.time, 0),
// set(state.position, 0),
set(config.toValue, not(state.position)),
]),
state.position,
]);
}

const translateX = interpolate(progress, {
inputRange: [0, 1],
outputRange: [0, SCREEN_WIDTH],
});

useCode(() => [startClock(clock), set(progress, runTiming(clock))], []);

Package versions

I m using reanimated one

  • React:16.9.0
  • React Native: 0.61.5
  • React Native Reanimated: 1.7.0
鉂換uestion

All 5 comments

Could you create a snack.expo.io which reproduces this behavior?

It should include the exact animation with all the views you're animating.

I created snack expo its link is here https://snack.expo.io/KKPw!hjki and my animation works fine in this but not in emulator

I have tested your example using an android emulator and a physical device. In both cases, I haven't seen any frame rate drops. Your problem can be linked with the emulator's performance. Have you tried installing your example on a physical device?

If you have any other issues, please use gifs and code blocks https://docs.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks. It can help us a lot.

yes it working fine in real device but not emulator so that I was posted issue

I think it's a problem with your physical device because your code doesn't use any CPU consuming nodes.
Please check your RAM and CPU usage when running an app in the emulator. If it's high then it's probably related to that.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mickejohansson picture mickejohansson  路  18Comments

sa8ab picture sa8ab  路  21Comments

mrousavy picture mrousavy  路  24Comments

mistikk picture mistikk  路  18Comments

likern picture likern  路  23Comments