Module `MaskedViewIOS-BsReactNative`

let make: maskElement:ReasonReact.reactElement => ?⁠accessible:bool => ?⁠accessibilityLabel:string => ?⁠accessibilityComponentType:BsReactNative.Types.accessibilityComponentType => ?⁠accessibilityTraits:list(BsReactNative.Types.accessibilityTrait) => ?⁠accessibilityRole:BsReactNative.Types.accessibilityRole => ?⁠accessibilityStates:list(BsReactNative.Types.accessibilityState) => ?⁠accessibilityHint:string => ?⁠accessibilityIgnoresInvertColors:bool => ?⁠onAccessibilityTap:(unit => unit) => ?⁠hitSlop:BsReactNative.Types.insets => ?⁠onLayout:(BsReactNative.RNEvent.NativeLayoutEvent.t => unit) => ?⁠onMagicTap:(unit => unit) => ?⁠responderHandlers:BsReactNative.Types.touchResponderHandlers => ?⁠pointerEvents:BsReactNative.Types.pointerEvents => ?⁠removeClippedSubviews:bool => ?⁠style:BsReactNative.Style.t => ?⁠testID:string => ?⁠accessibilityLiveRegion:BsReactNative.Types.accessibilityLiveRegion => ?⁠collapsable:bool => ?⁠importantForAccessibility:BsReactNative.Types.importantForAccessibility => ?⁠needsOffscreenAlphaCompositing:bool => ?⁠renderToHardwareTextureAndroid:bool => ?⁠accessibilityViewIsModal:bool => ?⁠shouldRasterizeIOS:bool => array(ReasonReact.reactElement) => ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps, ReasonReact.actionless);

Renders the child view with a mask specified in the maskElement prop

Example of use

The following example demonstrates rendering a View with red background behind a mask, defined as a Basic mask string.

let component = ReasonReact.statelessComponent("MyComponent");

let make = _children => {
  ...component,
  render: _self =>
    <MaskedViewIOS
      maskElement={
        <View
          style=Style.(
                  style([
                    flex(1.),
                    justifyContent(Center),
                    alignItems(Center),
                    backgroundColor(String("transparent")),
                  ])
                )>
          <Text
            style=Style.(
                    style([
                      fontSize(Float(50.0)),
                      color(String("black")),
                      fontWeight(`_700),
                    ])
                  )>
            (ReasonReact.string("Basic mask"))
          </Text>
        </View>
      }>
        <View
          style=Style.(style([flex(1.), backgroundColor(String("red"))]))
        />
      </MaskedViewIOS>,
};

You can read more on MaskedViewIOS component usage in official docs: https://facebook.github.io/react-native/docs/maskedviewios

Props

All View props are accepted.

maskElement

~maskElement: ReasonReact.reactElement