React Native MaskedView for Android

user_4132766 0
Viewed 1068

React Native has built-in MaskedViewIOS which is for ios, and it's working great. I would like to know if there's also something similar for android. Looking on the source of React Native, there's a built-in component which is named MaskedView only, which - I suspect - should work for both platforms (iOS and Android). However, trying to use it the same way as MaskedViewIOS, some error occurs.

P.S. I haven't used MaskedView on Android yet (since it broke on iOS)

P.P.S MaskedView is underfined, so I guess it is not currently support on Android. Any 3rd library open source perhaps?

react-native mask view
1 Answers

A lot of the MaskedViewIOS usage scenarios can be covered with my react-native-image-filter-kit library. "Image behind text" example from RN docs:

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

const masked = (
  <DstATopComposition
    style={{ backgroundColor: 'red' }}
    resizeCanvasTo={'dstImage'}
    dstImage={
      <Image
        style={{ width: 320, height: 320 }}
        source={{ uri: 'https://una.im/CSSgram/img/cacti.jpg' }}
        resizeMode={'contain'}
      />
    }
    srcImage={
      <TextImage
        fontName={'Gagarin'}
        text={'basic mask'}
        fontSize={80}
      />
    }
  />
)

Android:

Android

iOS:

iOS

P.S. Gagarin font was taken from here and renamed to 'Gagarin.ttf'

user_41349130
Related