Safe require blur-view dependency in Card (#1179)

* safe require blur-view dependency in card and warn user if missing

* Add optional require for blur-view package in Modal component

* Update generate types

Author: ethanshar

generatedTypes/components/card/index.d.ts

@@ -73,9 +73,6 @@ declare const _default: React.ComponentClass<ViewProps & Pick<import("react-nati
     activeBackgroundColor?: string | undefined;
     useNative?: boolean | undefined;
     customValue?: any;
-    /**
-     * card custom height
-     */
     style?: false | {} | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | {
         backfaceVisibility?: "visible" | "hidden" | Animated.Value | Animated.AnimatedInterpolation | undefined;
         backgroundColor?: string | typeof import("react-native").OpaqueColorValue | Animated.Value | Animated.AnimatedInterpolation | undefined;

generatedTypes/components/modal/index.d.ts

@@ -39,6 +39,7 @@ export interface ModalProps extends RNModalProps {
 declare class Modal extends Component<ModalProps> {
     static displayName: string;
     static TopBar: typeof TopBar;
+    constructor(props: ModalProps);
     renderTouchableOverlay(): JSX.Element | undefined;
     render(): JSX.Element;
 }

src/components/card/index.tsx

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {StyleSheet, Animated, ViewStyle} from 'react-native';
-import {BlurView} from '@react-native-community/blur';
 import {Constants} from '../../helpers';
 import {Colors, BorderRadiuses} from '../../style';
 // import {PureBaseComponent} from '../../commons';
@@ -21,6 +20,11 @@ import Assets from '../../assets';
 import CardContext from './CardContext';
 import * as CardPresenter from './CardPresenter';
 
+let BlurView: any;
+try {
+  BlurView = require('@react-native-community/blur').BlurView;
+} catch (error) {} // warning in ctor, depends if user pass enableBlur
+
 const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
 const DEFAULT_SELECTION_PROPS = {
   borderWidth: 2,
@@ -125,6 +129,10 @@ class Card extends PureComponent<PropTypes, State> {
       animatedSelected: new Animated.Value(Number(this.props.selected))
     };
     this.styles = createStyles(this.props);
+
+    if (props.enableBlur && !BlurView) {
+      console.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
+    }
   }
 
   componentDidUpdate(prevProps: PropTypes) {
@@ -303,7 +311,7 @@ class Card extends PureComponent<PropTypes, State> {
         {...others}
         ref={forwardedRef}
       >
-        {Constants.isIOS && enableBlur && (
+        {Constants.isIOS && enableBlur && BlurView && (
           // @ts-ignore
           <BlurView
             style={[this.styles.blurView, {borderRadius: brRadius}]}

src/components/modal/index.tsx

@@ -1,12 +1,16 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, Modal as RNModal, ModalProps as RNModalProps, TouchableWithoutFeedback, GestureResponderEvent} from 'react-native';
-import {BlurView} from '@react-native-community/blur';
 import {Constants} from '../../helpers';
 import {asBaseComponent} from '../../commons/new';
 import TopBar, {ModalTopBarProps} from './TopBar';
 import View from '../../components/view';
 
+let BlurView: any;
+try {
+  BlurView = require('@react-native-community/blur').BlurView;
+} catch (error) {} // warning in ctor, depends if user pass enableBlur
+
 export {ModalTopBarProps};
 export interface ModalProps extends RNModalProps {
     /**
@@ -47,6 +51,14 @@ class Modal extends Component<ModalProps> {
   static displayName = 'Modal';
   static TopBar: typeof TopBar;
 
+  constructor(props: ModalProps) {
+    super(props);
+
+    if (props.enableModalBlur && !BlurView) {
+      console.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
+    }
+  }
+
   renderTouchableOverlay() {
     const {testID, overlayBackgroundColor, onBackgroundPress, accessibilityLabel = 'Dismiss'} = this.props;
     if (_.isFunction(onBackgroundPress) || !!overlayBackgroundColor) {
@@ -74,7 +86,7 @@ class Modal extends Component<ModalProps> {
 
   render() {
     const {blurView, enableModalBlur, visible, ...others} = this.props;
-    const defaultContainer = enableModalBlur && Constants.isIOS ? BlurView : View;
+    const defaultContainer = enableModalBlur && Constants.isIOS && BlurView ? BlurView : View;
     const Container: any = blurView ? blurView : defaultContainer;
 
     return (

typings/components/Toast.d.ts

@@ -9,7 +9,6 @@ import {
 import {BaseComponent} from '../commons';
 import {ColorValue} from '../style/colors';
 import {ButtonProps} from './Button';
-import {BlurViewProperties} from '@react-native-community/blur';
 
 export type ToastPosition = "relative" | "top" | "bottom";
 
@@ -31,7 +30,6 @@ export interface ToastProps {
   centerMessage?: boolean;
   animated?: boolean;
   enableBlur?: boolean;
-  blurOptions?: BlurViewProperties;
   zIndex?: number;
 }