Skip to content

Forward the nested view style as contentContainerStyle #247

@sebastian-herrera-itti

Description

@sebastian-herrera-itti

Describe the feature

Export a contentContainerStyle prop to apply to the inner View inside masked view:

Image
export default class MaskedView extends React.Component<MaskedViewProps> {
  _hasWarnedInvalidRenderMask = false;

  render(): React.Node {
    const { maskElement, children, contentContainerStyle, ...otherViewProps } = this.props;

    if (!React.isValidElement(maskElement)) {
      if (!this._hasWarnedInvalidRenderMask) {
        console.warn(
          'MaskedView: Invalid `maskElement` prop was passed to MaskedView. ' +
            'Expected a React Element. No mask will render.',
        );
        this._hasWarnedInvalidRenderMask = true;
      }
      return <View {...otherViewProps}>{children}</View>;
    }

    return (
      <RNCMaskedView {...otherViewProps}>
        <View pointerEvents="none" style={[StyleSheet.absoluteFill, contentContainerStyle]}>
          {maskElement}
        </View>
        {children}
      </RNCMaskedView>
    );
  }
}

Today we have it patched locally but it would be ideal if it were possible without the patch

Motivation

The current StyleSheet.absoluteFill is bringing problems in some cases, we have to calculate the size before apply the mask and is kinda annoying when we need to update the size after render.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions