Not compatible with Reanimated 'color'

[michalpetrov]

Right now the library is not compatible with Reanimated 'color'. Trying to use it ends with error: "[object Object] is not valid color or brush"

import Animated from 'react-native-reanimated'
const { color, Value } = Animated
const anim = new Value(0.0)
const pathColor= color(47, 195, 215, anim)
...
<Svg>
  <Path fill={pathColor} ... />
</Svg>

Is there any quick workaround?

[msand]

I'd have to place some breakpoints and isolate the cause of the issue first, then i might be able to deduce various workarounds, and/or make a fix for react-native-svg, react-native-reanimated, or both.

[michalpetrov]

Find out that I can use fill-opacity to animated only the opacity.

So the workaround for my case is:

import Animated from 'react-native-reanimated'
const { Value } = Animated
const AnimatedPath = Animated.createAnimatedComponent(Path)
const anim = new Value(0.0)
...
<Svg>
  <AnimatedPath fill="#ffffff: fill-opacity={anime} ... />
</Svg>

[jayu]

I'm facing similar issue also. I found a workaround to use Reanimated.concat
However, it is buggy on Android. Color is blinking instead of being animated. iOS works fine.
Support for Reanimated.color would be awesome.

import Animated from 'react-native-reanimated'
const { concat, Value } = Animated
const anim = new Value(0.0)
const pathColor= concat('rgb(', 47, ',', 195, ',', anim, ')')
...
<Svg>
  <Path fill={pathColor} ... />
</Svg>

[msand]

Seems to work, perhaps you forgot to wrap in createAnimatedComponent?
https://snack.expo.io/@msand/bold-soda

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Svg, Path, Circle } from 'react-native-svg';
import Constants from 'expo-constants';
import Animated, { Easing }  from 'react-native-reanimated';
const AnimatedPath = Animated.createAnimatedComponent(Path);
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const {
  set,
  concat,
  cond,
  eq,
  and,
  startClock,
  clockRunning,
  block,
  timing,
  Value,
  Clock,
  interpolate,
} = Animated;

function runTiming(clock, value, dest) {
  const state = {
    finished: new Value(1),
    position: new Value(value),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 500,
    toValue: new Value(0),
    easing: Easing.inOut(Easing.ease),
  };

  const reset = [
    set(state.finished, 0),
    set(state.time, 0),
    set(state.frameTime, 0),
  ];

  return block([
    cond(and(state.finished, eq(state.position, value)), [
      ...reset,
      set(config.toValue, dest),
    ]),
    cond(and(state.finished, eq(state.position, dest)), [
      ...reset,
      set(config.toValue, value),
    ]),
    cond(clockRunning(clock), 0, startClock(clock)),
    timing(clock, state, config),
    state.position,
  ]);
}

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    const clock = new Clock();
    const base = runTiming(clock, -1, 1);
    this.anim = interpolate(base, {
      inputRange: [-1, 1],
      outputRange: [0, 255],
    });
  }
  render() {
    const pathColor = concat('rgb(', 47, ',', 195, ',', this.anim, ')'); 
    return (
      <View style={styles.container}>
        <Svg width="100%" height="100%" viewBox="0 0 100 100">
          <AnimatedPath stroke={pathColor} d="M0,0L100,100" />
          <AnimatedCircle r="50" fill={pathColor} />
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

[jayu]

I missed one detail. It is blinking when I'm trying to animate more than one rbg value. My goal was to go from only red, to only green. I forked your snack https://snack.expo.io/@jaysbytes/bold-soda

Circle fill works fine, but path stroke blinks

[3luyka]

Same issue with color animation. But in my case, I want to animate between 3 different colors.

[msand]

Can you try with the latest commit from the develop branch?

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Svg, Path, Circle } from 'react-native-svg';
import Animated, { Easing }  from 'react-native-reanimated';
const AnimatedPath = Animated.createAnimatedComponent(Path);
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const {
    color,
    set,
    cond,
    eq,
    and,
    startClock,
    clockRunning,
    block,
    timing,
    Value,
    Clock,
    interpolate,
} = Animated;

function runTiming(clock, value, dest) {
    const state = {
        finished: new Value(1),
        position: new Value(value),
        time: new Value(0),
        frameTime: new Value(0),
    };

    const config = {
        duration: 500,
        toValue: new Value(0),
        easing: Easing.inOut(Easing.ease),
    };

    const reset = [
        set(state.finished, 0),
        set(state.time, 0),
        set(state.frameTime, 0),
    ];

    return block([
        cond(and(state.finished, eq(state.position, value)), [
            ...reset,
            set(config.toValue, dest),
        ]),
        cond(and(state.finished, eq(state.position, dest)), [
            ...reset,
            set(config.toValue, value),
        ]),
        cond(clockRunning(clock), 0, startClock(clock)),
        timing(clock, state, config),
        state.position,
    ]);
}

export default class App extends React.Component {
    constructor(props) {
        super(props);
        const clock = new Clock();
        const base = runTiming(clock, -1, 1);
        this.anim = interpolate(base, {
            inputRange: [-1, 1],
            outputRange: [0, 1],
        });
    }
    render() {
        const pathColor= color(47, 195, 215, this.anim)
        return (
            <View style={styles.container}>
                <Svg width="100%" height="100%" viewBox="0 0 100 100">
                    <AnimatedPath stroke={pathColor} d="M0,0L100,100" />
                    <AnimatedCircle r="50" fill={pathColor} />
                </Svg>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
        padding: 8,
    },
});

[msand]

🎉 This issue has been resolved in version 11.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀