rive-app / rive-app/rive-react-native

[ANDROID] Pointer doesn't stay pressed on slider animation

Open
#224 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
783
Forks
81
Avg merge
3d 6h
Merged PRs (30d)
3

Description

Description

Hi, I'm trying to use a slider animation, a button should slide when pressed and the pointer moves but when I press the button, the button state change and onStateChanged is triggered with the pressed state and then instantly after that it is triggered again with the un-pressed state as if I have put my finger up even though I still have my finger on the screen and didn't started to move.

Provide a Repro
import { useRef } from "react"
import { View } from "react-native"

import Rive, { RiveRef } from "rive-react-native"

export const TestRiveScreen = () => {
  const riveRef = useRef<RiveRef>(null)

  return (
    <View style={{ justifyContent: "center" }}>
      <Rive
        ref={riveRef}
        resourceName="test_slider"
        stateMachineName="Slider Machine"
        autoplay={true}
        onRiveEventReceived={(event) => {
          console.log("event", event)
        }}
        onStateChanged={(machine, name) => {
          console.log(machine, name)
        }}
        style={{ width: "100%", height: 400 }}
      />
    </View>
  )
}
Source .riv/.rev file

https://rive.app/community/4409-9028-slider-example/

Expected behavior

The button should slide with the finger and the button un-pressed state should not trigger if my finger is still pressed in

Device & Versions (please complete the following information)
  • Device: [Android Emulator]
  • OS: [Android]
  • NPM Version: [8.19.3]
Additional context

The same code with the same animation works fine on iOS

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the supplied TestRiveScreen with the linked test_slider .riv file on Android, focusing on the Rive component's pointer handling and onStateChanged callbacks. Compare the behavior with iOS and verify that the pressed state remains active while the finger stays down and moves the slider.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.