Анимировать кнопку переключения путем перетаскивания, а также случайный интервал

Question

Я отчаянный новичок RN, нуждающийся в кнопке переключения, которая щелкает между включением и выключением. Он не должен быть кликабельным, но вместо этого перетаскиваемым.

Я также хочу, чтобы кнопка время от времени анимировала некоторое расстояние (от 0 до 5-10% и обратно), причудливый способ показать, что этоперетаскиваемый (и для привлечения CTA).

Я успешно выполнил перетаскивание (response-native-жест-обработчик). Но я не могу понять, как подключить «спорадические прыжки».

Мне бы очень хотелось услышать ваше мнение по этому поводу.

Очень благодарен!

Конструктор

constructor(props) {
    super(props);

    this.translateX = new Value(0);
    const dragX = new Value(0);
    const state = new Value(-1);
    const dragXEnd = new Value(END_POSITION);

    this.onGestureEvent = event([
      {
        nativeEvent: {
          translationX: dragX,
          state
        }
      }
    ]);

    const clock = new Clock();
    const transX = new Value(0);
    const isRun = new Value(0);
    this.translateX = cond(eq(state, State.ACTIVE), [
      // If state active
      stopClock(clock),
      // Keep handle between 0 and END_POSITION (clamp)
      set(transX, cond(
        lessThan(dragX, 0), 0, cond(
          greaterThan(dragX, END_POSITION), END_POSITION, dragX
        )
      )),
      transX
    ], [
      // If state not active
      cond(
        and(defined(transX), eq(state, State.END)),
        [
          set(transX, cond(
            // If dragged Less then 50% => bounce back to 0, else animate to end position
            lessThan(transX, divide(END_POSITION, 2)),
            runBounce(clock, transX, 0),
            timing({clock, duration: 200, from: transX, to: END_POSITION, easing: Easing.sin })
          )),
          cond(
            // Make sure callback is only trigged once when handle is at end position
            and(eq(isRun, 0), eq(transX, END_POSITION)), [
              set(isRun, 1),
              call([], props.callback)
            ]
          )
        ]
      ),
      transX
    ]);
}

Визуализация

  render() {
    return(
      <View style={ styles.container }>
        <View style={ styles.sliderContainer }>
          <PanGestureHandler
            activeOffsetX={1}
            onGestureEvent={ this.onGestureEvent }
            onHandlerStateChange={ this.onGestureEvent }
          >
            <Animated.View style={[ styles.handle, {
              transform: [{ translateX: this.translateX }]
            }]}>
            </Animated.View>
          </PanGestureHandler>
        </View>
      </View>
    );
  }