fix(news): update carousel animation and improve layout styles

neuland-ingolstadt · Dec 12, 2024 · 157b217 · 157b217
1 parent 15e8b9a
commit 157b217
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "react-native-pager-view": "6.5.1",
     "react-native-paper": "5.12.5",
     "react-native-reanimated": "~3.16.5",
-    "react-native-reanimated-carousel": "^3.5.1",
+    "react-native-reanimated-carousel": "4.0.0-canary.22",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.1.0",
     "react-native-select-dropdown": "^4.0.1",

diff --git a/src/components/Cards/NewsCard.tsx b/src/components/Cards/NewsCard.tsx
@@ -24,7 +24,7 @@ const NewsCard: React.FC = () => {
         enabled: userKind !== USER_GUEST,
     })
     const [cardWidth, setCardWidth] = React.useState(
-        Dimensions.get('window').width - 32
+        Dimensions.get('window').width
     )
     useLayoutEffect(() => {
         if (ref.current != null) {
@@ -62,18 +62,18 @@ const NewsCard: React.FC = () => {
                 {data != null && data.length > 0 && (
                     <Carousel
                         loop
-                        height={115}
-                        width={cardWidth * 0.87}
-                        style={styles.carousel}
+                        height={100}
+                        width={cardWidth}
+                        mode="parallax"
+                        modeConfig={{
+                            parallaxScrollingOffset: 105,
+                        }}
+                        containerStyle={styles.carousel}
                         data={data}
                         snapEnabled={true}
                         autoPlay={true}
                         autoPlayInterval={7500}
-                        renderItem={({ index }) => (
-                            <View style={styles.cardsFilled}>
-                                {renderEvent(data[index])}
-                            </View>
-                        )}
+                        renderItem={({ index }) => renderEvent(data[index])}
                     ></Carousel>
                 )}
                 {data != null && data.length > 2 && (
@@ -91,11 +91,12 @@ const NewsCard: React.FC = () => {
 }
 
 const stylesheet = createStyleSheet((theme) => ({
-    cardsFilled: { gap: 8, paddingTop: 12 },
+    cardsFilled: { paddingTop: 4 },
     carousel: {
         alignItems: 'center',
         justifyContent: 'center',
-        marginTop: 4,
+        overflow: 'hidden',
+        paddingTop: 4,
         width: '100%',
     },
     description: {
@@ -109,13 +110,12 @@ const stylesheet = createStyleSheet((theme) => ({
         borderRadius: theme.radius.md,
         flexDirection: 'row',
         gap: 12,
-        marginHorizontal: 4,
         padding: 10,
     },
     eventTitle: {
         color: theme.colors.text,
         flexShrink: 1,
-        fontSize: 15,
+        fontSize: 18,
         fontWeight: '500',
     },
     imageContainer: {