Метод configureNext

Метод configureNext у класса LayoutAnimation принимает пресет или конфиг. Вызов ставят сразу перед setState или иным обновлением, которое меняет дерево. На Android один раз включают UIManager.setLayoutAnimationEnabledExperimental(true), иначе анимация раскладки не сработает.

Синтаксис

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

Параметры

Параметр	Описание
`пресет`	Готовый набор из `LayoutAnimation.Presets`: `easeInEaseOut`, `linear` или `spring`.

Пример

Давайте включим анимацию на Android и переключим блок:

import { useEffect, useState } from 'react';
import {
	LayoutAnimation,
	Platform,
	UIManager,
	View,
	Text,
	Pressable,
} from 'react-native';

export default function App() {
	const [wide, setWide] = useState(false);

	useEffect(() => {
		if (Platform.OS === 'android') {
			UIManager.setLayoutAnimationEnabledExperimental(true);
		}
	}, []);

	const toggle = () => {
		LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
		setWide((v) => !v);
	};

	return (
		<View>
			<Pressable onPress={toggle}>
				<Text>12345</Text>
			</Pressable>
			<View style={{ width: wide ? 220 : 80, padding: 8, backgroundColor: '#ccddee' }}>
				<Text>abcde</Text>
			</View>
		</View>
	);
}

На экране серый блок плавно меняет ширину после нажатия на обеих платформах.

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

класс LayoutAnimation,
где перечислены Presets
класс Platform,
чтобы проверить Android перед UIManager
компонент View,
который меняет размер после configureNext
класс Animated,
если нужна анимация отдельного style, а не раскладки