Created
September 15, 2023 12:12
-
-
Save tanner-west/ea8f627f10c22b77ccb31543d5f716d0 to your computer and use it in GitHub Desktop.
This file contains 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 from "react"; | |
import { | |
SafeAreaView, | |
ScrollView, | |
View, | |
Image, | |
StyleSheet, | |
Text, | |
useWindowDimensions, | |
ImageSourcePropType, | |
StyleProp, | |
} from "react-native"; | |
const classicMetalImages = [ | |
require(`../assets/images/music/classic-metal/classic-metal-0.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-9.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-8.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-1.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-4.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-5.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-2.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-3.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-6.png`), | |
require(`../assets/images/music/classic-metal/classic-metal-7.png`), | |
]; | |
const classicRockImages = [ | |
require(`../assets/images/music/classic-rock/classic-rock-0.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-1.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-4.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-10.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-2.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-3.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-5.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-6.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-7.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-8.png`), | |
require(`../assets/images/music/classic-rock/classic-rock-9.png`), | |
]; | |
const folkImages = [ | |
require(`../assets/images/music/folk/folk-0.png`), | |
require(`../assets/images/music/folk/folk-1.png`), | |
require(`../assets/images/music/folk/folk-2.png`), | |
require(`../assets/images/music/folk/folk-3.png`), | |
require(`../assets/images/music/folk/folk-4.png`), | |
require(`../assets/images/music/folk/folk-5.png`), | |
require(`../assets/images/music/folk/folk-6.png`), | |
require(`../assets/images/music/folk/folk-7.png`), | |
require(`../assets/images/music/folk/folk-8.png`), | |
require(`../assets/images/music/folk/folk-9.png`), | |
]; | |
const ScrollChild = ({ | |
width, | |
imgWidth, | |
height, | |
containerStyle, | |
uri, | |
}: { | |
width: number; | |
imgWidth: number; | |
height: number; | |
containerStyle?: StyleProp<any>; | |
uri: ImageSourcePropType; | |
}) => ( | |
<View | |
style={[ | |
{ | |
width: width, | |
height: height, | |
}, | |
containerStyle, | |
]} | |
> | |
<Image source={uri} style={{ flex: 1, width: imgWidth }} /> | |
</View> | |
); | |
const HorizontalScrollView = () => { | |
const { width } = useWindowDimensions(); | |
const ScrollChildrenFullWidthClassicRock = classicRockImages.map( | |
(imageUri) => { | |
return ( | |
<ScrollChild | |
key={imageUri} | |
height={400} | |
width={width} | |
imgWidth={width} | |
uri={imageUri} | |
/> | |
); | |
} | |
); | |
const ScrollChildrenSmallClassicMetal = classicMetalImages.map((imageUri) => { | |
return ( | |
<ScrollChild | |
key={imageUri} | |
height={width * 0.4} | |
width={width * 0.4} | |
imgWidth={width * 0.4 - 10} | |
containerStyle={{ paddingHorizontal: 5 }} | |
uri={imageUri} | |
/> | |
); | |
}); | |
const ScrollChildrenCenterFolk = folkImages.map((imageUri) => { | |
return ( | |
<ScrollChild | |
key={imageUri} | |
height={width * 0.8} | |
width={width * 0.8} | |
imgWidth={width * 0.8 - 10} | |
containerStyle={{ | |
paddingHorizontal: 5, | |
}} | |
uri={imageUri} | |
/> | |
); | |
}); | |
return ( | |
<SafeAreaView style={styles.container}> | |
<ScrollView style={{ flex: 1 }}> | |
<Text style={styles.heading}>Folk</Text> | |
<ScrollView | |
snapToInterval={width * 0.8} | |
horizontal | |
decelerationRate={"fast"} | |
> | |
{<View style={{ width: width * 0.1 }} />} | |
{ScrollChildrenCenterFolk} | |
{<View style={{ width: width * 0.1 }} />} | |
</ScrollView> | |
<Text style={styles.heading}>Classic Metal</Text> | |
<ScrollView horizontal>{ScrollChildrenSmallClassicMetal}</ScrollView> | |
<Text style={styles.heading}>Classic Rock</Text> | |
<ScrollView pagingEnabled horizontal> | |
{ScrollChildrenFullWidthClassicRock} | |
</ScrollView> | |
</ScrollView> | |
</SafeAreaView> | |
); | |
}; | |
export default HorizontalScrollView; | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
backgroundColor: "#222233", | |
}, | |
heading: { | |
color: "#EEFFFF", | |
fontSize: 36, | |
fontWeight: "bold", | |
margin: 10, | |
marginTop: 20, | |
}, | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment