Philip Cesar Garay
124 lines
3.6 KiB
JavaScript
124 lines
3.6 KiB
JavaScript
import { View, Text, Image } from "react-native";
|
||
import React, { useState } from "react";
|
||
import MusicLandHeader from "../../components/MusicLandHeader";
|
||
import { background, icons, img } from "../../assets";
|
||
import Page from "../../layouts/Page";
|
||
import { goBack, navigate } from "../../navigation/NavigationService";
|
||
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
||
import { gutters, Palette, Style } from "../../styles";
|
||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||
import BorderGradientButton from "../../components/BorderGradientButton";
|
||
import GradientButton from "../../components/GradientButton";
|
||
import { launchImageLibraryAsync } from "expo-image-picker";
|
||
import { Routes } from "../../navigation";
|
||
|
||
const AddPhotoCover = () => {
|
||
const [image, setImage] = useState(null);
|
||
|
||
const onPressAddImage = async () => {
|
||
const result = await launchImageLibraryAsync({
|
||
mediaTypes: ["images"],
|
||
allowsEditing: true,
|
||
aspect: [4, 3],
|
||
quality: 1,
|
||
});
|
||
|
||
if (!result.canceled) {
|
||
setImage(result.assets[0]?.uri);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Page backgroundImg={background.studioBG2} headerType="NONE">
|
||
<MusicLandHeader onPressBack={goBack} progress={90} />
|
||
<View style={{ flex: 1, marginTop: 16 }}>
|
||
<CreateLyricsHeader
|
||
title="Ta pochette est prête!"
|
||
subTitle="Qu’en penses-tu ?"
|
||
/>
|
||
<View style={{ flex: 1, ...Style.containerCenter }}>
|
||
<View style={{ width: "80%", position: "relative" }}>
|
||
<Image
|
||
source={img.placeholder}
|
||
style={{
|
||
width: "100%",
|
||
height: 300,
|
||
borderRadius: 20,
|
||
transform: [{ rotateY: "180deg" }],
|
||
}}
|
||
/>
|
||
<View
|
||
style={{ position: "absolute", width: "100%", height: "100%" }}
|
||
>
|
||
<Image
|
||
source={{ uri: image }}
|
||
style={{ width: "100%", height: "100%", borderRadius: 20 }}
|
||
/>
|
||
</View>
|
||
<View
|
||
style={{
|
||
position: "absolute",
|
||
alignSelf: "center",
|
||
alignItems: "center",
|
||
top: 10,
|
||
}}
|
||
>
|
||
<Text
|
||
style={{
|
||
fontSize: 22,
|
||
color: Palette.white,
|
||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||
}}
|
||
>
|
||
Lust for Life
|
||
</Text>
|
||
<Text
|
||
style={{
|
||
fontSize: 14,
|
||
color: Palette.gray,
|
||
fontFamily: FONT_FAMILY.InterRegular,
|
||
}}
|
||
>
|
||
Lana del Rey
|
||
</Text>
|
||
</View>
|
||
<View
|
||
style={{
|
||
position: "absolute",
|
||
alignItems: "center",
|
||
bottom: 10,
|
||
width: "100%",
|
||
}}
|
||
>
|
||
<Image
|
||
source={icons.musicLandLogo}
|
||
style={{ width: "100%", height: 30 }}
|
||
resizeMode="contain"
|
||
/>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View
|
||
style={{
|
||
paddingBottom: gutters * 2,
|
||
width: "80%",
|
||
alignSelf: "center",
|
||
gap: 12,
|
||
}}
|
||
>
|
||
<BorderGradientButton
|
||
title="Ajouter une autre photo"
|
||
onPress={onPressAddImage}
|
||
/>
|
||
<GradientButton
|
||
title="Valider"
|
||
onPress={() => navigate(Routes.FinishCompose)}
|
||
/>
|
||
</View>
|
||
</Page>
|
||
);
|
||
};
|
||
|
||
export default AddPhotoCover;
|