Метод createAnimatedComponent

Метод createAnimatedComponent класса Animated принимает обычный компонент React Native и возвращает его версию для Animated.Value в style. В ядре уже есть Animated.View; метод нужен для своих компонентов.

Синтаксис

const AnimatedCustom = Animated.createAnimatedComponent(Custom);

Параметры

Параметр	Описание
`Component`	Компонент React Native, которому передают `style`.

Пример

Давайте обернем обычный контейнер и анимируем прозрачность:

import { useEffect, useRef } from 'react';
import { Animated, View, Text } from 'react-native';

const AnimatedBox = Animated.createAnimatedComponent(View);

export default function App() {
	const opacity = useRef(new Animated.Value(0)).current;

	useEffect(() => {
		Animated.timing(opacity, {
			toValue: 1,
			duration: 350,
			useNativeDriver: true,
		}).start();
	}, [opacity]);

	return (
		<AnimatedBox style={{ opacity, padding: 12 }}>
			<Text>abcde</Text>
		</AnimatedBox>
	);
}

На экране блок с текстом плавно проявляется так же, как у готового Animated.View.

Смотрите также

компонент Animated.View,
который уже создан через этот метод
компонент View,
который служит основой обертки
класс Value,
которое передают в стиль обертки
метод timing,
который меняет анимируемое значение