Componentschevron_rightFadeIn

FadeIn

A simple fade-in animation component with configurable duration and delay.

9:41

signal_cellular_altwifibattery_full

FadeIn

Preview Controls

Animation

Opacity fades from 0 to 1

This is a CSS-based preview of the animation. The actual React Native component uses physics-based springs for a more natural feel.

Installation

Usage

Example.tsx

import { FadeIn } from './components/FadeIn';

export default function App() {
  return (
    <FadeIn duration={500} delay={100}>
      <Text>Hello, World!</Text>
    </FadeIn>
  );
}

Full Component Code

FadeIn.tsx

1import React, { useEffect } from 'react';
2import { ViewStyle, StyleProp } from 'react-native';
3import Animated, {
4  useSharedValue,
5  useAnimatedStyle,
6  withTiming,
7  withDelay,
8  Easing,
9} from 'react-native-reanimated';
10
11interface FadeInProps {
12  children: React.ReactNode;
13  duration?: number;
14  delay?: number;
15  style?: StyleProp<ViewStyle>;
16  initialOpacity?: number;
17}
18
19export const FadeIn: React.FC<FadeInProps> = ({
20  children,
21  duration = 500,
22  delay = 0,
23  style,
24  initialOpacity = 0,
25}) => {
26  const opacity = useSharedValue(initialOpacity);
27
28  useEffect(() => {
29    opacity.value = withDelay(
30      delay,
31      withTiming(1, { 
32        duration, 
33        easing: Easing.out(Easing.ease) 
34      })
35    );
36  }, []);
37
38  const animatedStyle = useAnimatedStyle(() => ({
39    opacity: opacity.value,
40  }));
41
42  return (
43    <Animated.View style={[style, animatedStyle]}>
44      {children}
45    </Animated.View>
46  );
47};
48
49export default FadeIn;

Props

Name	Type	Default	Description
children	React.ReactNode	-	Content to animate
duration	number	500	Animation duration in ms
delay	number	0	Delay before animation starts
initialOpacity	number	0	Starting opacity
style	StyleProp<ViewStyle>	-	Additional styles

SlideInarrow_forward