Created
August 4, 2023 06:12
-
-
Save shyambhongle/d1cbbbfeeff89065d9cfaa598b2a728a to your computer and use it in GitHub Desktop.
Mimi App- Event Carousel
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 * as React from 'react'; | |
| import {View, Dimensions, StyleSheet, Platform} from 'react-native'; | |
| import Animated, { | |
| Extrapolate, | |
| interpolate, | |
| useAnimatedStyle, | |
| useSharedValue, | |
| } from 'react-native-reanimated'; | |
| import Carousel from 'react-native-reanimated-carousel'; | |
| import {YourComponent} from './YourComponent'; | |
| export const PAGE_WIDTH: number = Dimensions.get('window').width; | |
| function ParallaxBanner () { | |
| const progressValue = useSharedValue<number>(0); | |
| const baseOptions = { | |
| vertical: false, | |
| width: PAGE_WIDTH, | |
| height: 130,// Can be flex instead of fixed height | |
| } as const; | |
| return ( | |
| <View style={styles.container}> | |
| <Carousel | |
| {...baseOptions} | |
| style={{ | |
| width: PAGE_WIDTH, | |
| }} | |
| loop | |
| pagingEnabled={true} | |
| snapEnabled={true} | |
| autoPlay | |
| autoPlayInterval={3000} | |
| onProgressChange={(_, absoluteProgress) => | |
| (progressValue.value = absoluteProgress) | |
| } | |
| mode="parallax" | |
| modeConfig={{ | |
| parallaxScrollingScale: 0.95, // Adjust this value according to your needs. | |
| parallaxScrollingOffset: Platform.OS === 'ios' ? 100 : 90, | |
| parallaxAdjacentItemScale: 0.8, | |
| }} | |
| panGestureHandlerProps={{ | |
| activeOffsetX: [-10, 10], | |
| }} | |
| data={props.data} | |
| renderItem={({item, index}) => ( | |
| <YourComponent /> | |
| )} | |
| /> | |
| {!!progressValue && ( | |
| <View style={styles.paginationStyle}> | |
| {props.data.map((backgroundColor, index) => { | |
| return ( | |
| <PaginationItem | |
| animValue={progressValue} | |
| index={index} | |
| key={index} | |
| length={props.data.length} | |
| /> | |
| ); | |
| })} | |
| </View> | |
| )} | |
| </View> | |
| ); | |
| } | |
| const PaginationItem: React.FC<{ | |
| index: number; | |
| backgroundColor: string; | |
| length: number; | |
| animValue: Animated.SharedValue<number>; | |
| isRotate?: boolean; | |
| }> = props => { | |
| const {animValue, index, length, backgroundColor} = props; | |
| const width = 10; | |
| const animStyle = useAnimatedStyle(() => { | |
| let inputRange = [index - 1, index, index + 1]; | |
| let outputRange = [-width, 0, width]; | |
| if (index === 0 && animValue?.value > length - 1) { | |
| inputRange = [length - 1, length, length + 1]; | |
| outputRange = [-width, 0, width]; | |
| } | |
| return { | |
| transform: [ | |
| { | |
| translateX: interpolate( | |
| animValue?.value, | |
| inputRange, | |
| outputRange, | |
| Extrapolate.CLAMP, | |
| ), | |
| }, | |
| ], | |
| }; | |
| }, [animValue, index, length]); | |
| return ( | |
| <View style={[styles.animatedContainer, {width, height: width}]}> | |
| <Animated.View | |
| style={[styles.animatedWrapper, {backgroundColor}, animStyle]} | |
| /> | |
| </View> | |
| ); | |
| }; | |
| export default Index; | |
| const styles = StyleSheet.create({ | |
| container: {alignItems: 'center'}, | |
| paginationStyle: { | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| width: 100, | |
| alignSelf: 'center', | |
| }, | |
| animatedContainer: { | |
| backgroundColor: 'white', | |
| borderRadius: 50, | |
| overflow: 'hidden', | |
| transform: [ | |
| { | |
| rotateZ: '0deg', | |
| }, | |
| ], | |
| }, | |
| animatedWrapper: { | |
| borderRadius: 50, | |
| flex: 1, | |
| }, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment