From 9c35a8415568ef02ceafd538fb677820879dfc73 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Mon, 9 May 2022 20:07:54 +0545 Subject: [PATCH 1/7] Fix emoji offset issues --- src/CONST.js | 4 ++-- src/components/EmojiPicker/EmojiPickerMenu/index.js | 4 ++-- src/libs/EmojiUtils.js | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 894cf295b27c0..0f5fd7e222719 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -424,8 +424,8 @@ const CONST = { WIDTH: 320, HEIGHT: 400, }, - NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 300, - EMOJI_PICKER_ITEM_HEIGHT: 40, + NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 295, + EMOJI_PICKER_ITEM_HEIGHT: 34.5, EMOJI_PICKER_HEADER_HEIGHT: 38, COMPOSER_MAX_HEIGHT: 125, diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 2d557eb75d5cf..b5c2457d7b856 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -328,8 +328,8 @@ class EmojiPickerMenu extends Component { let targetOffset = this.currentScrollOffset; if (offsetAtEmojiBottom - this.currentScrollOffset >= CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT) { targetOffset = offsetAtEmojiBottom - CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT; - } else if (offsetAtEmojiTop - CONST.EMOJI_PICKER_ITEM_HEIGHT <= this.currentScrollOffset) { - targetOffset = offsetAtEmojiTop - CONST.EMOJI_PICKER_ITEM_HEIGHT; + } else if (offsetAtEmojiTop - CONST.EMOJI_PICKER_HEADER_HEIGHT <= this.currentScrollOffset) { + targetOffset = offsetAtEmojiTop - CONST.EMOJI_PICKER_HEADER_HEIGHT; } if (targetOffset !== this.currentScrollOffset) { // Disable pointer events so that onHover doesn't get triggered when the items move while we're scrolling diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index 61684d37d0f96..98aac26d1f022 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -95,7 +95,9 @@ function getDynamicHeaderIndices(emojis) { function getDynamicSpacing(emojiCount, suffix) { const spacerEmojis = []; let modLength = CONST.EMOJI_NUM_PER_ROW - (emojiCount % CONST.EMOJI_NUM_PER_ROW); - while (modLength > 0) { + + // Empty spaces is pushed if the given row has less than eight emojis + while (modLength > 0 && modLength < CONST.EMOJI_NUM_PER_ROW) { spacerEmojis.push({ code: `${CONST.EMOJI_SPACER}_${suffix}_${modLength}`, spacer: true, From 0d9d205fd8edec1fdad26062ae7e65066650a954 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Fri, 27 May 2022 19:11:45 +0545 Subject: [PATCH 2/7] Fix the height of emoji --- src/CONST.js | 2 +- src/components/EmojiPicker/EmojiPickerMenu/index.js | 1 + src/components/EmojiPicker/EmojiSkinToneList.js | 9 +++++---- src/styles/styles.js | 3 +++ src/styles/variables.js | 1 + 5 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 0f5fd7e222719..3687746222d05 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -425,7 +425,7 @@ const CONST = { HEIGHT: 400, }, NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 295, - EMOJI_PICKER_ITEM_HEIGHT: 34.5, + EMOJI_PICKER_ITEM_HEIGHT: 35, EMOJI_PICKER_HEADER_HEIGHT: 38, COMPOSER_MAX_HEIGHT: 125, diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index b5c2457d7b856..0a6f06a6f2a2f 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -467,6 +467,7 @@ class EmojiPickerMenu extends Component { : ( this.emojiList = el} + initialNumToRender={400} data={this.state.filteredEmojis} renderItem={this.renderItem} keyExtractor={item => `emoji_picker_${item.code}`} diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js index f8e2595368c5e..8ae1daff20929 100644 --- a/src/components/EmojiPicker/EmojiSkinToneList.js +++ b/src/components/EmojiPicker/EmojiSkinToneList.js @@ -59,7 +59,6 @@ class EmojiSkinToneList extends Component { () => this.setState(prev => ({isSkinToneListVisible: !prev.isSkinToneListVisible})) } style={[ - styles.pv1, styles.flex1, styles.flexRow, styles.alignSelfCenter, @@ -67,9 +66,11 @@ class EmojiSkinToneList extends Component { styles.alignItemsCenter, ]} > - - {selectedEmoji.code} - + + + {selectedEmoji.code} + + {this.props.translate('emojiPicker.skinTonePickerLabel')} diff --git a/src/styles/styles.js b/src/styles/styles.js index d022567aa2337..579f9f0d68841 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -18,6 +18,7 @@ import visibility from './utilities/visibility'; import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles'; import pointerEventsNone from './pointerEventsNone'; import overflowXHidden from './overflowXHidden'; +import CONST from '../CONST'; const picker = { backgroundColor: 'transparent', @@ -1422,12 +1423,14 @@ const styles = { fontSize: variables.emojiSize, ...spacing.pv0, ...spacing.ph0, + lineHeight: variables.emojiLineHeight, }, emojiItem: { width: '12.5%', textAlign: 'center', borderRadius: 8, + height: CONST.EMOJI_PICKER_ITEM_HEIGHT, }, emojiItemHighlighted: { diff --git a/src/styles/variables.js b/src/styles/variables.js index 4302947ac879b..75cd4574d9f78 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -37,6 +37,7 @@ export default { iconSizeXLarge: 28, iconSizeExtraLarge: 40, emojiSize: 20, + emojiLineHeight: 27, iouAmountTextSize: 40, mobileResponsiveWidthBreakpoint: 800, tabletResponsiveWidthBreakpoint: 1024, From 3c697bc60cc81794ed7948c5b79be204a12da6f1 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Fri, 30 Sep 2022 06:27:52 +0545 Subject: [PATCH 3/7] Change intitalNumToRender for better performance --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 030771211c3ec..3eb5213c39432 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -494,7 +494,7 @@ class EmojiPickerMenu extends Component { : ( this.emojiList = el} - initialNumToRender={400} + initialNumToRender={100} data={this.state.filteredEmojis} renderItem={this.renderItem} keyExtractor={item => `emoji_picker_${item.code}`} From 37622b3f11eee766ed6203f1f96b9e9939170b4f Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Thu, 20 Oct 2022 09:00:44 +0545 Subject: [PATCH 4/7] Remove initalNumToRender for better performance --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 3eb5213c39432..0a2c2c8b1e4d1 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -494,7 +494,6 @@ class EmojiPickerMenu extends Component { : ( this.emojiList = el} - initialNumToRender={100} data={this.state.filteredEmojis} renderItem={this.renderItem} keyExtractor={item => `emoji_picker_${item.code}`} From 7a226a63373555a275c214f87f70b051735dd1a9 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Thu, 3 Nov 2022 00:04:50 +0545 Subject: [PATCH 5/7] Change emoji height --- src/CONST.js | 4 ++-- src/styles/variables.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 13776daa5bd03..2520dd6de50c8 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -490,8 +490,8 @@ const CONST = { WIDTH: 320, HEIGHT: 400, }, - NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 295, - EMOJI_PICKER_ITEM_HEIGHT: 35, + NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 298, + EMOJI_PICKER_ITEM_HEIGHT: 32, EMOJI_PICKER_HEADER_HEIGHT: 38, COMPOSER_MAX_HEIGHT: 125, CHAT_FOOTER_MIN_HEIGHT: 65, diff --git a/src/styles/variables.js b/src/styles/variables.js index 1a153b72ed1f9..8f96ea62022f5 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -37,7 +37,7 @@ export default { iconSizeExtraLarge: 40, iconSizeSuperLarge: 60, emojiSize: 20, - emojiLineHeight: 27, + emojiLineHeight: 24, iouAmountTextSize: 40, mobileResponsiveWidthBreakpoint: 800, tabletResponsiveWidthBreakpoint: 1024, From 18d826f79aadc776d0744e7c64438e163c3c9ea2 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Wed, 9 Nov 2022 07:55:48 +0545 Subject: [PATCH 6/7] Align emoji center in IOS --- src/components/EmojiPicker/EmojiPickerMenuItem.js | 1 - src/styles/styles.js | 2 ++ src/styles/variables.js | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem.js b/src/components/EmojiPicker/EmojiPickerMenuItem.js index 929930efe27e6..a0c0ab2f71d67 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem.js +++ b/src/components/EmojiPicker/EmojiPickerMenuItem.js @@ -31,7 +31,6 @@ const EmojiPickerMenuItem = props => ( style={({ pressed, }) => ([ - styles.pv1, StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), props.isHighlighted ? styles.emojiItemHighlighted : {}, styles.emojiItem, diff --git a/src/styles/styles.js b/src/styles/styles.js index 199a085b5661e..b0435364e5b93 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1483,6 +1483,8 @@ const styles = { width: '12.5%', textAlign: 'center', borderRadius: 8, + paddingTop: 2, + paddingBottom:2, height: CONST.EMOJI_PICKER_ITEM_HEIGHT, }, diff --git a/src/styles/variables.js b/src/styles/variables.js index 7bd2338217273..162bde9394f7f 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -38,7 +38,7 @@ export default { iconSizeExtraLarge: 40, iconSizeSuperLarge: 60, emojiSize: 20, - emojiLineHeight: 24, + emojiLineHeight: 28, iouAmountTextSize: 40, mobileResponsiveWidthBreakpoint: 800, tabletResponsiveWidthBreakpoint: 1024, From 450146f54adfb07fb13f073061e8daa65e4fe3e8 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Wed, 9 Nov 2022 08:04:15 +0545 Subject: [PATCH 7/7] Fix lint error --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index b0435364e5b93..d8693f7812b3d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1484,7 +1484,7 @@ const styles = { textAlign: 'center', borderRadius: 8, paddingTop: 2, - paddingBottom:2, + paddingBottom: 2, height: CONST.EMOJI_PICKER_ITEM_HEIGHT, },