Создание кастомного React Native компонента Switch с помощью библиотек Reanimated и Gesture Handler (Часть 2)

Всех приветствую! Это вторая и заключительная часть моего цикла статей по созданию кастомного компонента Switch с помощью библиотек Reanimated и Gesture Handler. Здесь мы рассмотрим реализацию логики пропса disabled, добавим пару новых фич и напишем обработку изменения состояния value вне компонента. Ознакомиться с первой частью можно здесь.

Пропс Disabled

Иногда бывают ситуации, когда нам необходимо дизейблить любые взаимодействия с компонентом, например чтобы не плодить кучу запросов на сервер и ждать выполнение асинхронной функции. В этом нам поможет специальный метод enabled, который мы добавим к нашим константам pan и tap:

 const tap = Gesture.Tap()
   .onEnd(() => {
     translateX.value = withTiming(value ? 0 : TRACK_CIRCLE_WIDTH);
     runOnJS(onValueChange)(!value);
   })
   .enabled(!disabled);
 const pan = Gesture.Pan()
   .onUpdate(({ translationX }) => {
     const translate = value
       ? TRACK_CIRCLE_WIDTH + translationX
       : translationX;
     const currentTranslate = () => {
       if (translate < 0) {
         return 0;
       }
       if (translate > TRACK_CIRCLE_WIDTH) {
         return TRACK_CIRCLE_WIDTH;
       }
       return translate;
     };
     translateX.value = currentTranslate();
   })
   .onEnd(({ translationX }) => {
     const translate = value
       ? TRACK_CIRCLE_WIDTH + translationX
       : translationX;
     const selectedSnapPoint =
       translate > TRACK_CIRCLE_WIDTH / 2 ? TRACK_CIRCLE_WIDTH : 0;
     translateX.value = withTiming(selectedSnapPoint, { duration: 100 });
     runOnJS(onValueChange)(!!selectedSnapPoint);
   })
   .enabled(!disabled);

Добавляем наш пропс disabled в тип принимаемых пропсов компонента:

type SwitchProps = {
  value: boolean;
  onValueChange: (value: boolean) => void;
  disabled?: boolean;
};

Также добавим еще несколько пропсов для управлением цветом нашего компонента, всего их четыре типа:

• ​​activeColor - цвет компонента в состоянии value = true и disabled = false

• inactiveColor - цвет компонента в состоянии value = false и disabled = false

• disabledActiveColor - цвет компонента в состоянии value = true и disabled = true

• disabledInactiveColor - цвет компонента в состоянии value = true и disabled = true

type SwitchProps = {
  value: boolean;
  onValueChange: (value: boolean) => void;
  disabled?: boolean;
  activeColor?: string;
  inactiveColor?: string;
  disabledActiveColor?: string;
  disabledInactiveColor?: string;
};

По дефолту выставим следующие цвета:

activeColor = 'darkblue',

 inactiveColor = 'darkgray',

 disabledActiveColor = 'blue',

 disabledInactiveColor = 'gray',

Немного переделаем стили нашего контейнера:

  const animatedContainerStyle = useAnimatedStyle(() => {
    const colors = disabled
      ? [disabledInactiveColor, disabledActiveColor]
      : [inactiveColor, activeColor];
    return {
      backgroundColor: interpolateColor(
        translateX.value,
        [0, TRACK_CIRCLE_WIDTH],
        colors
      ),
    };
  });

Здесь в константе colors мы выбираем один из двух массивов нужных нам цветов, необходимых нам для интерполяции, в зависимости от состояния пропса disabled

Теперь мы можем управлять disabled состоянием нашего компонента, путем изменения одноименного пропса:

Пропс shouldCancelWhenOutside

У библиотеки Gesture Handler имеется один интересный метод shouldCancelWhenOutside, который отвечает за прекращение отслеживания свайпа вне границ компонента. Добавим этот метод и одноименный пропс также, как и предыдущий, но только для константы pan:

type SwitchProps = {
  value: boolean;
  onValueChange: (value: boolean) => void;
  disabled?: boolean;
  activeColor?: string;
  inactiveColor?: string;
  disabledActiveColor?: string;
  disabledInactiveColor?: string;
  shouldCancelWhenOutside?: boolean;
};

const pan = Gesture.Pan()
   .onUpdate(({ translationX }) => {
     const translate = value
       ? TRACK_CIRCLE_WIDTH + translationX
       : translationX;
     const currentTranslate = () => {
       if (translate < 0) {
         return 0;
       }
       if (translate > TRACK_CIRCLE_WIDTH) {
         return TRACK_CIRCLE_WIDTH;
       }
       return translate;
     };
     translateX.value = currentTranslate();
   })
   .onEnd(({ translationX }) => {
     const translate = value
       ? TRACK_CIRCLE_WIDTH + translationX
       : translationX;
     const selectedSnapPoint =
       translate > TRACK_CIRCLE_WIDTH / 2 ? TRACK_CIRCLE_WIDTH : 0;
     translateX.value = withTiming(selectedSnapPoint, { duration: 100 });
     runOnJS(onValueChange)(!!selectedSnapPoint);
   })
   .enabled(!disabled)
   .shouldCancelWhenOutside(shouldCancelWhenOutside);

Теперь проверим что у нас получилось:

Обработка изменений состояния value вне компонента

Бывают случаи, когда нам необходимо изменить состояние компонента с помощью другого компонента. В текущей реализации при изменении value ничего не произойдет. Нам необходимо отследить изменение состояния и привести наш круг к нужной точке. Для этого нам понадобится хук useEffect и немного кода:

useEffect(() => {
   const currentCircle = !value ? 0 : TRACK_CIRCLE_WIDTH;
   if (!!currentCircle !== !!translateX.value) {
     translateX.value = withTiming(currentCircle);
   }
 }, [TRACK_CIRCLE_WIDTH, translateX, value]);

Здесь в константе мы заводим координаты, к которым нам необходимо будет прийти. Далее идет проверка, если текущая позиция относительно концов компонента не равно позиции конца компонента (приводим числа к булевому), то переводим наш круг в нужное положение. Не забываем проставить необходимые зависимости в наш хук.

Проверяем конечный результат:

Заключение

Вот и все, мы разобрались в базовых вещах библиотек Reanimated и Gesture Handler и написали свой собственный кастомный компонент, который пригодится нам в наших проектах. Весь код доступен по ссылке. Надеюсь статья была вам полезной, оставляйте свои комментарии с критикой и пожеланиями, о чем вы бы хотели видеть следующую статью.