web
mobile
Edit these docs Rate these docs

React Mobile Masks

React Mobile Masks - Bootstrap 4 & Material Design

React Mobile masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible in the picture.


With text

Android
Android masks
iOS
iOS masks

        <script>
        import React, { Component } from 'react';
        import { ScrollView, View, Text, Image } from 'react-native';

        export default class MasksPage extends Component {

          render(){
            <Mask
              source={'/your-url'}
              style={{ marginBottom: 10 }}
            >
              <Text style={{ color: '#fff' }}> Text </Text>
            </Mask>
          }
        }

        </script>
      

Dark light

Android
Android masks
iOS
iOS masks

        <script>
        import React, { Component } from 'react';
        import { ScrollView, View, Text, Image } from 'react-native';

        export default class MasksPage extends Component {

          render(){
            <Mask
              style={{ marginBottom: 10 }}
              source={'/your-url'}
              overlay='dark'
              light
            >
              <Text style={{ color: '#fff' }}> Dark light </Text>
            </Mask>
          }
        }

        </script>
      

Dark slight

Android
Android masks
iOS
iOS masks

        <script>
        import React, { Component } from 'react';
        import { ScrollView, View, Text, Image } from 'react-native';

        export default class MasksPage extends Component {

          render(){
            <Mask
              style={{ marginBottom: 10 }}
              source={'/your-url'}
              overlay='dark'
              slight
            >
              <Text style={{ color: '#fff' }}> Dark slight </Text>
            </Mask>
          }
        }

        </script>
      

Dark strong

Android
Android masks
iOS
iOS masks

        <script>
        import React, { Component } from 'react';
        import { ScrollView, View, Text, Image } from 'react-native';

        export default class MasksPage extends Component {

          render(){
            <Mask
              style={{ marginBottom: 10 }}
              source={'/your-url'}
              overlay='dark'
            >
              <Text style={{ color: '#fff' }}> Dark strong </Text>
            </Mask>
          }
        }

        </script>
      
Edit these docs Rate these docs

Masks - API

In this section you will find advanced information about the Masks component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


            import { MDBMask } from 'mdbreact-mobile';
      

API Reference: Properties

Name Type Default Description Example
soure string '' Link <MDBMask source />
overlay boolean '' Defines mask's background overlay. Available options: dark, light. <MDBMask overlay="dark" />
slight boolean true Defines mask's background slight. Available options: true/false. <MDBMask slight />