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

fix: Android group opacity prop (#2417)

Browse Source 
# Summary

Currently, on Android, when the `opacity` prop is applied to `G` or
`Svg` elements, it is rendered incorrectly. Instead of rendering the
children "offscreen" and then applying the opacity to the entire result,
the child elements themselves are rendered with the specified opacity.

Fixes #2046

## Example

```tsx
import {View} from 'react-native';
import {G, Rect, Svg} from 'react-native-svg';

export default function App() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Svg width="150" height="150" viewBox="0 0 150 150">
        <G opacity="0.5">
          <Rect width="100" height="100" fill="red" />
          <Rect x="50" y="50" width="100" height="100" fill="green" />
        </G>
      </Svg>

      <Svg width="150" height="150" viewBox="0 0 150 150" opacity="0.5">
        <Rect width="100" height="100" fill="red" />
        <Rect x="50" y="50" width="100" height="100" fill="green" />
      </Svg>
    </View>
  );
}
```

| Before | After | Web reference | 
| --- | --- | --- |
| <img width="200" alt="Zrzut ekranu 2024-08-20 o 15 44 13"
src="https://github.com/user-attachments/assets/68c57f7d-0375-4703-8c3c-a358fe124daa">
| <img width="200" alt="Zrzut ekranu 2024-08-20 o 15 44 26"
src="https://github.com/user-attachments/assets/ae7e24b9-edae-4b44-8785-3fc95a39fdd4">
| <img width="190" alt="image"
src="https://github.com/user-attachments/assets/1aa0491f-2936-4845-b18c-1fa669c34118">
|


## Test Plan

Example above is available in `test-examples` app as `Test2417`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅     |
This commit is contained in:
Jakub Grzywacz
2024-09-12 13:42:55 +02:00
committed by GitHub
parent 85be1d0bac
commit d05f69e3d7
3 changed files with 51 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/test-examples/index.tsx
+1
View File
@@ -29,6 +29,7 @@ import Test2366 from './src/Test2366';
import Test2397 from './src/Test2397';
import Test2403 from './src/Test2403';
import Test2407 from './src/Test2407';
import Test2417 from './src/Test2417';
export default function App() {
return <ColorTest />;
apps/test-examples/src/Test2417.tsx
+20
View File
@@ -0,0 +1,20 @@
import {View} from 'react-native';
import {G, Rect, Svg} from 'react-native-svg';
export default function App() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Svg width="150" height="150" viewBox="0 0 150 150">
<G opacity="0.5">
<Rect width="100" height="100" fill="red" />
<Rect x="50" y="50" width="100" height="100" fill="green" />
</G>
</Svg>
<Svg width="150" height="150" viewBox="0 0 150 150" opacity="0.5">
<Rect width="100" height="100" fill="red" />
<Rect x="50" y="50" width="100" height="100" fill="green" />
</Svg>
</View>
);
}