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

Image as a mask for another image not rendering on Android #78

Open
bohdan145 opened this issue Aug 25, 2020 · 12 comments · May be fixed by #79
Open

Image as a mask for another image not rendering on Android #78

bohdan145 opened this issue Aug 25, 2020 · 12 comments · May be fixed by #79

Comments

@bohdan145
Copy link

Bug report

Summary

Trying to apply some image shape masking using .png image. Everything works as expected on iOS, but android doesn't render anything, just empty. If i try to replace image mask with text, android works as expected, problem exist if use image as a mask element.

Image used for masking:
shape

And result:
Снимок экрана 2020-08-25 в 18 02 32

Environment info

react-native info output:

System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 112.46 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.7.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 29
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_201 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: ^0.1.10

Reproducible sample code

code

@Only-IceSoul
Copy link

api 29?

@bohdan145
Copy link
Author

Yes

@andre-krueger andre-krueger linked a pull request Sep 18, 2020 that will close this issue
5 tasks
@arwysyah
Copy link

Yup me too , i dont know why exactly is this 😐

@arwysyah
Copy link

@Only-IceSoul can you give me how to set it up ?

@Only-IceSoul
Copy link

pixel 2 api 29

 <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{flex: 1, justifyContent:'center',alignItems:'center'}} >
      <MaskedView 
        
        maskElement={
           <Image style={{width:300,height:300} }source={ require('./shape.png')} />
        }
      >
        
        <Image style={{ width:300,height:300,backgroundColor:'green'} } source={ require('./picture.jpg')} />
      </MaskedView>
      </SafeAreaView>

@nicocolascrete
Copy link

for me it's work with resizeMode='cover' and 'repeat' and doesn't work with other resizeMode ...

@nauticalcoder
Copy link

for me it's work with resizeMode='cover' and 'repeat' and doesn't work with other resizeMode ...

This actually fixed the issue for us of having the image not display at all. Now it does display on Android, but it is incredibly slow to load, sometimes taking up to 10 seconds. This is with API 29.

@Pcpkomputer
Copy link

any update on this?

@f2rf2r
Copy link

f2rf2r commented Apr 12, 2021

We had a similar issue on our project, and managed to get it to work by setting a color to the image/shape within maskElement (previously it was transparent since we didn't think the color matters to a mask)

@Pcpkomputer
Copy link

We had a similar issue on our project, and managed to get it to work by setting a color to the image/shape within maskElement (previously it was transparent since we didn't think the color matters to a mask)

You mean apply a style props like backgroundColor or edit the transparent background of the image? Is it work as .png images? I have apply backgroundColor within image in maskElement but it's just showing rectangle mask not the one I expect

@f2rf2r
Copy link

f2rf2r commented Apr 12, 2021

We are using a SVG for the mask, so there's a color prop that we can specify which ended up affecting the fill color.

@Pcpkomputer
Copy link

We are using a SVG for the mask, so there's a color prop that we can specify which ended up affecting the fill color.

So basically it's not Image component or SVG Images Component but more like SVG component like path, rectangle, etc. Okay.

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 a pull request may close this issue.

7 participants