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.

color rgb opacity bug in reanimated

See original GitHub issue
```
const backgroundColor = interpolate(this.translateY, {
		inputRange: [0, position.y],
		outputRange: [Animated.color(0, 0, 0, 1), Animated.color(0, 0, 0, 0)]
	});
i am using black color with opacity but it show all the color during interpolate
 you can check reporducable bug on my snack
https://snack.expo.io/@nomi9995/reanimatedcolorbugexample

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:14 (9 by maintainers)

github_iconTop GitHub Comments

8reactions
KakarNcommented, May 3, 2019

I have worked with it Animated.color() in the past, however, I have implemented it differently than yours.

const backgroundColor = color(1, 1, 1, interpolate(translateY, {
                inputRange: [0, HEIGHT],
                outputRange: [1, 0],
                extrapolate: Extrapolate.CLAMP
            }))

Hope this helps.

7reactions
CatapultJessecommented, May 7, 2019

yeah there is a bug in this library and @kmagiera should fix it

Have a bit of respect for the thousands of lines of free code you are getting.

Read more comments on GitHub >

github_iconTop Results From Across the Web

interpolateColors | React Native Reanimated
Output colors range for the interpolation. ... Each color should be a string like "red" "#ff0" "#ff0000" "rgba(255, 0, 0, 1)"
Read more >
Reanimated 2 - the new approach to creating animations in ...
The creators of the library made sure that it is possible to pass colors in the most popular formats. Let's use RGB format...
Read more >
Animating backgroundColor in React Native - Stack Overflow
Newest react-native version may have a bug - trying this code to interpolate from white to blue and getting a "received bad props"...
Read more >
Working with RGBA color - NCL Graphics
Opacity is given as a floating-point in the range [0.,1.], where 0. means completely transparent, and 1. means fully opaque. Opacity values may...
Read more >
Interpolate Colors like a pro with React Native Reanimated 2 ...
In this tutorial we'll learn the concept behind the interpolateColor function from React Native Reanimated. To improve the learning ...
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