mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-20 14:05:09 +00:00
fbd6591251
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',
},
});
31 lines
655 B
Objective-C
31 lines
655 B
Objective-C
/**
|
|
* Copyright (c) 2015-present, Horcrux.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the MIT-style license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
#import "RNSVGRectManager.h"
|
|
|
|
#import "RNSVGRect.h"
|
|
#import "RCTConvert+RNSVG.h"
|
|
|
|
@implementation RNSVGRectManager
|
|
|
|
RCT_EXPORT_MODULE()
|
|
|
|
- (RNSVGRenderable *)node
|
|
{
|
|
return [RNSVGRect new];
|
|
}
|
|
|
|
RCT_EXPORT_VIEW_PROPERTY(x, NSString)
|
|
RCT_EXPORT_VIEW_PROPERTY(y, 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)
|
|
|
|
@end
|