DOCSEARCHbyAlgolia
Submit Docs

@react-native-masked-view/masked-view

repository·master·Indexed 22 days ago

https://github.com/callstack/masked-view

A React Native component that allows masking children elements using a mask element, where visibility is determined by the alpha channel of the mask. Includes support for Android rendering modes (hardware/software) and web usage via modern-screenshot.

Tokens
1.4K
Snippets
7
Records
7
Agent score
28%

What's inside @react-native-masked-view/masked-view

  2. Install @react-native-masked-view/masked-view

    master

    Install the package using npm or yarn. Depending on your React Native version, follow the appropriate linking steps.

    For React Native >= 0.60

    Autolinking is supported. After installing the package, ensure you install the iOS pods:

    npx pod-install

    For React Native < 0.60

    You must manually link the native parts using the React Native CLI:

    react-native link @react-native-masked-view/masked-view
    yarn add @react-native-masked-view/masked-view
# or
npm install --save @react-native-masked-view/masked-view

  3. Use MaskedView to create masked content

    master

    The MaskedView component renders its children through a mask defined by the maskElement. The mask is based on the alpha channel (transparency) of the maskElement.

    To create a mask, provide a component to maskElement (e.g., a Text or View with a specific color/shape). The content placed inside the MaskedView (as children) will only be visible where the maskElement has non-transparent pixels.

    import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';

const App = () => {
  return (
    <MaskedView
      style={{ flex: 1, flexDirection: 'row', height: '100%' }}
      maskElement={
        <View
          style={{
            backgroundColor: 'transparent',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 60,
              color: 'black',
              fontWeight: 'bold',
            }}
          >
            Basic Mask
          </Text>
        </View>
      }
    >
      {/* Content visible through the mask */}
      <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
    </MaskedView>
  );
}

export default App;

  4. Configure Metro for the masked-view example

    master

    The masked-view-example project uses @rnx-kit/metro-config to generate its Metro configuration. The configuration explicitly sets experimentalImportSupport and inlineRequires to false within the transformer's getTransformOptions to ensure consistent transformation behavior during development or testing of the example app.

    const { makeMetroConfig } = require('@rnx-kit/metro-config');

module.exports = makeMetroConfig({
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
});

  5. Reference: androidRenderingMode prop

    master

    This prop is specific to Android and controls how the mask is rendered.

    By default, hardware mode is used for optimal performance. However, if you need to animate the maskElement, you must switch to software mode to ensure the mask updates correctly during animations.

    | Type                   | Required | Default    |
| ---------------------- | -------- | ---------- |
| `software`, `hardware` | No       | `hardware` |

  7. Import the MaskedView component

    master

    The MaskedView component is the primary entry point for creating masked views in React Native. You can import it as a default export from the package.

    Use MaskedView as a wrapper component. It takes a maskElement prop which defines the shape of the mask, and children which will be masked by that shape.

    import MaskedView from '@react-native-masked-view/masked-view';

// Usage pattern:
<MaskedView
  style={{ flex: 1 }}
  maskElement={<View />}
>
  <View />
</MaskedView>