Circular progress working perfectly on iOS but not on android emulator (don't have physical device)

[mgoldfi1]

So im building an app with circular buttons and implemented your circular progress component. It works perfectly on iOS, after 1 second of holding it does what I wanted to and the animation works very well. On android however, the animation stops halfway through the circle and starts back at 0. I thought it may be the timer function im using but i took that out and its still happening so it has to be something with re-dash i think.

here is my code for the component, the CircularProgress component comes directly from your repo so I haven't changed anything on that part.

import React from 'react'; import {TapGestureHandler, State} from 'react-native-gesture-handler'; import Animated, {cond, eq} from 'react-native-reanimated'; import {withTransition, useValue, useGestureHandler} from 'react-native-redash'; import {StyleSheet, View, Dimensions, Vibration} from 'react-native'; import CircularProgress from './Animated/CircularProgress';

const SIZE = Dimensions.get('window').height > 800 ? 150 : 125; const STROKE_WIDTH = Dimensions.get('window').height > 800 ? 12.5 : 10; const styles = StyleSheet.create({ container: { position: 'absolute', top: STROKE_WIDTH, left: STROKE_WIDTH, right: STROKE_WIDTH, bottom: STROKE_WIDTH, backgroundColor: 'white', borderRadius: (SIZE - STROKE_WIDTH * 2) / 2, zIndex: 100, justifyContent: 'center', alignItems: 'center', }, }); const AlertButton = ({children, onPress, color}) => { const state = useValue(State.UNDETERMINED); const gestureHandler = useGestureHandler({state}); const isActive = eq(state, State.BEGAN); const duration = cond(isActive, 1000, 250); const progress = withTransition(isActive, {duration});

let timer; const onStartShouldSetResponder = () => { timer = setTimeout(() => { Vibration.vibrate(); onPress(); }, 1000); return true; };

const onResponderRelease = () => { clearTimeout(timer); }; return ( <TapGestureHandler {...gestureHandler}> <Animated.View style={{borderWidth: 1, borderColor: color, borderRadius: SIZE / 2 + 1}} onStartShouldSetResponder={onStartShouldSetResponder} onResponderRelease={onResponderRelease}> <CircularProgress radius={SIZE / 2} bg="white" fg={color} {...{progress}} />

{children}

  </Animated.View>
</TapGestureHandler>

); };

export default AlertButton;

[nightmarelie]

The next code works for me

• the first thing to check is the version you are using:

  {
  "react-native-reanimated": "^1.13.1",
  "react-native-redash": "^14.2.4",
  "react-native-gesture-handler": "~1.7.0",
  }

• the second you need to make changes

import React, {
  ElementType,
} from 'react'
import { Platform } from 'react-native'
import {
  PanGestureHandler,
  TapGestureHandler,
} from 'react-native-gesture-handler'

// component
{
  // const [progress, gestureHandler] = useProgress(delayLongPress)

  const GestureHandler: ElementType = Platform.OS === 'ios'
    ? TapGestureHandler
    : PanGestureHandler

  return (
    <GestureHandler {...gestureHandler}>
      // rest of you code
    </GestureHandler>
  )
}

[mgoldfi1]

@nightmarelie Thank you so much Aleksey! Updating the packages and using the Pan handler worked for me on android