Add web stub for this package about masked-view HOT 4 OPEN

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

from masked-view.

+1

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

from masked-view.

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;

from masked-view.

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;
`;

from masked-view.