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

feat: remove UIGraphicsBeginImageContextWithOptions from repo #2117

Merged
merged 2 commits into from
Aug 21, 2023
Merged

feat: remove UIGraphicsBeginImageContextWithOptions from repo #2117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
25db748
feat: remove UIGraphicsBeginImageContextWithOptions from repo
WoLewicki Aug 16, 2023
e4e8d1a
fix: apply changes from review
WoLewicki Aug 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions Example/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -513,7 +513,7 @@ PODS:
- React-RCTText
- ReactCommon/turbomodule/core
- Yoga
- RNSVG (13.10.0):
- RNSVG (13.11.0):
- React-Core
- SocketRocket (0.6.1)
- Yoga (1.14.0)
Expand Down Expand Up @@ -741,7 +741,7 @@ SPEC CHECKSUMS:
React-utils: 0a70ea97d4e2749f336b450c082905be1d389435
ReactCommon: e593d19c9e271a6da4d0bd7f13b28cfeae5d164b
RNReanimated: 726395a2fa2f04cea340274ba57a4e659bc0d9c1
RNSVG: ee7e4ae98adade9ad8a12e7f9276504e71bd3ef7
RNSVG: 791907c36f290562750132f8d274730c3aa529f6
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
Expand Down
1 change: 1 addition & 0 deletions Example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ const names: (keyof typeof examples)[] = [
'Reanimated',
'Transforms',
'Markers',
'Mask',
];

const initialState = {
Expand Down
2 changes: 2 additions & 0 deletions Example/src/examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import * as PanResponder from './examples/PanResponder';
import * as Reanimated from './examples/Reanimated';
import * as Transforms from './examples/Transforms';
import * as Markers from './examples/Markers';
import * as Mask from './examples/Mask';

export {
Svg,
Expand All @@ -40,4 +41,5 @@ export {
Reanimated,
Transforms,
Markers,
Mask,
};
148 changes: 148 additions & 0 deletions Example/src/examples/Mask.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {
Svg,
Circle,
Path,
Rect,
Mask,
Polygon,
Defs,
LinearGradient,
Stop,
Text,
} from 'react-native-svg';

const styles = StyleSheet.create({
container: {
flex: 1,
height: 100,
width: 200,
},
svg: {
flex: 1,
alignSelf: 'stretch',
},
});

class SimpleMask extends Component {
static title = 'Simple svg with mask';
render() {
return (
<View style={styles.container}>
<Svg viewBox="-10 -10 120 120">
<Rect x={-10} y={-10} width={120} height={120} fill="blue" />
<Mask id="myMask">
<Rect x={0} y={0} width={100} height={100} fill="white" />
<Path
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black"
/>
</Mask>
<Polygon points="-10,110 110,110 110,-10" fill="orange" />
<Circle cx={50} cy={50} r={50} fill="purple" mask="url(#myMask)" />
</Svg>
</View>
);
}
}

class AnotherMask extends Component {
static title = 'Another svg with mask';
render() {
return (
<View style={styles.container}>
<Svg width={500} height={120}>
<Defs>
<Mask id="mask1" x={0} y={0} width={100} height={100}>
<Rect
x={0}
y={0}
width={100}
height={50}
stroke="none"
fill="#ffffff"
/>
</Mask>
</Defs>
<Rect
x={1}
y={1}
width={100}
height={100}
stroke="none"
fill="#0000ff"
mask="url(#mask1)"
/>
<Rect
x={1}
y={1}
width={100}
height={100}
stroke="#000000"
fill="none"
/>
</Svg>
</View>
);
}
}

class MaskWithText extends Component {
static title = 'Svg with with text and a mask with gradient';
render() {
return (
<View style={styles.container}>
<Svg width={500} height={120}>
<Defs>
<LinearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<Stop offset="0%" stopColor="#ffffff" stopOpacity={1} />
<Stop offset="100%" stopColor="#000000" stopOpacity={1} />
</LinearGradient>
<Mask id="mask4" x={0} y={0} width={200} height={100}>
<Rect
x={0}
y={0}
width={200}
height={100}
stroke="none"
fill="url(#gradient1)"
/>
</Mask>
</Defs>
<Text x={10} y={55} stroke="none" fill="#000000">
{'This text is under the rectangle'}
</Text>
<Rect
x={1}
y={1}
width={200}
height={100}
stroke="none"
fill="#0000ff"
mask="url(#mask4)"
/>
</Svg>
</View>
);
}
}

const icon = (
<Svg width="30" height="30" viewBox="-10 -10 120 120">
<Rect x={-10} y={-10} width={120} height={120} fill="blue" />
<Mask id="myMask">
<Rect x={0} y={0} width={100} height={100} fill="white" />
<Path
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black"
/>
</Mask>
<Polygon points="-10,110 110,110 110,-10" fill="orange" />
<Circle cx={50} cy={50} r={50} fill="purple" mask="url(#myMask)" />
</Svg>
);

const samples = [SimpleMask, AnotherMask, MaskWithText];

export {icon, samples};
8 changes: 4 additions & 4 deletions FabricExample/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1087,7 +1087,7 @@ PODS:
- React-RCTText
- ReactCommon/turbomodule/core
- Yoga
- RNSVG (13.10.0):
- RNSVG (13.11.0):
- hermes-engine
- RCT-Folly (= 2021.07.22.00)
- RCTRequired
Expand All @@ -1102,9 +1102,9 @@ PODS:
- React-utils
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- RNSVG/common (= 13.10.0)
- RNSVG/common (= 13.11.0)
- Yoga
- RNSVG/common (13.10.0):
- RNSVG/common (13.11.0):
- hermes-engine
- RCT-Folly (= 2021.07.22.00)
- RCTRequired
Expand Down Expand Up @@ -1359,7 +1359,7 @@ SPEC CHECKSUMS:
React-utils: 0a70ea97d4e2749f336b450c082905be1d389435
ReactCommon: e593d19c9e271a6da4d0bd7f13b28cfeae5d164b
RNReanimated: 5008fe999d57038a1c5c1163044854d453f41b98
RNSVG: b677ab45318fca9f50dc361c1e3fd7c558dd0963
RNSVG: e3b83203f24f5d275aa71ed85390222a6eb51a48
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
Expand Down
1 change: 1 addition & 0 deletions FabricExample/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ const names: (keyof typeof examples)[] = [
'Reanimated',
'Transforms',
'Markers',
'Mask',
];

const initialState = {
Expand Down
2 changes: 2 additions & 0 deletions FabricExample/src/examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import * as PanResponder from './examples/PanResponder';
import * as Reanimated from './examples/Reanimated';
import * as Transforms from './examples/Transforms';
import * as Markers from './examples/Markers';
import * as Mask from './examples/Mask';

export {
Svg,
Expand All @@ -40,4 +41,5 @@ export {
Reanimated,
Transforms,
Markers,
Mask,
};
148 changes: 148 additions & 0 deletions FabricExample/src/examples/Mask.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {
Svg,
Circle,
Path,
Rect,
Mask,
Polygon,
Defs,
LinearGradient,
Stop,
Text,
} from 'react-native-svg';

const styles = StyleSheet.create({
container: {
flex: 1,
height: 100,
width: 200,
},
svg: {
flex: 1,
alignSelf: 'stretch',
},
});

class SimpleMask extends Component {
static title = 'Simple svg with mask';
render() {
return (
<View style={styles.container}>
<Svg viewBox="-10 -10 120 120">
<Rect x={-10} y={-10} width={120} height={120} fill="blue" />
<Mask id="myMask">
<Rect x={0} y={0} width={100} height={100} fill="white" />
<Path
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black"
/>
</Mask>
<Polygon points="-10,110 110,110 110,-10" fill="orange" />
<Circle cx={50} cy={50} r={50} fill="purple" mask="url(#myMask)" />
</Svg>
</View>
);
}
}

class AnotherMask extends Component {
static title = 'Another svg with mask';
render() {
return (
<View style={styles.container}>
<Svg width={500} height={120}>
<Defs>
<Mask id="mask1" x={0} y={0} width={100} height={100}>
<Rect
x={0}
y={0}
width={100}
height={50}
stroke="none"
fill="#ffffff"
/>
</Mask>
</Defs>
<Rect
x={1}
y={1}
width={100}
height={100}
stroke="none"
fill="#0000ff"
mask="url(#mask1)"
/>
<Rect
x={1}
y={1}
width={100}
height={100}
stroke="#000000"
fill="none"
/>
</Svg>
</View>
);
}
}

class MaskWithText extends Component {
static title = 'Svg with with text and a mask with gradient';
render() {
return (
<View style={styles.container}>
<Svg width={500} height={120}>
<Defs>
<LinearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<Stop offset="0%" stopColor="#ffffff" stopOpacity={1} />
<Stop offset="100%" stopColor="#000000" stopOpacity={1} />
</LinearGradient>
<Mask id="mask4" x={0} y={0} width={200} height={100}>
<Rect
x={0}
y={0}
width={200}
height={100}
stroke="none"
fill="url(#gradient1)"
/>
</Mask>
</Defs>
<Text x={10} y={55} stroke="none" fill="#000000">
{'This text is under the rectangle'}
</Text>
<Rect
x={1}
y={1}
width={200}
height={100}
stroke="none"
fill="#0000ff"
mask="url(#mask4)"
/>
</Svg>
</View>
);
}
}

const icon = (
<Svg width="30" height="30" viewBox="-10 -10 120 120">
<Rect x={-10} y={-10} width={120} height={120} fill="blue" />
<Mask id="myMask">
<Rect x={0} y={0} width={100} height={100} fill="white" />
<Path
d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black"
/>
</Mask>
<Polygon points="-10,110 110,110 110,-10" fill="orange" />
<Circle cx={50} cy={50} r={50} fill="purple" mask="url(#myMask)" />
</Svg>
);

const samples = [SimpleMask, AnotherMask, MaskWithText];

export {icon, samples};
2 changes: 1 addition & 1 deletion RNSVG.podspec
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Pod::Spec.new do |s|
ss.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\"" }
end
else
s.platforms = { :osx => "10.14", :ios => "9.0", :tvos => "9.2" }
s.platforms = { :osx => "10.14", :ios => "10.0", :tvos => "9.2" }
s.exclude_files = 'apple/Utils/RNSVGFabricConversions.h'
s.dependency 'React-Core'
end
Expand Down