TpReactNative/src/components/JokeDetail.tsx

import {StyleSheet, Text, View, Image, Button, TouchableOpacity} from 'react-native';
import {SampleJoke} from "../model/SampleJoke";
import {darksalmonColor, whiteColor, greyColor, indigoColor, purpleColor} from "../assets/Theme";
import React, {useState} from "react";

type JokeItemProps = {
    joke: SampleJoke;
};

export default function JokeDetail(props: JokeItemProps) {
    const [showDescription, setShowDescription] = useState(false); // état local pour contrôler la visibilité de la description
    const [showFavorite, setShowFavorite] = useState(false); // état local pour contrôler la visibilité du favori

    const toggleDescription = () => {
        setShowDescription(!showDescription);
    };

    const toggleFavorite = () => {
        setShowFavorite(!showFavorite);
    };

    const eye = require("../assets/eye_icon.png")
    const hideEye = require("../assets/eye_off_icon.png")
    const heart = require("../assets/favorite_icon.png")
    const heartPlain = require("../assets/plain_favorite_icon.png")

    return(
        <View style={styles.container}>
            <Image source={{ uri: props.joke.image }} style={styles.image} />
            <View style={styles.bottomContainer}>
                <Text style={{color: indigoColor}}>{props.joke.type}</Text>
            </View>
            <Text style={styles.text}>Résumé de la blague</Text>
            <View style={styles.row}>
                <TouchableOpacity style={styles.favContainer} onPress={toggleFavorite}>
                    <View>
                        <Image
                            source={showFavorite ? heartPlain : heart}
                            style={styles.imageButton}
                        />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.Button} onPress={toggleDescription}>
                    <View style={styles.chuteContainer}>
                        <Image
                            source={showDescription ? hideEye : eye}
                            style={styles.imageButton}
                        />
                        <Text style={styles.TextButton} >LA CHUTE</Text>
                    </View>
                </TouchableOpacity>
            </View>
            {showDescription && <Text style={styles.text}>{props.joke.description()}</Text>}
        </View>
    );
}
const styles = StyleSheet.create({
    image : {
        margin : 5,
        width: '90%',
        height:200,
        top : 5,
        alignSelf : "center",
        backgroundColor: "white",
        borderRadius: 5,
    },
    Button:{
        borderRadius : 5,
        backgroundColor : darksalmonColor,
        height:50,
        width : 160,
        flexDirection : "row"
    },
    imageButton : {
        margin : 10,
        width: 50,
        height:50,
        top : 5,
        alignSelf : "center",
        backgroundColor: "none",
        tintColor : whiteColor
    },
    favContainer : {
        margin : 20,
        borderWidth : 3,
        borderRadius : 15,
        borderColor : whiteColor,
        borderStyle : "solid"
    },
    TextButton : {
        margin: 10,
        textAlign : "center",
        fontWeight: "700",
        color : whiteColor,
    },
    chuteContainer :{
        display : "flex",
        flex : 1,
        flexDirection: "row",
        alignItems : "center"
    },
    container: {
        marginHorizontal: "5%",
        display: "flex",
        marginBottom:7,
        marginTop:7,
        paddingVertical: 10,
        backgroundColor: indigoColor,
        justifyContent: 'space-between',
        borderRadius: 20,
        height: "auto",
        borderColor: whiteColor,
        borderStyle: "solid",
        borderWidth: 1
    },
    row: {
        display: "flex",
        flexDirection:"row",
        alignSelf: "flex-end",
    },
    color: {
        flex: 0,
        backgroundColor: darksalmonColor,
        height: 150,
        width:15,
    },
    columnContainer: {
        flexDirection: "column",
        marginLeft: 20,
        marginRight: 20,
        width: '60%',
        flex: 2,
        justifyContent: 'space-between',
    },
    text: {
        color:greyColor,
        paddingBottom: 7,
        paddingTop: 7,
        marginLeft: 19,
        fontSize: 16,
    },
    bottomContainer: {
        backgroundColor: whiteColor,
        paddingVertical: 5,
        paddingHorizontal: 10,
        margin: 10,
        marginLeft: 19,
        marginTop: 20,
        borderRadius: 20,
        width : 120,
        alignItems : 'center'
    }
})
//
// const styles = StyleSheet.create({
//     container: {
//         marginHorizontal: "5%",
//         display: "flex",
//         marginBottom:7,
//         marginTop:7,
//         paddingVertical: 10,
//         backgroundColor: indigoColor,
//         justifyContent: 'space-between',
//         borderRadius: 20,
//         height: 500,
//         borderColor: whiteColor,
//         borderStyle: "solid",
//         borderWidth: 1
//     },
//     row: {
//         display: "flex",
//         flexDirection:"row",
//         alignSelf: "flex-end",
//     },
//     color: {
//         flex: 0,
//         backgroundColor: darksalmonColor,
//         height: 150,
//         width:15,
//     },
//     image: {
//         width: '90%',
//         alignSelf: "center",
//         marginTop: 10,
//         borderRadius: 5,
//         // height: 500,
//         backgroundColor: "red",
//         flex: 1
//     },
//     columnContainer: {
//         flexDirection: "column",
//         marginLeft: 20,
//         marginRight: 20,
//         width: '60%',
//         flex: 2,
//         justifyContent: 'space-between',
//     },
//     text: {
//         color:greyColor,
//         paddingBottom: 7,
//         paddingTop: 7,
//         marginLeft: 19,
//         fontSize: 16,
//     },
//     bottomContainer: {
//         backgroundColor: whiteColor,
//         paddingVertical: 5,
//         paddingHorizontal: 10,
//         margin: 10,
//         marginLeft: 19,
//         marginTop: 20,
//         borderRadius: 20,
//         width : 120,
//         alignItems : 'center'
//     }
// });