Philip Cesar Garay
41 lines
1.0 KiB
JavaScript
41 lines
1.0 KiB
JavaScript
import { View } from "react-native";
|
|
import { Motion } from "@legendapp/motion";
|
|
|
|
import { Palette } from "../styles";
|
|
|
|
export default ({
|
|
carouselRef = null,
|
|
selectedIndex,
|
|
length,
|
|
containerStyle = {},
|
|
}) => {
|
|
return (
|
|
<View style={{ flexDirection: "row", ...containerStyle }}>
|
|
{Array.from({ length }).map((_, index) => (
|
|
<Motion.Pressable
|
|
key={index}
|
|
onPress={() => {
|
|
if (carouselRef?.current && index !== selectedIndex) {
|
|
console.log("scroll to", index);
|
|
carouselRef.current.scrollTo({ index });
|
|
}
|
|
}}
|
|
style={{
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: 5,
|
|
backgroundColor:
|
|
index === selectedIndex
|
|
? Palette.primary
|
|
: Palette.ultraLightWhite,
|
|
marginHorizontal: 5,
|
|
}}
|
|
animate={{
|
|
width: index === selectedIndex ? 20 : 10,
|
|
}}
|
|
/>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|