Merge pull request #36530 from tienifr/fix/35105

Fix: Delay when change default skin color
Expensify · Feb 19, 2024 · 935c44a · 935c44a
2 parents dcb1c83 + 47737c4
commit 935c44a
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import * as Emojis from '@assets/emojis';
@@ -27,11 +27,18 @@ function EmojiSkinToneList() {
      * @param {object} skinToneEmoji
      */
     function updateSelectedSkinTone(skinToneEmoji) {
-        toggleIsSkinToneListVisible();
         setHighlightedIndex(skinToneEmoji.skinTone);
         setPreferredSkinTone(skinToneEmoji.skinTone);
     }
 
+    useEffect(() => {
+        if (!isSkinToneListVisible) {
+            return;
+        }
+        toggleIsSkinToneListVisible();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- only run when preferredSkinTone updates
+    }, [preferredSkinTone]);
+
     const currentSkinTone = getSkinToneEmojiFromIndex(preferredSkinTone);
     return (
         <View style={[styles.flexRow, styles.p3, styles.ph4, styles.emojiPickerContainer]}>