Philip Cesar Garay
38 lines
841 B
JavaScript
38 lines
841 B
JavaScript
import { View } from "react-native";
|
|
import { useState } from "react";
|
|
import { Motion } from "@legendapp/motion";
|
|
|
|
import { Palette, Style } from "../styles";
|
|
|
|
export default () => {
|
|
const [animatedDotIndex, setAnimatedDotIndex] = useState(0);
|
|
|
|
setTimeout(() => {
|
|
setAnimatedDotIndex((animatedDotIndex + 1) % 3);
|
|
}, 500);
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
Style.containerSpaceBetween,
|
|
{ width: 60, padding: 10, paddingVertical: 5 },
|
|
]}
|
|
>
|
|
{[1, 2, 3].map((item) => (
|
|
<Motion.View
|
|
key={item}
|
|
animate={{
|
|
opacity: animatedDotIndex === item - 1 ? 1 : 0.2,
|
|
}}
|
|
style={{
|
|
backgroundColor: Palette.white,
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 50,
|
|
}}
|
|
/>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|