Icon Transition in React Native

December 11, 2020 - 1 min read

A transition is a change of one view state into another. The react-native-reanimated library provides a simply way to perform transitions. In combination with react-native-svg, you could create a simple icon effect, like filling a heart icon.

The source code in action can be found here.

You could achieve the same effect using basic animations, but transitions can make it more easy by triggering multiple animations at the same time or in sequence.

	import React from 'react';
	import {
	Transition,
	Transitioning,
	TransitioningView,
	} from 'react-native-reanimated';

	interface Props {
	First: React.ElementType<any>;
	Second: React.ElementType<any>;
	}

	export const ToggleIcon: React.FC<Props> = ({ First, Second }) => {
	const ref = React.useRef<TransitioningView \| null>(null);
	const [toggled, setToggled] = React.useState(false);

	const toggle = () => setToggled(!toggled);

	const onPress = () => {
	toggle();
	ref.current?.animateNextTransition();
	};

	return (
	<Transitioning.View ref={ref} transition={transition}>
	{!toggled ? <First onPress={onPress} /> : <Second onPress={onPress} />}
	</Transitioning.View>
	);
	};

	const transition = (
	<Transition.Together>
	<Transition.Out type="scale" durationMs={100} />
	<Transition.Change interpolation="easeInOut" />
	<Transition.In type="scale" durationMs={100} delayMs={50} />
	</Transition.Together>
	);

view raw transitions.tsx hosted with ❤ by GitHub

A click on the icon toggles the view state, as well as transition change. The transition itself consists of a combination of scaling and easing.

Back