Untitled

 const main_cassettes  = ({item, index}) => {
        return (
            <>
            <View style = {{
                    marginTop: - Dimensions.get("window").height * 0.55,
                    width: Dimensions.get("window").width,
                    alignSelf: "center",
                }}>
                <ImageBackground source={require("../images/verticalcassette2crop.png")} 
                style = {{
                    width: (index == 0) ? Dimensions.get("window").width * 0.94 : Dimensions.get("window").width * 1.052,
                    height: Dimensions.get("window").height,
                    alignSelf: "center",
                }}resizeMode = {"contain"}  imageStyle = {{opacity: 0.8}}>
                    <View style = {{width: "100%", height: "100%", alignSelf: "center", justifyContent: "center"}}>
                        <LinearGradient 
                            style = {{
                                alignSelf: "center", 
                                padding: 5, 
                                flexDirection: "row",
                                width: "90%", 
                                alignItems: "center",
                            }}
                            colors={['rgba(255, 255, 255, 0.3)', 'rgba(151, 151, 151, 0.2)']} start={{ x: 2, y: 2 }} end={{ x: 2, y: 2 }}   
                        >

                        <View style = {{flexDirection: "row"}}>
                            <View style = {{flexDirection: "column", marginTop: -5, marginLeft: (index === 0 ? null : 3)}}>
                                <Text style = {{color: "white", fontSize: 30}}>{item.id}</Text>
                                <View style = {{height: "40%", alignItems: "center", alignSelf: "center"}}>
                                    {/* {
                                        (index) === 0 ?
                                        <Points direction = {"vertical"} fill = {4} color = {"#FFFFFF"} fill_time = {5}></Points>
                                        :
                                        <Points direction = {"vertical"} fill = {4} color = {"#FFFFFF"} fill_time = {10}></Points>
                                    } */}
                                </View>
                            </View>
                            <View style = {{flexDirection: "column", marginTop: -5, marginLeft: (index === 0 ? null : 3)}}>
                                <TouchableOpacity onPress = {() => console.log("hola")}>
                                    <Text style = {{color: "white", fontSize: 30}}>{item.id}</Text>
                                    <View style = {{height: "40%", alignItems: "center", alignSelf: "center"}}>
                                        {/* {
                                            (index) === 0 ?
                                            <Points direction = {"vertical"} fill = {4} color = {"#FFFFFF"} fill_time = {5}></Points>
                                            :
                                            <Points direction = {"vertical"} fill = {4} color = {"#FFFFFF"} fill_time = {10}></Points>
                                        } */}
                                    </View>
                                </TouchableOpacity>
                            </View>
                            
                        </View> 
                            {/* <View style = {{width: "95%", maxWidth: "95%", marginLeft: (index === 0) ? null : 5, backgroundColor: "red"}}>
                                {/* <TouchableOpacity onPress = {() => play_music(item)} style = {{flexDirection: "column", marginLeft: (index === 0) ? 13 : 15, flexWrap: "wrap", backgroundColor: "yellow"}}>
                                    <Text style = {{fontSize: 13, color: "white", padding: 5}}>{item.title}</Text>
                                    <Text style = {{fontSize: 16, color: "white", paddingLeft: 5, paddingBottom: 3}}>貓狗可以不吃肉嗎？</Text>
                                    <Text style = {{fontSize: 16, color: "white", paddingLeft: 5, }}>蟋蟀是新出路</Text>
                                    <View style = {{position: "absolute", marginLeft: (index === 0) ? 238: 269, width: 100, marginTop: 20}}>
                                        <Image source = {require("../images/nathan.jpeg")}  
                                            style = {{
                                                width: 50,
                                                height: 50, 
                                                borderRadius: 100, 
                                                borderWidth: 1, 
                                                borderColor: "#FFD800"
                                            }} resizeMode = "cover">
                                        </Image>
                                    </View>
                                </TouchableOpacity> 
                                <View style = {{flexDirection: "row", justifyContent: "space-evenly", width: "96%", marginLeft: (index === 0) ? 5 : 5}}>
                                    {/* <Text style = {{fontSize: 8, color: "white", alignSelf: "center"}}>5 May 2020 </Text>
                                    <Text style = {{color: "white"}}> | </Text>
                                    <Text style = {{fontSize: 8, color: "white", alignSelf: "center"}}>收聽時間 3 分鐘</Text>
                                    <TouchableOpacity style = {{justifyContent: "center", }} onPress = {() => alert("Camera")}>
                                        <Camera width = {15} height = {15}/>
                                    </TouchableOpacity>
                                    <TouchableOpacity style = {{justifyContent: "center"}} onPress = {() => alert("Sound")}>
                                        <Sound width = {15} height = {15}/>
                                    </TouchableOpacity>
                                    <View style = {{flexDirection: "row", justifyContent: "space-evenly", width: "28%"}}>
                                        <TouchableOpacity onPress = {up_vote}>
                                            <Up width = {20} height = {20}/>
                                        </TouchableOpacity>
                                        <Text style = {{color: "white", fontSize: 10, alignSelf: "center", paddingLeft: 5, paddingRight: 5}}>{votes}</Text>
                                        <TouchableOpacity onPress = {down_vote}>
                                            <Down width = {25} height = {25}/>
                                        </TouchableOpacity>
                                        <TouchableOpacity style = {{justifyContent: "center"}}  onPress = {() => alert("bookmark")}>
                                            <Text><Feather name = "bookmark" size = {18} color = "rgba(255, 255, 255, 0.5)" onPress = {() => bookmark(item)}/></Text>
                                        </TouchableOpacity>
                                    </View> *
                                </View>
                            </View> */}
                        </LinearGradient> 
                    </View>
                </ImageBackground>
            </View> 
        </>
        )
    }


 <View style = {{height: Dimensions.get("window").height * 0.55, justifyContent: "center"}}>
    {
        (!songs) ? null :
        <Animated.View style = {{height: Dimensions.get("window").height * 0.55}}>
            <Carousel
                layout = {"default"}
                sliderHeight = {500}
                itemHeight = {120}
                data = {songs.data}
                renderItem={main_cassettes}
                enableSnap = {false}
                vertical = {true}
                ref = {carousel_ref}
                onScroll = {scroll_with_sound}
                loop = {true}
            />
        </Animated.View>
    }
</View>