Animating backgroundColor in React Native

by

Given you have Animated.Value lets say x, you can interpolate color like this:

render() {
    var color = this.state.x.interpolate({
        inputRange: [0, 300],
        outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
    });

    return (
        <Animated.View style={{backgroundColor:color}}></Animated.View>
    );
}

You can find full working example in the issue I’ve posted on github.

More Related Contents:

  1. What is component in reactjs?
  2. How to create a translucent in React Native?
  3. How can I generate an apk that can run without server with react-native?
  4. Adding new data to firebase users
  5. Where can I make API call with hooks in react?
  6. How to register event with useEffect hooks?
  7. How can I force a component to re-render with hooks in React?
  8. Using an authorization header with Fetch in React Native
  9. How can I view network requests (for debugging) in React Native?
  10. react native 100+ items flatlist very slow performance
  11. When is it appropriate to use a constructor in REACT?
  12. How to setInterval for every 5 second render with React hook useEffect in React Native app?
  13. How to prevent re-rendering of components that have not changed?
  14. React.createClass vs. ES6 arrow function
  15. Is it an anti-pattern to define a function component inside the render() function?
  16. React Native: Using lodash debounce
  17. how to compress a base64 image to custom size
  18. unable to scroll in scrollView
  19. How to clear react-native cache?
  20. Pass props from child to parent react navigation
  21. What’s the best way to add a full screen background image in React Native
  22. How to use array-contains operator with an array of objects in Firestore?
  23. How can I run background tasks in React Native?
  24. ‘expo’ is not recognized as an internal or external command
  25. Close react native modal by clicking on overlay?
  26. Global state in React Native
  27. Could not find “store” in either the context or props of “Connect(App)”
  28. Javascript – Counting duplicates in object array and storing the count as a new object
  29. import * as React from ‘react’; vs import React from ‘react’;
  30. Focus style for TextInput in react-native

Leave a Comment