diff --git a/app/_layout.tsx b/app/_layout.tsx index 40f5473..596f59a 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -19,6 +19,10 @@ import { HomeScreen } from '@/components/HomeScreen'; // Keep the splash screen visible while we fetch resources SplashScreen.preventAutoHideAsync(); +// For the global.css file for the nativewind +import "@/global.css" + + export default function RootLayout() { // const colorScheme = useColorScheme(); const [loaded] = useFonts({ diff --git a/assets/images/carouselimg/carouselautoi.jpg b/assets/images/carouselimg/carouselautoi.jpg new file mode 100644 index 0000000..bbed625 Binary files /dev/null and b/assets/images/carouselimg/carouselautoi.jpg differ diff --git a/assets/images/carouselimg/carouselautoii.jpg b/assets/images/carouselimg/carouselautoii.jpg new file mode 100644 index 0000000..7867651 Binary files /dev/null and b/assets/images/carouselimg/carouselautoii.jpg differ diff --git a/assets/images/carouselimg/carouselautoiii.jpg b/assets/images/carouselimg/carouselautoiii.jpg new file mode 100644 index 0000000..e7b7752 Binary files /dev/null and b/assets/images/carouselimg/carouselautoiii.jpg differ diff --git a/assets/images/carouselimg/carouselautoiv.jpg b/assets/images/carouselimg/carouselautoiv.jpg new file mode 100644 index 0000000..4378360 Binary files /dev/null and b/assets/images/carouselimg/carouselautoiv.jpg differ diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..7bf1b24 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,9 @@ +module.exports = function (api) { + api.cache(true); + return { + presets: [ + ["babel-preset-expo", { jsxImportSource: "nativewind" }], + "nativewind/babel", + ], + }; +}; \ No newline at end of file diff --git a/components/Autocarousel.tsx b/components/Autocarousel.tsx new file mode 100644 index 0000000..e73f08b --- /dev/null +++ b/components/Autocarousel.tsx @@ -0,0 +1,181 @@ +import { + View , + FlatList, + Image, + useWindowDimensions, + Text , + Pressable , + StyleSheet} from 'react-native' +import React from 'react' +import Animated, { useAnimatedScrollHandler, useSharedValue , SharedValue , useAnimatedStyle , interpolate , FadeIn, FadeOut} from 'react-native-reanimated' + +import { BlurView } from 'expo-blur'; +export default function Autocarousel() { + // This are varibles for the height and width of the image + const width = useWindowDimensions().width + + // This are the properties for the widths and height + const _imageWidth = width * 0.7; + const _imageHeight = _imageWidth * 1.76; + + // Gap spacing for the images since it's horizontal + const _spacing = 12; + + // For the buttton to appear + const [button , showButton] = React.useState(false) + + + type item = any; + + const datai = [ + {i: require("@/assets/images/carouselimg/carouselautoi.jpg") , id: 1}, + {i: require("@/assets/images/carouselimg/carouselautoii.jpg") , id: 2}, + {i: require("@/assets/images/carouselimg/carouselautoiii.jpg") , id: 3}, + {i: require("@/assets/images/carouselimg/carouselautoiv.jpg") , id: 4} + ] + + // This is for the auto-Scroll + const flatListRef = React.useRef>(null); + const [currentIndex, setCurrentIndex] = React.useState(0); + + + React.useEffect(() => { + const interval = setInterval(() => { + if (flatListRef.current) { + if (currentIndex < datai.length - 1) { + setCurrentIndex(prevIndex => prevIndex + 1); + flatListRef.current?.scrollToIndex({ index: currentIndex + 1, animated: true}) + } else { + clearInterval(interval); + } + } + + return () => clearInterval(interval); + + }, 2000); // Auto-scroll every 3 seconds + + return () => clearInterval(interval); // Cleanup on unmount + }, [currentIndex]); + + + + const BackdropImages =( + { items , index , scrollX }:{items : item , index: number , scrollX: SharedValue})=>{ + + // For the animated stylez + const stylez = useAnimatedStyle(()=>{ + return{ + opacity: interpolate( + scrollX.value , + [index -1 ,index, index + 1] , + [0 , 1 ,0] , + ) + } + }) + + return( + + + + ) + } + + // This is the render for the Flatlist + const renderItems = ( + {item , index , scrollX }: + { + item:item , + index: number , + scrollX: SharedValue + } + ) => { + + return( + + + + ) + } + + // For the smooth animation in the sliding + const scrollX = useSharedValue(0); + const onScroll = useAnimatedScrollHandler((e) =>{ + // Giving the exact position the picture index are + scrollX.value = e.contentOffset.x / (_imageWidth + _spacing) + // Show button if at the last item + // if (scrollX.value >= datai.length - 1) { + // showButton(true); + // } else { + // showButton(false); + // } + + }) + return ( + + + { + datai.map((item , index) =>( + + ) + ) + } + + + renderItems({item , index , scrollX})} + keyExtractor={(item, index: number) => index.toString()} + className={'flex-grow-0'} + snapToInterval={_imageWidth + _spacing } + decelerationRate={"fast"} + contentContainerStyle = {{ + gap: _spacing , + paddingHorizontal : (40) + }} + horizontal = {true} + onScroll={onScroll} + scrollEventThrottle={ 1000 / 60 } // 16.6 ms + showsHorizontalScrollIndicator = {false} + /> + + {/* {showButton && +