From 7959d01cf16f8fad81226ed39e0d2ea90ba0c9f9 Mon Sep 17 00:00:00 2001
From: Ashutosh Khanduala <ashu.khanduala@gmail.com>
Date: Sat, 7 Oct 2023 13:40:34 +0530
Subject: [PATCH] progress #4: emojiList -> emojiListRef

Signed-off-by: Ashutosh Khanduala <ashu.khanduala@gmail.com>
---
 .../EmojiPickerMenu/EmojiPickerMenu copy.tsx         | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/EmojiPickerMenu copy.tsx b/src/components/EmojiPicker/EmojiPickerMenu/EmojiPickerMenu copy.tsx
index 1b57a53489d6..6f8665e63409 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/EmojiPickerMenu copy.tsx	
+++ b/src/components/EmojiPicker/EmojiPickerMenu/EmojiPickerMenu copy.tsx	
@@ -57,7 +57,7 @@ const EmojiPickerMenu = (props) => {
     const searchInputRef = useRef<RNTextInput>(null); // TODO: is RNTextInput correct?
 
     // Ref for emoji FlatList
-    this.emojiList = undefined;
+    const emojiListRef = useRef<FlatList>(null);
 
     // We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will
     // prevent auto focus when open picker for mobile device
@@ -374,8 +374,8 @@ const EmojiPickerMenu = (props) => {
 
     function scrollToHeader(headerIndex) {
         const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT;
-        this.emojiList.flashScrollIndicators();
-        this.emojiList.scrollToOffset({offset: calculatedOffset, animated: true});
+        emojiListRef.current?.flashScrollIndicators();
+        emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true});
     }
 
     /**
@@ -385,9 +385,7 @@ const EmojiPickerMenu = (props) => {
      */
     function filterEmojis(searchTerm) {
         const normalizedSearchTerm = searchTerm.toLowerCase().trim().replaceAll(':', '');
-        if (this.emojiList) {
-            this.emojiList.scrollToOffset({offset: 0, animated: false});
-        }
+        emojiListRef.current?.scrollToOffset({offset: 0, animated: false});
         if (normalizedSearchTerm === '') {
             // There are no headers when searching, so we need to re-make them sticky when there is no search term
             this.setState({
@@ -523,7 +521,7 @@ const EmojiPickerMenu = (props) => {
                 />
             )}
             <FlatList
-                ref={(el) => (this.emojiList = el)}
+                ref={emojiListRef}
                 data={this.state.filteredEmojis}
                 renderItem={this.renderItem}
                 keyExtractor={this.keyExtractor}