Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support Interpolation of strings when using native driver in Animated, fix Expected node to be marked as "native", optimize AnimatedNode creation and connections #18187

Closed
wants to merge 3 commits into from
Closed

Support Interpolation of strings when using native driver in Animated, fix Expected node to be marked as "native", optimize AnimatedNode creation and connections #18187

wants to merge 3 commits into from

Commits on Mar 21, 2019

  1. Support Animated string interpolation with useNativeDriver: true

    @msand
    msand committed Mar 21, 2019
    Configuration menu
    Copy the full SHA
    5f943ae View commit details
    Browse the repository at this point in the history

  2. Fix exception: Expected node to be marked as "native" 

    When using one AnimatedValue to interpolate several properties in one
View, it causes the exception to be thrown when the one of the earlier
interpolations get natively connected, and the others haven't been made
native yet.
    @msand
    msand committed Mar 21, 2019
    Configuration menu
    Copy the full SHA
    588fa26 View commit details
    Browse the repository at this point in the history

  3. Fix connection of AnimatedNodes and creation of redundant AnimatedNodes 

    When using one AnimatedValue to interpolate several properties in one
View, it caused several redundant AnimatedNodes to be created for the
same AnimatedProps.

Additionally, the connections to the AnimatedProps were made before the
native node for the AnimatedProps was created, causing them not to work.
This splits the connection creation out from the makeNative call,
and calls it after all the required nodes are created.

Test App.js:
```jsx
import React, { Component } from 'react';
import { StyleSheet, View, Dimensions, Animated } from 'react-native';
import { Svg, Rect, Path } from 'react-native-svg';

const { width, height } = Dimensions.get('window');
const AnimatedRect = Animated.createAnimatedComponent(Rect);
const AnimatedPath = Animated.createAnimatedComponent(Path);

function getInitialState() {
  const anim = new Animated.Value(0);
  const fillOpacity = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });
  const offset = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 10],
  });
  const strokeOpacity = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
    extrapolateRight: 'clamp',
  });
  const path = anim.interpolate({
    inputRange: [0, 1],
    outputRange: ['M20,20L20,80L80,80L80,20Z', 'M40,40L33,60L60,60L65,40Z'],
  });
  const fill = anim.interpolate({
    inputRange: [0, 1],
    outputRange: ['rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.99)'],
  });
  const oneToFivePx = anim.interpolate({
    inputRange: [0, 1],
    outputRange: ['1px', '5px'],
  });
  return { anim, fillOpacity, offset, strokeOpacity, path, fill, oneToFivePx };
}

export default class App extends Component {
  state = getInitialState();

  componentDidMount() {
    const { anim } = this.state;
    Animated.timing(anim, {
      toValue: 1,
      duration: 10000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    const { fillOpacity, offset, strokeOpacity, path, fill, oneToFivePx } = this.state;
    return (
      <View style={styles.container}>
        <Svg width={width} height={height} viewBox="0 0 100 100">
          <AnimatedRect
            x="5"
            y="5"
            width="90"
            height="90"
            stroke="blue"
            fill={fill}
            strokeDasharray="1 1"
            strokeWidth={oneToFivePx}
            strokeDashoffset={offset}
            strokeOpacity={strokeOpacity}
            fillOpacity={fillOpacity}
          />
          <AnimatedPath
            d={path}
            stroke="blue"
          />
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ecf0f1',
  },
});
```
    @msand
    msand committed Mar 21, 2019
    Configuration menu
    Copy the full SHA
    ad9d502 View commit details
    Browse the repository at this point in the history