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.

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

fix: Android group opacity prop #2417

Merged
merged 3 commits into from
Sep 12, 2024
Merged

fix: Android group opacity prop #2417

merged 3 commits into from
Sep 12, 2024

Conversation

jakex7
Copy link
Member

@jakex7 jakex7 commented Aug 20, 2024

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

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
Zrzut ekranu 2024-08-20 o 15 44 13 Zrzut ekranu 2024-08-20 o 15 44 26 image

Test Plan

Example above is available in test-examples app as Test2417

Compatibility

OS Implemented
Android

@jakex7 jakex7 marked this pull request as ready for review August 21, 2024 07:25
@bohdanprog
Copy link
Member

Closes #1430

@jakex7 jakex7 merged commit d05f69e into main Sep 12, 2024
3 of 4 checks passed
@jakex7 jakex7 deleted the @jakex7/fixGroupOpacityAndroid branch September 12, 2024 11:42
jakex7 added a commit that referenced this pull request Sep 16, 2024
# Summary

Improve #2417 by applying offscreen canvas only when opacity attribute
is set

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅      |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inconsistent rendering of opacity in <G> element on Android and iOS
2 participants