Merge pull request #37 from Thinkmill/fix-30

Fix for Modal Component crashing on Android
Thinkmill · Mar 8, 2017 · f384d2d · f384d2d
2 parents 8679650 + 64645ff
commit f384d2d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -150,6 +150,19 @@ dependencies {
     compile "com.facebook.react:react-native:+"  // From node_modules
 }
 
+repositories {
+    maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
+}
+
+buildscript {
+    repositories {
+        maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
+    }
+    dependencies {
+        classpath 'com.fivehundredpx:blurringview:1.0.0'
+    }
+}
+
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {

diff --git a/app/components/Modal/index.js b/app/components/Modal/index.js
@@ -4,8 +4,10 @@ import {
   Animated,
   Dimensions,
   Modal as RNModal,
+  Platform,
   StyleSheet,
   TouchableOpacity,
+  View,
 } from 'react-native';
 import { BlurView } from 'react-native-blur';
 
@@ -99,16 +101,25 @@ export default class Modal extends Component {
       return { transform: transformAnimations };
     };
 
+    // react-native-blur crashes the app on android. Not sure why.
+    // To replicate just swap the comments on these lines.
+    // const blurView = false
+    const blurView = Platform.OS === 'android'
+      ? <View style={[styles.blur, { backgroundColor: 'rgba(0, 0, 0, 0.8)' }]}>
+          <TouchableOpacity onPress={this.onClose} style={styles.touchable} />
+        </View>
+      : <BlurView
+          blurAmount={blurAmount}
+          blurType={blurType}
+          style={styles.blur}
+        >
+          <TouchableOpacity onPress={this.onClose} style={styles.touchable} />
+        </BlurView>;
+
     return (
       <RNModal animationType="none" transparent visible>
         <Animated.View style={[styles.blockout, blockoutDynamicStyles]}>
-          <BlurView
-            blurAmount={blurAmount}
-            blurType={blurType}
-            style={styles.blur}
-          >
-            <TouchableOpacity onPress={this.onClose} style={styles.touchable} />
-          </BlurView>
+          {blurView}
           <Animated.View style={[style, getDialogDynamicStyles()]}>
             {this.props.children}
           </Animated.View>

diff --git a/app/scenes/Talk/index.js b/app/scenes/Talk/index.js
@@ -166,7 +166,6 @@ export default class Talk extends Component {
     });
   };
   toggleSpeakerModal = (data: Object) => {
-    console.log('data', data);
     this.setState({
       modalIsOpen: !this.state.modalIsOpen,
       modalSpeaker: data,