fix: add fallbacks for non-web modules

closes #95, #96

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -1,7 +1,7 @@
 import { I18nManager } from 'react-native';
 import Animated from 'react-native-reanimated';
+import getStatusBarHeight from '../utils/getStatusBarHeight';
 import { CardInterpolationProps, CardInterpolatedStyle } from '../types';
-import { getStatusBarHeight } from 'react-native-safe-area-view';
 
 const { cond, add, multiply, interpolate } = Animated;
 

packages/stack/src/utils/getStatusBarHeight.tsx

@@ -0,0 +1,9 @@
+import { Platform } from 'react-native';
+import { getStatusBarHeight as getStatusBarHeightNative } from 'react-native-safe-area-view';
+
+const getStatusBarHeight = Platform.select({
+  default: getStatusBarHeightNative,
+  web: () => 0,
+});
+
+export default getStatusBarHeight;

packages/stack/src/views/Header/HeaderBackButton.tsx

@@ -6,17 +6,12 @@ import {
   Platform,
   StyleSheet,
   LayoutChangeEvent,
-  UIManager,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import MaskedView from '@react-native-community/masked-view';
+import MaskedView from '../MaskedView';
 import TouchableItem from '../TouchableItem';
 import { HeaderLeftButtonProps } from '../../types';
 
-const isMaskedViewAvailable =
-  // @ts-ignore
-  UIManager.getViewManagerConfig('RNCMaskedView') != null;
-
 type Props = HeaderLeftButtonProps & {
   tintColor: string;
 };
@@ -129,7 +124,7 @@ class HeaderBackButton extends React.Component<Props, State> {
       </View>
     );
 
-    if (!isMaskedViewAvailable || backImage || Platform.OS !== 'ios') {
+    if (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;

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -7,10 +7,10 @@ import {
   ViewStyle,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { getStatusBarHeight } from 'react-native-safe-area-view';
 import { Route } from '@react-navigation/core';
 import HeaderBackButton from './HeaderBackButton';
 import HeaderBackground from './HeaderBackground';
+import getStatusBarHeight from '../../utils/getStatusBarHeight';
 import memoize from '../../utils/memoize';
 import {
   Layout,

packages/stack/src/views/MaskedView.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { UIManager } from 'react-native';
+import RNCMaskedView from '@react-native-community/masked-view';
+
+type Props = React.ComponentProps<typeof RNCMaskedView> & {
+  children: React.ReactElement;
+};
+
+const isMaskedViewAvailable =
+  // @ts-ignore
+  UIManager.getViewManagerConfig('RNCMaskedView') != null;
+
+export default function MaskedView({ children, ...rest }: Props) {
+  if (isMaskedViewAvailable) {
+    return <RNCMaskedView {...rest}>{children}</RNCMaskedView>;
+  }
+
+  return children;
+}

packages/stack/src/views/MaskedView.web.tsx

@@ -0,0 +1,7 @@
+type Props = {
+  children: React.ReactElement;
+};
+
+export default function MaskedView({ children }: Props) {
+  return children;
+}