Add web stub for this package

[jarvisluong]

Feature request

It would be nice to add a web stub implementation for this package based on react-native-web

Possible implementation

I haven't dived in much how the actual implementation can be, however, a stub based on normal <View /> could be suffice I suppose.

Code sample

export function MaskedViewWeb({ maskElement: _ /* Not used */, ...props }: MaskedViewProps) {
  return <View {...props} />;
}

[KingAmo]

+1

i don't have the skill to help, but i also need this feature

[joseDaKing]

Implementation can be implemented with css clip path, because all browsers support css clip path with inline svg

[msvargas]

This works better for me:

import React from 'react';
import { View } from 'react-native';

function MaskedViewWeb({ maskElement, ...props }) {
	return React.createElement(View, props, maskElement);
}

export default MaskedViewWeb;

[Julia20011974]

Hello, everyone, i just used css - inset- important idea, you have 2 blocks, first - back, second - front, they lie on top of each other, and when you just get value, that show part back, and hide front, also important, they lie pixel by pixel, it for your text that your pixels don't brake

!!!!!! it's using styled for web, i mean

import styled from 'styled-components',

not in

import styled from 'styled-components/native'

   const inset = `inset(0 0 0 ${val}%)`;
   const inlineStyles = {clipPath: inset, WebkitClipPath: inset};
          <Wrapper>
            <Back>
              Upload {val}%
            </Back>
            <Front style={inlineStyles}>
              Upload {val}%
            </Front>
          </Wrapper>

const Back = styled.div`
  background: red;
  color: white;
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
`;
const Front = styled.div`
  height: 50px;
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  background: white;
  color:  red;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.3s ease-in;
  align-items: center;
  display: flex;
  justify-content: center;
`;