[Fix] Emoji skin tone colors aren't working/updating

[fedirjh]

Details

Fixed Issues

$ #14876
$ #14876 (comment)

Tests

1. Open any chat
2. Change skin tone for emojis
3. Search for an emoji hand
4. Send emoji
5. Verify that emoji skin tone is updated

• Verify that no errors appear in the JS console

Offline tests

1. Open any chat
2. Change skin tone for emojis
3. Search for an emoji hand
4. Send emoji
5. Verify that emoji skin tone is updated

QA Steps

1. Open any chat
2. Change skin tone for emojis
3. Search for an emoji hand
4. Send emoji
5. Verify that emoji skin tone is updated

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Screen.Recording.2023-02-15.at.11.17.15.PM.mov

Mobile Web - Chrome

Screen.Recording.2023-02-15.at.11.36.00.PM.mov

Mobile Web - Safari

Simulator.Screen.Recording.-.iPhone.13.-.2023-02-15.at.23.28.39.mp4

Desktop

Screen.Recording.2023-02-15.at.11.22.33.PM.mov

iOS

ios.mp4

Android

Screen.Recording.2023-02-16.at.12.00.44.AM.mov

[MelvinBot]

@stitesExpensify @parasharrajat One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[parasharrajat]

Screenshots

🔲 iOS / native

screen-2023-02-17_02.47.14.mp4

🔲 iOS / Safari

screen-2023-02-17_02.38.16.mp4

🔲 MacOS / Desktop

screen-2023-02-17_02.31.17.mp4

🔲 MacOS / Chrome

screen-2023-02-17_02.23.30.mp4

🔲 Android / Chrome

screen-2023-02-17_02.24.38.mp4

🔲 Android / native

screen-2023-02-17_02.35.32.mp4

[parasharrajat]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

cc: @stitesExpensify

🎀 👀 🎀 C+ reviewed

[stitesExpensify]

LGTM and tests well!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	727.002 ms → 764.197 ms (+37.194 ms, +5.1%)
Open Search Page TTI	618.108 ms → 628.402 ms (+10.295 ms, +1.7%)
App start runJsBundle	198.688 ms → 208.781 ms (+10.094 ms, +5.1%)
App start nativeLaunch	19.900 ms → 20.194 ms (+0.294 ms, +1.5%)
App start regularAppStart	0.018 ms → 0.016 ms (-0.002 ms, -10.9%)

Show details

Name	Duration
App start TTI	Baseline Mean: 727.002 ms Stdev: 29.560 ms (4.1%) Runs: 682.7152079995722 684.1737530007958 685.9257619995624 690.4892979990691 692.408662000671 695.3834409993142 702.3684349991381 704.5140879992396 706.538824999705 706.9660810008645 711.3508180007339 716.7770009990782 716.9995659999549 720.7230370007455 721.7166799996048 722.9669139999896 724.1137949991971 726.306752000004 728.2316009998322 736.6256610006094 745.809777000919 751.1396040003747 752.6123070009053 753.3179030008614 758.9169939998537 765.8614700008184 767.5042770002037 777.7732829991728 779.2921990007162 780.5450849998742 Current Mean: 764.197 ms Stdev: 25.072 ms (3.3%) Runs: 717.5195640008897 732.7910789996386 736.0286509990692 738.8263840004802 740.6295299995691 742.2737750001252 742.8661080002785 746.6546780001372 746.7177820000798 748.4071040004492 754.0719060003757 754.118036000058 754.3728870004416 754.8959819991142 755.376815000549 760.7431940007955 762.5814079996198 762.8508100006729 763.1669159997255 767.8484770003706 769.7668629996479 773.2153489999473 775.7621759995818 778.9811160005629 782.9430940002203 788.2817950006574 792.0808210000396 792.7690030001104 802.1912409998477 821.1576070003211 830.2096260003746
Open Search Page TTI	Baseline Mean: 618.108 ms Stdev: 14.795 ms (2.4%) Runs: 588.4954429995269 595.699869999662 596.8812659997493 596.9458830002695 599.2559410016984 599.9385579992086 602.4574790000916 609.3639730010182 610.4872639998794 610.7052009999752 613.3116049990058 614.6632080003619 614.8491619993001 616.1338710002601 616.591227998957 617.128907000646 619.6584479995072 620.1424969993532 620.6059160009027 621.5286049991846 624.3487139996141 625.4560949988663 627.413575001061 632.2566330004483 632.4959310013801 634.8886730000377 636.8225099984556 637.0714519992471 639.5550539996475 639.6016029994935 646.5847980007529 Current Mean: 628.402 ms Stdev: 18.402 ms (2.9%) Runs: 590.0292570013553 591.254313999787 601.0182700008154 608.403279999271 608.8861899990588 612.3339440003037 612.5306810010225 613.7544349990785 619.0115159992129 620.410157000646 624.012491999194 627.3670659996569 627.9547939989716 628.0017499998212 628.0892750006169 628.3069659993052 629.0269769988954 629.3636070005596 630.1942950002849 632.6299640014768 633.4136149995029 634.9621580000967 635.6248790007085 636.8645029999316 636.926473999396 636.9560949988663 642.8916829992086 643.2980549987406 649.7210290003568 652.7101239990443 669.3021249994636 673.6227210015059
App start runJsBundle	Baseline Mean: 198.688 ms Stdev: 23.660 ms (11.9%) Runs: 165 168 169 170 174 177 178 180 182 182 184 185 186 186 187 192 193 196 198 198 204 215 216 218 221 224 227 228 229 230 237 259 Current Mean: 208.781 ms Stdev: 18.731 ms (9.0%) Runs: 187 188 189 193 193 193 194 195 195 195 196 197 197 199 199 201 203 203 203 205 211 212 216 224 224 225 225 234 237 241 248 259
App start nativeLaunch	Baseline Mean: 19.900 ms Stdev: 2.006 ms (10.1%) Runs: 17 17 18 18 18 18 18 19 19 19 19 19 19 19 19 19 19 20 20 20 21 21 21 22 22 22 22 23 23 26 Current Mean: 20.194 ms Stdev: 1.654 ms (8.2%) Runs: 18 18 18 18 19 19 19 19 19 19 19 19 19 20 20 20 20 20 21 21 21 21 21 21 21 21 21 22 24 24 24
App start regularAppStart	Baseline Mean: 0.018 ms Stdev: 0.002 ms (12.7%) Runs: 0.015137000009417534 0.015300000086426735 0.015666000545024872 0.016235999763011932 0.016519999131560326 0.016520000994205475 0.016682999208569527 0.0167239997535944 0.016846001148223877 0.016885999590158463 0.01700899936258793 0.0174150001257658 0.017619000747799873 0.017700999975204468 0.017700999975204468 0.017780998721718788 0.01798499934375286 0.01810699887573719 0.01810700073838234 0.018188001587986946 0.018514001742005348 0.018961001187562943 0.01896199956536293 0.01989700086414814 0.019977999851107597 0.02087400108575821 0.02103699930012226 0.021362999454140663 0.02307100035250187 0.023599999025464058 0.024699000641703606 Current Mean: 0.016 ms Stdev: 0.001 ms (5.8%) Runs: 0.014485999941825867 0.014527000486850739 0.014852000400424004 0.015381000936031342 0.01550300046801567 0.015706999227404594 0.01574699953198433 0.01586899906396866 0.01590999960899353 0.01603200100362301 0.016114000231027603 0.016154000535607338 0.01619499921798706 0.01619499921798706 0.016234999522566795 0.01631700061261654 0.016397999599575996 0.016397999599575996 0.016439000144600868 0.016479000449180603 0.016600999981164932 0.01660200022161007 0.016805000603199005 0.016805000603199005 0.016927000135183334 0.017090000212192535 0.017495999112725258 0.017496999353170395 0.017577998340129852 0.017944999039173126 0.018432000651955605 0.01855499856173992

[OSBotify]

🚀 Deployed to staging by https://github.com/stitesExpensify in version: 1.2.74-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/chiragsalian in version: 1.2.74-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅