From 23b49baf79f6bd048367f4e3205dab323a31ee9d Mon Sep 17 00:00:00 2001
From: Rajat Dabade <a-rajat.dabade@mattermost.com>
Date: Tue, 24 Sep 2024 16:35:21 +0530
Subject: [PATCH] added function for back button closes emoji picker

---
 .../post_draft/draft_input/index.tsx          | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/components/post_draft/draft_input/index.tsx b/app/components/post_draft/draft_input/index.tsx
index b1f598f664..a78093b66c 100644
--- a/app/components/post_draft/draft_input/index.tsx
+++ b/app/components/post_draft/draft_input/index.tsx
@@ -4,7 +4,7 @@
 import GraphemeSplitter from 'grapheme-splitter';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {type LayoutChangeEvent, Platform, ScrollView, View, Keyboard, DeviceEventEmitter} from 'react-native';
+import {type LayoutChangeEvent, Platform, ScrollView, View, Keyboard, DeviceEventEmitter, BackHandler, type NativeEventSubscription} from 'react-native';
 import Animated, {Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {type Edge, SafeAreaView} from 'react-native-safe-area-context';
 
@@ -274,6 +274,23 @@ export default function DraftInput({
         }
     }, [isEmojiSearchFocused]);
 
+    useEffect(() => {
+        let backHandler: NativeEventSubscription | undefined;
+
+        if (Platform.OS === 'android') {
+            const backAction = () => {
+                setIsEmojiPickerOpen(false);
+                setIsEmojiSearchFocused(false);
+                return true;
+            };
+
+            backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+        }
+        return () => {
+            backHandler?.remove();
+        };
+    }, []);
+
     const animatedStyle = useAnimatedStyle(() => {
         return {
             height: height.value,