Liquid Swipe: no interaction/animation on Android

[guilhermepj]

Hello @wcandillon, your Liquid Swipe example is great, but on Android I can't drag the arrow, there is no interaction at all. I've tried cloning your project and the interaction works, but in my project (I don't use expo neither typescript) I can't interact with the arrow/liquid swipe.

I guess its some incompatibility to the dependencies (gesture-handler/reanimated). I am using react-native: 0.59.9.

I am new to react native, also apologize about my poor English

[wcandillon]

Hello,

It's very difficult to make this example work on Android. First, you would need to use Reanimated 1.3.0 which is not yet shipped with Expo. Then there is another issue with the MaskedView which doesn't animate. I discussed the tradeoffs at the end of the video. I hope this helps.

[Alb93]

Looking at https://github.com/react-native-community/react-native-masked-view/issues/22 it seems that changing MaskedViewiOS to MaskedView and using its latest version should make android example work, but at the moment I'm not able to achieve this result: it's still with no interactions for android version. Any help?

UPDATE: following react-native-gesture-handling guide for setup on android it worked like a charm :)

[prachijaveri]

@Alb93 the link you have shared to get it to work is not a valid link. Can you please detail out what changes you made to get it to work on Android. I am still stuck

[Angelk90]

@prachijaveri : https://snack.expo.io/Rfj4k3MLN

[IronTony]

Hello @wcandillon, thank you so much for the time and effort and for the videos 😄

Unfortunately also if I use the following code in my Weave.tsx file, I cannot run the example on Android

<Svg {...{ width, height }} style={StyleSheet.absoluteFill}>
  <Defs>
    <ClipPath id="mask">
      <AnimatedPath {...{ d }} />
    </ClipPath>
  </Defs>
  {children}
</Svg>

and this in Content:

   <>
      <Rect x={0} y={0} {...{ width, height }} fill={backgroundColor} clipPath="url(#mask)" />
      <Image x={16} y={100} width={width * 0.61} href={source} clipPath="url(#mask)" />
      <Text x={16} y={height / 2} fontSize={48} fontWeight={300} fill={color} clipPath="url(#mask)">
        {title1}
      </Text>
      <Text x={16} y={height / 2 + 48} fontSize={48} fontWeight={600} fill={color} clipPath="url(#mask)">
        {title2}
      </Text>
      <Text y={height / 2 + 48 * 2} fontSize={16} fill={color} clipPath="url(#mask)">
        <TSpan x={16} dy={0}>
          Lorem Ipsum dolor sit amet,
        </TSpan>
        <TSpan x={16} dy={16 + 2}>
          consectetur adipiscing elit.
        </TSpan>
        <TSpan x={16} dy={32 + 4}>
          Donec rutrum pharetra pellentesque.
        </TSpan>
      </Text>
    </>

Any other hint? These are my libs in package.json:

"react-native-gesture-handler": "1.10.1",
"react-native-reanimated": "^1.13.2",
"react-native-redash": "8.1.0",
"react-native-svg": "12.1.0",

[wanjohiryan]

For those still having the issue with android, update to the latest react-native-gesture-handler as the one @wcandillon used in this example had an issue with androidX( this is especially for vanilla react native developers) 👇🏾

https://docs.swmansion.com/react-native-gesture-handler/docs/#android

Also, if you'd like a more updated version with reanimated 2, typescript and cross-platform try the example on software mansion's react-native-reanimated git repo 👇🏾 https://www.github.com/software-mansion/react-native-reanimated/tree/master/Example%2Fsrc%2FLiquidSwipe

Happy hacking🤗