MotiPressable stops firing onPresses on Android

[jstheoriginal]

On Android (emulator and device), MotiPressable stops firing the onPress after a couple of times or doesn't fire it at all, while Pressable works fine. 🤔 iOS has no issues.

Any idea why this might be and/or what the fix is?

I've tried it on the latest RNGH and it happens still.

[nandorojo]

Did you wrap your app in the gesture handler root view?

[jstheoriginal]

Yeah GestureHandlerRootView is the first element in App.js. 🤔

[nandorojo]

hm, under the hood we’re using TouchableWithoutFeedback from RNGH. Can you see if that works?

I wonder if it’s because TouchableWithoutFeedback is wrapped with createAnimatedComponent in MotiPressable?

[agallio]

I tried using pure TouchableWithoutFeedback from RNGH and the result is the same. It won't do anything when pressed. A related issue here: https://github.com/software-mansion/react-native-gesture-handler/issues/864. This also impacts solito's MotiLink since it is using the same component under the hood.

[grgmgd]

@agallio Were you able to fix it by passing the style props?

[nandorojo]

I see that this fix is suggested:

  containerStyle={{ flex: 1 }}
  style={{ flex: 1 }}

Maybe you could try wrapping the element with a View and then apply those props to MotiPressable/MotiLink?

[agallio]

Unfortunately not, @grgmgd. Tried using both style prop. And even tried wrapping the component with View, but it stills doesn’t work.

[nandorojo]

I wonder if we should use Pressable on Android then? It was my understanding that TouchableWithoutFeedback from RNGH would have better performance 🤷‍♂️

[grgmgd]

I was able to fix it by wrapping my app with the new GestureHandlerRootView that was introduced in v2. I forgot to add it.

[nandorojo]

It seems like some people are still facing this issue.

[nandorojo]

Published a fix at 0.0.18-alpha.15.

yarn add moti@canary. Will be part of the v18 release.

[devoren]

Same problem on the device, in the emulator it works fine, but it doesn't work on the real device. This is interesting because I use it in two components, and in one component it works, but not in the second, both inside the BottomSheet: A non-pressable component:

<MotiPressable
  animate={({ hovered, pressed }) => {
  'worklet';
  return {
      scale: hovered || pressed ? 0.9 : 1,
  };
  }}
  onPress={getUserLocation}
  style={styles.userLocationButton}>
  <Icons.Linear.MapArrow
  color={'#272727'}
  />
</MotiPressable>

This one works inside flatlist:

const renderItem = useCallback(
({ item, index }) => (
<MotiPressable
style={[
    index === 0 ? { marginLeft: 16 } : undefined,
    index === data.length - 1 ? { marginRight: 16 } : undefined,
]}
animate={({ hovered, pressed }) => {
    'worklet';

    return {
        scale: hovered || pressed ? 0.97 : 1,
    };
}}
onPress={() => setSelectedType(index)}>
<MotiView
    animate={{ backgroundColor: selectedType === index ? '#cece' : 'white' }}
    style={styles.itemContainer}>
    <Image
        source={item.image}
        style={{
            width: 50,
            height: 30,
            resizeMode: 'contain',
            opacity: selectedType === index ? 1 : 0.5,
        }}
    />
    <Text
        style={{
            fontWeight: selectedType === index ? '500' : '400',
            opacity: selectedType === index ? 1 : 0.5,
            color: '#272727',
        }}>
        {item.title}
    </Text>
        <Text
            style={{
                color: '#272727',
                fontSize: 16,
                fontWeight: selectedType === index ? '500' : '400',
            }}>
            {item.price}
        </Text>
</MotiView>
</MotiPressable>
),
[selectedType, setSelectedType],
);

[nandorojo]

are you on the latest moti

[devoren]

@nandorojo "moti": "^0.25.1"

[devoren]

I'm using it as a button that has an absolute position above the map.

[2Senn]

Same issue as @devoren ... I am on Moti 0.26.0. Is there still no known fix for this? My button is also absolutely positioned. Sometimes the onPress fires and sometimes it does not (Only on android)