Paging through the ModalPicker

[devpascoe]

Perhaps i'm overlaying over too many views or something but i have found the ModalPicker to be way too sensitive on detecting touches when paging through emojis. A swipe is easily mistaken for a touch and selects an emoji instead of scrolling to the next page. In addition i am using local images for the emoji sheets however there seems to be a delay in paging through the ModalPicker still. I have to page waiting a good moment or two between swipes.

[pederjohnsen]

Hey @devpascoe!

Is the swipe/touch issue happening on iOS, Android or both?

With your second issue, I'm not 100% sure I understand what the issue is, you should be able to swipe to the next page regardless whether the page of emojis have finished loading or not (if the emojis are taking a long time to render, it is likely local requires is not set up correctly, sharing some of your code would be helpful here)

[devpascoe]

Hi there. iOS for now, unsure about android as i'm waiting for a test device to arrive. I have a FlatList as my root view with a button that when clicked displays the modal picker over the top. As for swipe load its like the main UI thread is waiting as the UI hangs for a moment, then i can swipe a second time and it will page in the next screen.

here is "some" code

import { Emoji, ModalPicker } from 'emoji-mart-native'
import data from 'emoji-mart-native/data/apple.json'
import dataRequires from 'emoji-mart-native/data/local-images/apple'
const { emojis: localEmojis } = dataRequires

              <ModalPicker
              isVisible={this.state.showPicker}
              showCloseButton
              onSelect={this.onAddReaction}
              onPressClose={this.cancelReaction}
              showSkinTones={false}
              style={{ height: 500 }}
              set="apple"
              data={data}
              useLocalImages={localEmojis}
              perLine={16}
              emojiSize={32}
            />

emojis load fast and definitely using the local sheet. just seems like the screen hangs for a moment once a new modal page is displayed.

[pederjohnsen]

@devpascoe thanks for reply, first thing I want to note is that some of the customization is not yet properly tested or supported so it's possible they could be causing some issues. (style/perLine/emojiSize)

As you say you are using a FlatList as the root view, are you rendering the ModalPicker inside it? Not sure but potentially this could also be causing issues.. I will try do some testing soon, thanks for all the extra info you provided :+1:

[devpascoe]

Hi there, thought i'd check in. So all my problems went away when i replaced: set="apple" data={data} useLocalImages={localEmojis}

with

native={true}

[pederjohnsen]

@devpascoe thanks for the update, I've been doing some testing but so far have been unable to reproduce the issues you described :thinking:

It'd be interesting to know if you also get those issues using our example app if you ever have time to test :confused:

Only problem with using native is if on an older device certain emojis probably won't show properly, and could potentially cause layout issues.

[johnsenpeder]

Closing for now as I've been unable to replicate and author found a work around.