@Dmitry Vasilevsky

В рамках изучения https://github.com/software-mansion/react-native-reanimated создадим Skeleton Loader.

Подготовка

Будем использовать expo+ts проект. И в первую очередь поставим пакеты:

// package.json
"dependencies": {
	"expo-linear-gradient": "~11.0.3",
	"react-native-reanimated": "~2.3.1",
}

Чтобы reanimated не ругался также следует добавить

// package.json
"resolutions": {
	"@types/react": "~17.0.21"
},
// babel.config.js
plugins: ["react-native-reanimated/plugin"],

Если вы уже запускали проект, то пересоберите конфиг expo expo start -c

Основа

Вот так будет выглядеть основа компонента

import React from "react";
import { View, ViewStyle } from "react-native";

const colors = {
  primary: "#e7e7e7",
  secondary: "#f3f3f3",
};

interface SkeletonProps {
  style?: ViewStyle;
}

const Skeleton = (props: SkeletonProps) => {
  const { style } = props;

  return (
    <View
      style={[{ overflow: "hidden", backgroundColor: colors.primary }, style]}
    ></View>
  );
};

export default Skeleton;

Мы определили цвета и прокинули стили.

Пример

Создадим карточку из наших скелетонов

• Показать код карточки

Анимация непрозрачности

Скелетоны вообще необязательно анимировать, но всё же вся эта статья создана для этого. Рассмотрим вариант анимации непрозрачности. Скелетоны будут постепенно исчезать и появляться.

Reanimated предлагает полностью свой вариант API, построенный на хуках. Для того чтобы анимировать стили, нам понадобится всего два useSharedValue и useAnimatedStyle.

useSharedValue - создает ссылку на некоторое значение JavaScript, которое может передавать данные, обеспечивать способ реагирования на изменения, а также управлять анимацией. Принимает начальное значение. Может быть изменено через поле sharedValue.value.