✨ Bottom sheet retracts while taking screenshot

Feedback navigation resets when bottom sheet is closed/dismissed
mluizvitor · May 7, 2022 · 5b4a73f · 5b4a73f
1 parent a12ccee
commit 5b4a73f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { ArrowLeft } from 'phosphor-react-native';
-import { View, TextInput, Image, Text, TouchableOpacity } from 'react-native';
+import { View, TextInput, Image, Text, TouchableOpacity, Keyboard } from 'react-native';
 import { theme } from '../../theme';
 import { feedbackTypes } from '../../utils/feedbackTypes';
 import { Button } from '../Button';
@@ -19,22 +19,32 @@ interface Props {
   feedbackType: FeedbackType
   onFeedbackReset: () => void;
   onFeedbackSent: () => void;
+  onFeedbackTakingScreenshot: (data: -1 | 0 | 1) => void;
 }
 
-export function Form({feedbackType, onFeedbackReset, onFeedbackSent}: Props) {
+export function Form({feedbackType, onFeedbackReset, onFeedbackSent, onFeedbackTakingScreenshot}: Props) {
   const [comment, setComment] = useState('');
   const [screenshot, setScreenshot] = useState<string | null>(null);
   const [isSendingFeedback, setIsSendingFeedback] = useState(false);
 
   const feedbackTypeInfo = feedbackTypes[feedbackType];
 
-  function handleScreenshot() {
-    captureScreen({
-      format: 'jpg',
-      quality: 0.8,
-    })
-      .then(uri => setScreenshot(uri))
-      .catch(error => console.log(error));
+  async function handleScreenshot() {
+    onFeedbackTakingScreenshot(0);
+    Keyboard.dismiss();
+
+    setTimeout(() => {
+      captureScreen({
+        format: 'jpg',
+        quality: 0.7,
+      })
+        .then(uri => setScreenshot(uri))
+        .catch(error => console.log(error));
+    }, 250);
+
+    setTimeout(() => {
+      onFeedbackTakingScreenshot(1);
+    }, 500);
   }
 
   function handleRemoveScreenshot() {

diff --git a/src/components/WidgetWrapper/index.tsx b/src/components/WidgetWrapper/index.tsx
@@ -24,6 +24,7 @@ interface Props {
 function WidgetWrapper({children} : Props) {
   const [feedbackType, setFeedbackType] = useState<FeedbackType | null>(null);
   const [feedbackSent, setFeedbackSent] = useState(false);
+  const [feedbackSheetIndex, setFeedbackSheetIndex] = useState< -1 |0 | 1 >(-1);
 
   const bottomSheetRef = useRef<BottomSheet>(null);
 
@@ -65,11 +66,12 @@ function WidgetWrapper({children} : Props) {
       <BottomSheet
         ref={bottomSheetRef}
         snapPoints={[1, 280]}
+        index={feedbackSheetIndex}
         backgroundStyle={styles.modal}
         backdropComponent={renderBackdrop}
         handleIndicatorStyle={styles.indicator}
         enablePanDownToClose
-        style={{elevation: 24}}>
+        onClose={handleFeedbackReset}>
 
         {
           feedbackSent
@@ -82,7 +84,8 @@ function WidgetWrapper({children} : Props) {
                 <Form
                   feedbackType={feedbackType}
                   onFeedbackReset={handleFeedbackReset}
-                  onFeedbackSent={handleFeedbackSent}/>
+                  onFeedbackSent={handleFeedbackSent}
+                  onFeedbackTakingScreenshot={setFeedbackSheetIndex}/>
                 :
                 <Options
                   onFeedbackTypeChanged={setFeedbackType}/>