How to interpolate gradients?

[drcmda]

const background = this.animation.interpolate({
    inputRange: [0, 1],
    outputRange: [
        'linear-gradient(to bottom, #333b5f 0%,#27273f 100%)',
        'linear-gradient(to bottom, #a943e4 0%,#f55989 50%,#ffaf84 100%)',
    ],
})
return <Animated.div style={{ background }} children={this.props.children} />

throws:

browser.js?40b6:38 Uncaught Error:
invalid pattern linear-gradient(to bottom, #333b5f 0,#27273f 1) and
linear-gradient(to bottom, #a943e4 0,#f55989 1)

[michalochman]

@drcmda use Animated.template, see #32

[drcmda]

const first = this.animation.interpolate({ inputRange: [0, 1], outputRange: ['#333b5f', '#a943e4'] })
const second = this.animation.interpolate({ inputRange: [0, 1], outputRange: ['#333b5f', '#f55989'] })
const third = this.animation.interpolate({ inputRange: [0, 1], outputRange: ['#27273f', '#ffaf84'] })
const background = Animated.template`linear-gradient(to bottom, ${first} 0%, ${second} 50%, ${third} 100%)`

@michalochman holy cow, that is awesome, i had no idea it existed! 😀