From 8ec6a69d96cc78e4b415ee6b0fb691786f4af8ea Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>
Date: Wed, 7 Jul 2021 17:07:52 +0200
Subject: [PATCH] build: add backdrop

---
 src/EmojiPicker.tsx | 57 ++++++++++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/EmojiPicker.tsx b/src/EmojiPicker.tsx
index d5c3db7..9f87f42 100644
--- a/src/EmojiPicker.tsx
+++ b/src/EmojiPicker.tsx
@@ -5,6 +5,8 @@ import {
   Animated,
   useWindowDimensions,
   StyleSheet,
+  TouchableOpacity,
+  View,
 } from 'react-native';
 import type { EmojiKeyboardProps } from './types';
 import { EmojiKeyboard } from './EmojiKeyboard';
@@ -26,20 +28,34 @@ export const EmojiPicker = ({
 
   return (
     <Modal visible={isOpen} animationType="slide" transparent={true}>
-      <SafeAreaView style={styles.modalContainer}>
-        <Knob height={height} offsetY={offsetY} onClose={onClose} />
-        <Animated.View style={{ height: Animated.subtract(height, offsetY) }}>
-          <EmojiKeyboard
-            onEmojiSelected={(emoji) => {
-              height.setValue(screenHeight * 0.4);
-              offsetY.setValue(0);
-              onEmojiSelected(emoji);
-              onClose();
-            }}
-            containerStyles={styles.container}
-          />
-        </Animated.View>
-      </SafeAreaView>
+      <TouchableOpacity
+        style={styles.modalContainer}
+        activeOpacity={1}
+        onPress={onClose}
+      >
+        <View style={[styles.modalContainer, styles.backdrop]}>
+          <SafeAreaView style={styles.modalContainer}>
+            <TouchableOpacity activeOpacity={1}>
+              <>
+                <Knob height={height} offsetY={offsetY} onClose={onClose} />
+                <Animated.View
+                  style={{ height: Animated.subtract(height, offsetY) }}
+                >
+                  <EmojiKeyboard
+                    onEmojiSelected={(emoji) => {
+                      height.setValue(screenHeight * 0.4);
+                      offsetY.setValue(0);
+                      onEmojiSelected(emoji);
+                      onClose();
+                    }}
+                    containerStyles={styles.container}
+                  />
+                </Animated.View>
+              </>
+            </TouchableOpacity>
+          </SafeAreaView>
+        </View>
+      </TouchableOpacity>
     </Modal>
   );
 };
@@ -54,16 +70,5 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 0 },
     shadowRadius: 5,
   },
-  knob: {
-    height: 8,
-    width: 50,
-    backgroundColor: '#fff',
-    marginBottom: 10,
-    alignSelf: 'center',
-    borderRadius: 4,
-    shadowColor: 'black',
-    shadowOpacity: 0.15,
-    shadowOffset: { width: 0, height: 0 },
-    shadowRadius: 5,
-  },
+  backdrop: { backgroundColor: '#00000055' },
 });