66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { StyleProp, View, ViewStyle, StyleSheet } from 'react-native';
|
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
|
|
import { useTheme } from '../../theme';
|
|
|
|
const SIZE = 8;
|
|
const MARGIN = 4;
|
|
const dots = [1, 2, 3];
|
|
const INTERVAL = 300;
|
|
const ANIMATION_DURATION = 400;
|
|
const ANIMATION_SCALE = 1.4;
|
|
|
|
function Dot({ active }: { active: boolean }): JSX.Element {
|
|
const scale = useSharedValue(1);
|
|
|
|
useEffect(() => {
|
|
scale.value = withTiming(active ? ANIMATION_SCALE : 1, {
|
|
duration: ANIMATION_DURATION
|
|
});
|
|
}, [active]);
|
|
|
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
transform: [{ scale: scale.value }]
|
|
}));
|
|
|
|
const { colors } = useTheme();
|
|
|
|
const style: StyleProp<ViewStyle> = {
|
|
height: SIZE,
|
|
width: SIZE,
|
|
borderRadius: SIZE / 2,
|
|
marginHorizontal: MARGIN,
|
|
backgroundColor: active ? colors.dotActiveBg : colors.dotBg
|
|
};
|
|
|
|
return <Animated.View style={[style, animatedStyle]} />;
|
|
}
|
|
|
|
function DotsLoader(): JSX.Element {
|
|
const [active, setActive] = useState(1);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setActive(prevActive => (prevActive > 2 ? 1 : prevActive + 1));
|
|
}, INTERVAL);
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.dotsContainer}>
|
|
{dots.map(i => (
|
|
<Dot key={i} active={i === active} />
|
|
))}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
dotsContainer: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginLeft: 6 }
|
|
});
|
|
|
|
export default DotsLoader;
|