fix: use MaskedView from @react-native-community/masked-view

Author: satya164

example/package.json

@@ -9,6 +9,7 @@
     "ios": "expo start --ios"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.1",
     "@react-navigation/core": "3.4.2",
     "@react-navigation/native": "^3.4.1",
     "expo": "^33.0.7",

example/yarn.lock

@@ -894,6 +894,11 @@
     xcode "^2.0.0"
     xmldoc "^0.4.0"
 
+"@react-native-community/masked-view@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.1.tgz#dbcfc5ec08efbb02d4142dd9426c8d7a396829d7"
+  integrity sha512-EyJVSbarZkOPYq+zCZLx9apMcpwkX9HvH6R+6CeVL29q88kEFemnLO/IhmE4YX/0MfalsduI8eTi7fuQh/5VeA==
+
 "@react-native-community/netinfo@2.0.10":
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-2.0.10.tgz#d28a446352e75754b78509557988359133cdbcca"

jest-setup.js

@@ -1,5 +1,7 @@
 /* eslint-env jest */
 
+jest.mock('@react-native-community/masked-view', () => () => null);
+
 jest.mock('react-native-gesture-handler', () => ({
   PanGestureHandler: 'PanGestureHandler',
   BaseButton: 'BaseButton',

package.json

@@ -49,6 +49,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@expo/vector-icons": "^10.0.3",
     "@react-native-community/bob": "^0.6.1",
+    "@react-native-community/masked-view": "^0.1.1",
     "@react-navigation/core": "^3.4.2",
     "@react-navigation/native": "^3.5.0",
     "@release-it/conventional-changelog": "^1.1.0",
@@ -75,6 +76,7 @@
     "typescript": "^3.5.2"
   },
   "peerDependencies": {
+    "@react-native-community/masked-view": "^0.1.1",
     "@react-navigation/core": "^3.0.0",
     "react": "*",
     "react-native": "*",

src/views/Header/HeaderBackButton.tsx

@@ -6,12 +6,17 @@ import {
   Platform,
   StyleSheet,
   LayoutChangeEvent,
-  MaskedViewIOS,
+  UIManager,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import MaskedView from '@react-native-community/masked-view';
 import TouchableItem from '../TouchableItem';
 import { HeaderBackButtonProps } from '../../types';
 
+const isMaskedViewAvailable =
+  // @ts-ignore
+  UIManager.getViewManagerConfig('RNCMaskedView') != null;
+
 type Props = HeaderBackButtonProps & {
   tintColor: string;
 };
@@ -95,33 +100,43 @@ class HeaderBackButton extends React.Component<Props, State> {
     }
 
     const labelElement = (
-      <Animated.Text
-        accessible={false}
-        onLayout={
-          // This measurement is used to determine if we should truncate the label when it doesn't fit
-          // Only measure it when label is not truncated because we want the measurement of full label
-          leftLabelText === label ? this.handleLabelLayout : undefined
+      <View
+        style={
+          screenLayout
+            ? // We make the button extend till the middle of the screen
+              // Otherwise it appears to cut off when translating
+              [styles.labelWrapper, { minWidth: screenLayout.width / 2 - 27 }]
+            : null
         }
-        style={[
-          styles.label,
-          tintColor ? { color: tintColor } : null,
-          labelStyle,
-        ]}
-        numberOfLines={1}
-        allowFontScaling={!!allowFontScaling}
       >
-        {leftLabelText}
-      </Animated.Text>
+        <Animated.Text
+          accessible={false}
+          onLayout={
+            // This measurement is used to determine if we should truncate the label when it doesn't fit
+            // Only measure it when label is not truncated because we want the measurement of full label
+            leftLabelText === label ? this.handleLabelLayout : undefined
+          }
+          style={[
+            styles.label,
+            tintColor ? { color: tintColor } : null,
+            labelStyle,
+          ]}
+          numberOfLines={1}
+          allowFontScaling={!!allowFontScaling}
+        >
+          {leftLabelText}
+        </Animated.Text>
+      </View>
     );
 
-    if (backImage || Platform.OS !== 'ios') {
+    if (!isMaskedViewAvailable || backImage || Platform.OS !== 'ios') {
       // When a custom backimage is specified, we can't mask the label
       // Otherwise there might be weird effect due to our mask not being the same as the image
       return labelElement;
     }
 
     return (
-      <MaskedViewIOS
+      <MaskedView
         maskElement={
           <View style={styles.iconMaskContainer}>
             <Image
@@ -132,18 +147,8 @@ class HeaderBackButton extends React.Component<Props, State> {
           </View>
         }
       >
-        <View
-          style={
-            screenLayout
-              ? // We make the button extend till the middle of the screen
-                // Otherwise it appears to cut off when translating
-                [styles.labelWrapper, { minWidth: screenLayout.width / 2 - 27 }]
-              : null
-          }
-        >
-          {labelElement}
-        </View>
-      </MaskedViewIOS>
+        {labelElement}
+      </MaskedView>
     );
   }
 

yarn.lock

@@ -1150,6 +1150,11 @@
     xcode "^2.0.0"
     xmldoc "^0.4.0"
 
+"@react-native-community/masked-view@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.1.tgz#dbcfc5ec08efbb02d4142dd9426c8d7a396829d7"
+  integrity sha512-EyJVSbarZkOPYq+zCZLx9apMcpwkX9HvH6R+6CeVL29q88kEFemnLO/IhmE4YX/0MfalsduI8eTi7fuQh/5VeA==
+
 "@react-navigation/core@^3.4.2":
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.4.2.tgz#bec563e94fde40fbab3730cdc97f22afbb2a1498"