Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions apple/Elements/RNSVGSvgView.mm
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ @implementation RNSVGSvgView {
NSMutableDictionary<NSString *, RNSVGFilter *> *_filters;
CGAffineTransform _invViewBoxTransform;
bool rendered;
CGRect _lastBounds;
}

#ifdef RCT_NEW_ARCH_ENABLED
Expand Down Expand Up @@ -283,6 +284,31 @@ - (void)setMeetOrSlice:(RNSVGVBMOS)meetOrSlice
_meetOrSlice = meetOrSlice;
}

- (void)layoutSubviews
{
[super layoutSubviews];

if (!CGRectEqualToRect(self.bounds, _lastBounds)) {
_lastBounds = self.bounds;
[self invalidateAllSVGNodes:self.subviews];
[self invalidate];
[self clearChildCache];
}
}

- (void)invalidateAllSVGNodes:(NSArray *)subviews
{
for (__kindof RNSVGNode *node in subviews) {
if ([node isKindOfClass:[RNSVGNode class]]) {
[node invalidate];

if ([node respondsToSelector:@selector(subviews)] && [node subviews].count > 0) {
[self invalidateAllSVGNodes:[node subviews]];
}
}
}
}

- (void)drawToContext:(CGContextRef)context withRect:(CGRect)rect
{
rendered = true;
Expand Down
108 changes: 108 additions & 0 deletions apps/common/test/Test2671.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import {useState} from 'react';
import {View, Button, Text, Dimensions, StyleSheet} from 'react-native';
import Svg, {Line, Rect} from 'react-native-svg';

const initialWidth = 150;

const deviceHeight = Dimensions.get('window').height;

export default function Test2671() {
const [width, setWidth] = useState(initialWidth);

const lineContainerStyles = {
width,
paddingTop: 40,
};
return (
<View style={styles.container}>
<Button
title={'Change width to ' + width}
onPress={() =>
setWidth(prev =>
prev === initialWidth ? initialWidth * 2 : initialWidth,
)
}
/>
{/* NOT WORKING EXAMPLE */}
<View style={lineContainerStyles}>
<Text>Not working</Text>
<Svg height={4} width="100%" style={styles.dashedLineContainer}>
<Line
x2="100%"
x1="0"
stroke="red"
strokeWidth={4}
strokeDasharray="5, 2"
/>
</Svg>
</View>
{/* NOT WORKING EXAMPLE */}
<View style={lineContainerStyles}>
<Text>Not working</Text>
<Svg height={50} width="100%">
<Rect
x="0"
y="0"
width="100%"
height={50}
stroke="red"
strokeWidth="1"
fill="yellow"
/>
</Svg>
</View>
{/*
* WORKING EXAMPLE
* Difference
* - Svg -> overflow: "hidden"
* - Line -> x2={deviceHeight} (before there was 100%)
*/}
<View style={lineContainerStyles}>
<Text>Working</Text>
<Svg
height={4}
width="100%"
style={[
{
overflow: 'hidden',
},
styles.dashedLineContainer,
]}>
<Line
x2={deviceHeight}
x1="0"
stroke="red"
strokeWidth={4}
strokeDasharray="5, 2"
/>
</Svg>
</View>
{/* WORKING EXAMPLE - ?? */}
<View style={lineContainerStyles}>
<Text>Not working</Text>
<Svg height={50} width="100%">
<Rect
x="0"
y="0"
width={deviceHeight}
height={50}
stroke="red"
strokeWidth="1"
fill="yellow"
/>
</Svg>
</View>
</View>
);
}

const styles = StyleSheet.create({
container: {
paddingTop: 300,
},
dashedLineContainer: {
bottom: -2,
height: 4,
position: 'absolute',
},
});
1 change: 1 addition & 0 deletions apps/common/test/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import Test2455 from './Test2455';
import Test2471 from './Test2471';
import Test2520 from './Test2520';
import Test2670 from './Test2670';
import Test2671 from './Test2671';

export default function App() {
return <ColorTest />;
Expand Down