Last active
December 23, 2021 11:40
-
-
Save chanonroy/1137f6202bc8da0c1ea2002cb9cb4e40 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from "react" | |
| import { | |
| ScrollView, | |
| Animated, | |
| SafeAreaView, | |
| ImageBackground, | |
| Dimensions, | |
| } from "react-native" | |
| const OFFSET = 40 | |
| const ITEM_WIDTH = Dimensions.get("window").width - (OFFSET * 2) | |
| const ITEM_HEIGHT = 200 | |
| const cards = [ | |
| { title: "Movie 1", posterUrl: require("./images/tenent.jpg") }, | |
| { title: "Movie 2", posterUrl: require("./images/1917.jpg") }, | |
| { title: "Movie 3", posterUrl: require("./images/spiderman.jpg") }, | |
| { title: "Movie 4", posterUrl: require("./images/mando.jpg") }, | |
| ] | |
| export default function AdvancedCardCarousel() { | |
| const scrollX = React.useRef(new Animated.Value(0)).current | |
| return ( | |
| <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}> | |
| <ScrollView | |
| horizontal={true} | |
| decelerationRate={"normal"} | |
| snapToInterval={ITEM_WIDTH} | |
| style={{ marginTop: 40, paddingHorizontal: 0 }} | |
| showsHorizontalScrollIndicator={false} | |
| bounces={false} | |
| disableIntervalMomentum | |
| onScroll={Animated.event( | |
| [{ nativeEvent: { contentOffset: { x: scrollX } } }], | |
| { useNativeDriver: false } | |
| )} | |
| scrollEventThrottle={12} | |
| > | |
| {cards.map((item, idx) => { | |
| const inputRange = [ | |
| (idx - 1) * ITEM_WIDTH, | |
| idx * ITEM_WIDTH, | |
| (idx + 1) * ITEM_WIDTH, | |
| ] | |
| const translate = scrollX.interpolate({ | |
| inputRange, | |
| outputRange: [0.85, 1, 0.85], | |
| }) | |
| const opacity = scrollX.interpolate({ | |
| inputRange, | |
| outputRange: [0.5, 1, 0.5], | |
| }) | |
| return ( | |
| <Animated.View | |
| style={{ | |
| width: ITEM_WIDTH, | |
| height: ITEM_HEIGHT, | |
| marginLeft: idx === 0 ? OFFSET : undefined, | |
| marginRight: idx === cards.length - 1 ? OFFSET : undefined, | |
| opacity: opacity, | |
| transform: [{ scale: translate }], | |
| }} | |
| > | |
| <ImageBackground | |
| source={item.posterUrl} | |
| style={{ | |
| flex: 1, | |
| resizeMode: "cover", | |
| justifyContent: "center", | |
| }} | |
| imageStyle={{ borderRadius: 6}} | |
| /> | |
| </Animated.View> | |
| ) | |
| })} | |
| </ScrollView> | |
| </SafeAreaView> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment