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

MaskedView support for Android #19546

Closed
xzilja opened this issue Jun 3, 2018 · 5 comments
Closed

MaskedView support for Android #19546

xzilja opened this issue Jun 3, 2018 · 5 comments
Labels
Platform: Android Android applications. Resolution: Locked This issue was locked by the bot. Type: Discussion Long running discussion.

Comments

@xzilja
Copy link
Contributor

xzilja commented Jun 3, 2018

For Discussion

I've worked on view demonstrated below today, very pleasant experience while using MaskedViewIOS
In essence it masks Orc graphic with that dark cloud / smoky mask. On android however, I was not able to find anything similar from community and after 3h of trying to create a native component bridge for this, I came nowhere close :/

Hence I wanted to start this discussion, shall we make MaskedView more general and support it for Android as well, or are there some limitations that don't allow this (hence only IOS implementation at the moment?)

screen shot 2018-06-03 at 14 55 47

@react-native-bot react-native-bot added Type: Discussion Long running discussion. Platform: Android Android applications. labels Jun 3, 2018
@janhesters
Copy link

This would be great to have for Android!

@Bunlong
Copy link

Bunlong commented Nov 9, 2018

React Native Core Team should make MaskedView more general and support it for Android as well. This would be great to have MaskedView for Android 👍

@AlexandruVoica
Copy link

Yes! MaskedView is much needed on Android as well.

@iyegoroff
Copy link
Contributor

To achieve similar effect on Android you can use my react-native-image-filter-kit package:

import { Image } from 'react-native'
import { DstATopComposition } from 'react-native-image-filter-kit'

const style = { width: 320, height: 320 }

const masked = (
  <DstATopComposition
    dstImage={
      <Image
        style={style}
        source={{ uri: 'https://i.ytimg.com/vi/_ebwvrrBfUc/hqdefault.jpg' }}
      />
    }
    srcImage={
      <Image
        style={style}
        source={{ uri: 'https://pluspng.com/img-png/download-smoke-effect-png-images-transparent-gallery-advertisement-advertisement-336.png' }}
      />
    }
  />
)

android

Text mask example

@cpojer
Copy link
Contributor

cpojer commented Feb 15, 2019

This issue has been moved to react-native-masked-view/masked-view#3.

@cpojer cpojer closed this as completed Feb 15, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Feb 15, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 15, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Platform: Android Android applications. Resolution: Locked This issue was locked by the bot. Type: Discussion Long running discussion.
7 participants