enable back usage of react-native-blur

Author: ethanshar

ios/Podfile.lock

@@ -227,7 +227,7 @@ PODS:
     - React
   - ReactNativeUiLib (2.0.1):
     - React
-  - RNCAsyncStorage (1.6.3):
+  - RNCAsyncStorage (1.7.1):
     - React
   - RNGestureHandler (1.5.2):
     - React
@@ -381,7 +381,7 @@ SPEC CHECKSUMS:
   ReactNativeKeyboardTrackingView: a240a6a0dba852bb107109a7ec7e98b884055977
   ReactNativeNavigation: bed6f504aa1a4dadd151503bf99d0ef96d06847f
   ReactNativeUiLib: 217f90ec42d9cfcd136a442f6963cd9c744e0bc1
-  RNCAsyncStorage: 6b57de0f6cb0dcfd17521af1681fa39001d3efff
+  RNCAsyncStorage: 8539fc80a0075fcc9c8e2dff84cd22dc5bf1dacf
   RNGestureHandler: 946a7691e41df61e2c4b1884deab41a4cdc3afff
   RNReanimated: b2ab0b693dddd2339bd2f300e770f6302d2e960c
   RNTextSize: 91955a6ea2adda9dc7802ce472b7a4dc717686f6

package.json

@@ -56,7 +56,7 @@
     "@babel/preset-env": "^7.3.1",
     "@babel/runtime": "^7.4.2",
     "@react-native-community/async-storage": "^1.6.2",
-    "@react-native-community/blur": "git+https://github.com/react-native-community/react-native-blur.git#master",
+    "@react-native-community/blur": "^3.4.1",
     "@react-native-community/eslint-config": "latest",
     "@types/prop-types": "^15.5.3",
     "@types/react-native": "^0.55.21",
@@ -90,6 +90,7 @@
     "react-native": ">=0.51.0",
     "react-native-gesture-handler": ">=1.5.0",
     "react-native-reanimated": ">=1.4.0",
+    "@react-native-community/blur": ">=3.4.1",
     "react-native-interactable": ">=2.0.0"
   },
   "jest": {

src/components/card/CardSection.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {StyleSheet} from 'react-native';
-// import {BlurView} from '@react-native-community/blur';
+import {BlurView} from '@react-native-community/blur';
 import {BaseComponent} from '../../commons';
-// import {Constants} from '../../helpers';
+import {Constants} from '../../helpers';
 import View from '../view';
 
 /**
@@ -46,8 +46,8 @@ export default class CardSection extends BaseComponent {
   }
 
   render() {
-    const {/* enableBlur,  */blurOptions, style, ...others} = this.props;
-    const Container = /* Constants.isIOS && enableBlur ? BlurView :  */View;
+    const {enableBlur, blurOptions, style, ...others} = this.props;
+    const Container = Constants.isIOS && enableBlur ? BlurView : View;
     const {paddings} = this.state;
     return (
       <Container {...blurOptions} style={[this.styles.container, paddings, style]} {...others}>

src/components/card/index.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, ViewPropTypes, Animated} from 'react-native';
-// import {BlurView} from '@react-native-community/blur';
+import {BlurView} from '@react-native-community/blur';
 import {Constants} from '../../helpers';
 import {Colors, BorderRadiuses} from '../../style';
 import {PureBaseComponent} from '../../commons';
@@ -218,8 +218,8 @@ class Card extends PureBaseComponent {
   }
 
   render() {
-    const {onPress, style, selected, containerStyle, /* enableBlur, */ ...others} = this.getThemeProps();
-    // const blurOptions = this.getBlurOptions();
+    const {onPress, style, selected, containerStyle, enableBlur, ...others} = this.getThemeProps();
+    const blurOptions = this.getBlurOptions();
     const Container = onPress ? TouchableOpacity : View;
     const brRadius = this.borderRadius;
 
@@ -241,9 +241,9 @@ class Card extends PureBaseComponent {
         {...others}
         ref={this.setRef}
       >
-        {/* {Constants.isIOS && enableBlur && (
+        {Constants.isIOS && enableBlur && (
           <BlurView style={[this.styles.blurView, {borderRadius: brRadius}]} {...blurOptions}/>
-        )} */}
+        )}
 
         {this.renderChildren()}
         {this.renderSelection()}

src/components/toast/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import {View as AnimatableView, Text as AnimatableText} from 'react-native-animatable';
-// import {BlurView} from '@react-native-community/blur';
+import {BlurView} from '@react-native-community/blur';
 import {BaseComponent} from '../../commons';
 import {AnimatableManager, ThemeManager, Colors, Typography, BorderRadiuses} from '../../style';
 import Assets from '../../assets';
@@ -282,13 +282,13 @@ export default class Toast extends BaseComponent {
 
   // This weird layout should support iphoneX safe area
   render() {
-    const {backgroundColor, actions, /* enableBlur,  */testID, zIndex, renderContent} = this.getThemeProps();
+    const {backgroundColor, actions, enableBlur, testID, zIndex, renderContent} = this.getThemeProps();
     const {animationConfig} = this.state;
     const hasOneAction = _.size(actions) === 1;
     const hasTwoActions = _.size(actions) === 2;
     const positionStyle = this.getPositionStyle();
     const height = getHeight(this.props);
-    // const blurOptions = this.getBlurOptions();
+    const blurOptions = this.getBlurOptions();
 
     const shouldShowToast = this.shouldShowToast();
     if (!shouldShowToast) {
@@ -308,7 +308,7 @@ export default class Toast extends BaseComponent {
           ]}
           {...animationConfig}
         >
-          {/* {enableBlur && <BlurView style={this.styles.blurView} {...blurOptions}/>} */}
+          {enableBlur && <BlurView style={this.styles.blurView} {...blurOptions}/>}
           {this.renderContent()}
         </AnimatableView>
       </View>

src/screensComponents/modal/index.js

@@ -2,8 +2,8 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, Modal as RNModal, TouchableWithoutFeedback} from 'react-native';
-// import {BlurView} from '@react-native-community/blur';
-// import {Constants} from '../../helpers';
+import {BlurView} from '@react-native-community/blur';
+import {Constants} from '../../helpers';
 import {BaseComponent} from '../../commons';
 import TopBar from './TopBar';
 import View from '../../components/view';
@@ -55,8 +55,8 @@ export default class Modal extends BaseComponent {
   }
 
   render() {
-    const {blurView, /* enableModalBlur, */ visible, ...others} = this.props;
-    const defaultContainer = /* enableModalBlur && Constants.isIOS ? BlurView :  */View;
+    const {blurView, enableModalBlur, visible, ...others} = this.props;
+    const defaultContainer = enableModalBlur && Constants.isIOS ? BlurView : View;
     const Container = blurView ? blurView : defaultContainer;
 
     return (