fix: plugins design stuff

components/home/LargeMovieCarousel.tsx

@@ -84,21 +84,27 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 
   const width = Dimensions.get("screen").width;
 
+  if (settings?.usePopularPlugin === false) return null;
   if (l1 || l2) return null;
   if (!popularItems) return null;
 
   return (
-    <View className="flex flex-col items-center mt-4" {...props}>
+    <View className="flex flex-col items-center mt-2" {...props}>
       <Carousel
-        autoPlay={true}
-        autoPlayInterval={3000}
-        loop={true}
         ref={ref}
+        autoPlay={false}
+        loop={true}
+        snapEnabled={true}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingScale: 0.86,
+          parallaxScrollingOffset: 100,
+        }}
         width={width}
         height={204}
         data={popularItems}
         onProgressChange={progress}
-        renderItem={({ item, index }) => <RenderItem item={item} />}
+        renderItem={({ item, index }) => <RenderItem key={index} item={item} />}
       />
       <Pagination.Basic
         progress={progress}

components/list/ListGroup.tsx

@@ -23,14 +23,13 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
   const childrenArray = Children.toArray(children);
 
   return (
-    <View>
+    <View {...props}>
       <Text className="ml-4 mb-1 uppercase text-[#8E8D91] text-xs">
         {title}
       </Text>
       <View
         style={[]}
         className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900"
-        {...props}
       >
         {Children.map(childrenArray, (child, index) => {
           if (isValidElement<{ style?: ViewStyle }>(child)) {