Skin Selector Modal can have wrong Y offset

[ManuViola77]

Describe the bug
If you scroll vertically in one category and then go to a category that has emojis with skins, if you make a long tap to trigger the skin tone options for the emoji, the modal is way off the viewport (because it remembers the scrolling position from the category before). Note this doesn't happen if you scroll in the current category where the emojis with skin are (because it uses that current offset instead and that is correct).

To Reproduce
Steps to reproduce the behavior:

1. Open the EmojiPicker with params including enableSearchBar and categoryPosition="bottom"
2. Scroll down a bit in that first category
3. Move to the right to the next category
4. Long tap to see the skin of one of the emojis in that new category (DO NOT SCROLL before doing this, otherwise you wont see the error)
5. See that the skin selector modal appears off up (because it takes into account the scroll we had in the previous category)

Expected behavior
The expected behaviour should be that the skin selector modal is right above the correct emoji like this:

Screenshots

Simulator.Screen.Recording.-.iPhone.13.-.2023-05-10.at.21.50.29.mp4

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• It was reproducible in lots of devices both iOS and Android both simulator and real device.
• "rn-emoji-keyboard": "^1.2.1" -> version we have for this library
• "react-native": "0.71.4" -> react native version
• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

I made a patch with a solution that I probably need to test more but I can tell you what I did.

In the component EmojiStaticKeyboard:

Instead of having one keyboardScrollOffsetY I have an array, one for each category, like this:
const [allKeyboardScrollOffsetY, setAllKeyboardScrollOffsetY] = React.useState<number[]>(new Array(renderList.length).fill(0))

Then I have a function to update the value for one specific category, like this:

const updateCategoryScrollOffset = (index, value) => {
	setAllKeyboardScrollOffsetY(prevValue => {
		const newValue = [...prevValue];
	   	newValue[index] = value
	     return newValue
	})
}

In the render, for the EmojiCategory component, instead of send setKeyboardScrollOffsetY ={setKeyboardScrollOffsetY} I send setKeyboardScrollOffsetY={(value) => updateCategoryScrollOffset(props.index, value)}

Finally, in the SkinTones component I send keyboardScrollOffsetY={allKeyboardScrollOffsetY[activeCategoryIndex]} (you will need to have the activeCategoryIndex)

[mateki0]

Hey, thank you very much for reporting and fix proposal it was very helpful. I've done something simpler, because I didn't want to keep all these 'Y' values

[jakex7]

@ManuViola77 thanks for reporting that.
The fix also has been released in version 1.3.0 🎉

I'm closing this issue as solved. If you think it's still relevant, feel free to reopen it.