fix(share) Click outside event

Marin2705 · Mar 23, 2022 · e3644b7 · e3644b7
1 parent 00f7497
commit e3644b7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 27 deletions.
diff --git a/App.js b/App.js
@@ -1,7 +1,6 @@
-import { StyleSheet, Text, View, TouchableOpacity, StatusBar, Pressable, Modal } from 'react-native'
+import { StyleSheet, View, StatusBar, Modal } from 'react-native'
 import Home from './component/Home'
 import Quiz from './component/Quiz'
-import Map from './component/Map'
 import Info from './component/Info'
 import People from './component/People'
 import Form from './component/Form'
@@ -14,7 +13,7 @@ import * as React from 'react'
 import { useState } from 'react'
 import { NavigationContainer } from '@react-navigation/native'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import { LinearGradient } from 'expo-linear-gradient'
+import Pressable from 'react-native/Libraries/Components/Pressable/Pressable'
 
 const Tab = createBottomTabNavigator();
 
@@ -94,7 +93,7 @@ export default function App() {
           }}
           style={styles.modal}
         >
-        <ShareEvent childToParent={childToParent}/>
+          <ShareEvent childToParent={childToParent}/>
         </Modal>
       </View>
   )
@@ -103,5 +102,5 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-  }
+  },
 })
diff --git a/component/ShareEvent.js b/component/ShareEvent.js
@@ -16,31 +16,38 @@ function ShareEvent({ childToParent }) {
   const [touchY, setTouchY] = useState(0);
 
   return (
-    <View style={styles.popup}>
-      {/* Drag vers le bas -> déclencher l'évènement childToParent qui sera détectée par le component parent */}
-      <Pressable
-        style={{ paddingVertical: 15 }}
-        onTouchStart={(e) => setTouchY(e.nativeEvent.pageY)}
-        onTouchEnd={(e) => {
-          if (e.nativeEvent.pageY - touchY > 20) {
-            childToParent()
-          }
-        }}
-      >
-        <View style={styles.handle}></View>
-      </Pressable>
+    <View style={styles.containerPopup}>
+      <Pressable style={styles.outside}
+      onTouchEnd={(e) => {
+        childToParent()
+      }}>
 
-      <Pressable style={styles.containShare} onPress={() =>{
-        const quote = encodeURI(
-          `J'ai trouvé une application sur les jardins du Luxembourg !
-          Rejoignez-nous !`);
-        const link = encodeURI('https://zoey-app.fr');
-        const url = `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${quote}`;
-        Linking.openURL(url); }}>
-        <Text style={styles.title}>Donnez-nous votre avis !</Text>
-        <Facebook/>
       </Pressable>
+      <View style={styles.popup}>
+        {/* Drag vers le bas -> déclencher l'évènement childToParent qui sera détectée par le component parent */}
+        <Pressable
+          style={{ paddingVertical: 15 }}
+          onTouchStart={(e) => setTouchY(e.nativeEvent.pageY)}
+          onTouchEnd={(e) => {
+            if (e.nativeEvent.pageY - touchY > 20) {
+              childToParent()
+            }
+          }}
+        >
+          <View style={styles.handle}></View>
+        </Pressable>
 
+        <Pressable style={styles.containShare} onPress={() =>{
+          const quote = encodeURI(
+            `J'ai trouvé une application sur les jardins du Luxembourg !
+            Rejoignez-nous !`);
+          const link = encodeURI('https://zoey-app.fr');
+          const url = `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${quote}`;
+          Linking.openURL(url); }}>
+          <Text style={styles.title}>Donnez-nous votre avis !</Text>
+          <Facebook/>
+        </Pressable>
+      </View>
     </View>
   )
 }
@@ -71,6 +78,13 @@ function ShareEvent({ childToParent }) {
 // };
 
 const styles = StyleSheet.create({
+  containerPopup:{
+    flex: 1
+  },
+  outside: {
+    width: '100%',
+    height: "70%" ,
+  },
   popup: {
     width: '100%',
     height: "30%" ,