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

bjartebore picture bjartebore  路  3Comments

colinux picture colinux  路  3Comments

wasim-abuzaher picture wasim-abuzaher  路  3Comments

bdrobinson picture bdrobinson  路  3Comments

mrousavy picture mrousavy  路  3Comments