zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-06-09 09:27:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Experiment to allow animating fillOpacity of Rect using native driver.

Browse Source 
import React, { Component } from 'react';
import { StyleSheet, View, Dimensions, Animated } from 'react-native';
import { Svg, Rect } from 'react-native-svg';

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

export default class App extends Component {
  state = {
    anim: new Animated.Value(0),
  };

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

  render() {
    const { anim } = 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"
            fill="green"
            fillOpacity={anim}
          />
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ecf0f1',
  },
});
This commit is contained in:
Mikael Sand
2018-02-24 23:18:50 +02:00
parent f3ea54cd26
commit fbd6591251
11 changed files with 95 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ios/ViewManagers/RNSVGRectManager.m
+2 -2
View File
@@ -22,8 +22,8 @@ RCT_EXPORT_MODULE()
RCT_EXPORT_VIEW_PROPERTY(x, NSString)
RCT_EXPORT_VIEW_PROPERTY(y, NSString)
RCT_EXPORT_VIEW_PROPERTY(width, NSString)
RCT_EXPORT_VIEW_PROPERTY(height, NSString)
RCT_EXPORT_VIEW_PROPERTY(rectwidth, NSString)
RCT_EXPORT_VIEW_PROPERTY(rectheight, NSString)
RCT_EXPORT_VIEW_PROPERTY(rx, NSString)
RCT_EXPORT_VIEW_PROPERTY(ry, NSString)