question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when use useAnimatedStyle with interpolateColor

See original GitHub issue

Description

I use useAnimatedStyle with interpolateColor, it’s make exception

Screenshots

Snack or minimal code example

const Dot: React.FC<{
  index: number;
  currentIndex: Animated.SharedValue<number>;
}> = ({ index, currentIndex }) => {

  const style = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        currentIndex.value,
        [index - 1, index, index + 1],
        ["#DDE2E9", "#ABB5C4", "#DDE2E9"],
      ),
    };
  });

  return (
    <Animated.View
      style={[
        {
          width: 10,
          height: 10,
          borderRadius: 10,
        },
        style,
      ]}
    />
  );
};

Package versions

  • React: 16.13.1
  • React Native: 0.63.3
  • React Native Reanimated: 2.0.0-alpha.8
  • NodeJS: 12.13.1

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
hoangtrucitcommented, Nov 16, 2020

this issue is resolved with version 2.0.9

1reaction
piaskowykcommented, Jan 4, 2021

@mhjey Try to use 2.0.0-rc.1 because I fixed this in PR: #1504

Read more comments on GitHub >

github_iconTop Results From Across the Web

interpolateColors | React Native Reanimated
This is documentation for React Native Reanimated 1.x.x, which is no longer actively maintained. For up-to-date documentation, see the latest version (2.5.x – ......
Read more >
What is wrong with my React Native Reanimated colour ...
The possible reason for this not working is that the Button component may not be an Animated component. You ...
Read more >
Interpolate Colors like a pro with React Native Reanimated 2
If you're more of a video tutorial person, the same content in this ... UI Thread by reanimated, we need to use the...
Read more >
Reanimated 2 - the new approach to creating animations in ...
I encourage you to start using Reanimated 2 in your React Native ... The next and one of the most important hook is...
Read more >
Interpolate Colors like a pro with React Native Reanimated 2 ...
You can support the channel by buying me a coffee here: ... explore are: - useDerivedValue - interpolateColor - withTiming Medium article: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found