Scribd
Upload
3 views2 pages

loadingscreencode

The document contains a React Native component named LoadingScreen that displays a loading animation using animated boxes. It utilizes the Animated API to create staggered animations for multiple boxes, changing their color and scale. The component also includes a linear gradient background and text elements for branding and developer information.

Uploaded by

roshcode44
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views2 pages

loadingscreencode

The document contains a React Native component named LoadingScreen that displays a loading animation using animated boxes. It utilizes the Animated API to create staggered animations for multiple boxes, changing their color and scale. The component also includes a linear gradient background and text elements for branding and developer information.

Uploaded by

roshcode44
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useEffect, useRef } from 'react';

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


import { LinearGradient } from 'expo-linear-gradient';

const LoadingScreen = () => {


const boxCount = 10;
const animatedValues = useRef(Array(boxCount).fill(0).map(() => new
Animated.Value(0))).current;

useEffect(() => {
const animations = animatedValues.map((value, index) =>
Animated.timing(value, {
toValue: 1,
duration: 300,
delay: index * 100,
useNativeDriver: false,
})
);

Animated.stagger(100, animations).start();
}, []);

return (
<View style={styles.container}>
<LinearGradient
colors={['#0f172a', '#111827']}
style={styles.gradientOverlay}
/>
<Text style={styles.welcomeText}>Progress Calendar</Text>
<View style={styles.boxContainer}>
{animatedValues.map((value, index) => (
<Animated.View
key={index}
style={[
styles.box,
{
backgroundColor: value.interpolate({
inputRange: [0, 1],
outputRange: ['#374151', '#22c55e'],
}),
transform: [
{
scale: value.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [1, 1.2, 1],
}),
},
],
},
]}
/>
))}
</View>
<Text style={styles.developerText}>Developed by Rosh</Text>
</View>
);
};

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#111827',
},
gradientOverlay: {
...StyleSheet.absoluteFillObject,
},
welcomeText: {
fontSize: 24,
fontWeight: 'bold',
color: 'white',
marginBottom: 20,
textAlign: 'center',
zIndex: 1,
},
boxContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
},
box: {
width: 15,
height: 15,
borderRadius: 4,
marginHorizontal: 4,
},
developerText: {
position: 'absolute',
bottom: 30,
color: '#9ca3af',
fontSize: 18,
zIndex: 1,
},
});

export default LoadingScreen;

You might also like