Discussion :

[pierrot10]

Bonjour à tous et bonne année,

J'apprends à faire une App pour Samrtphone avec React Native /Typescript.
J'ai suivi une vidéo pour faire un exercice très complete.
Maintenant, je rerfais mon App en fonction de l'exercice.

Pour une raison que j'ignore, VS Code m'affiche une erreur, sans rien que je fasse, enfin, je pense . Ce qui me surprends c'est que cette erreur est déclarée dans mon fichier, ... et dans le fichier d'exemple, qui sont en fait deux même fichier sauf que dans le mien, je modifie des trucs. En revanche dans mon fichier d'exemple, je n'ai rien touché.

J'ai créé une components et ce fichier me permds d'afficher un modal. Voici le fichier d'exempel au complete.

L'erreur se situe au niveau du <>



Je n'ai pas le souvenir d'avoir enlever un import, du moins, pas dans le fichier d'exemple, ni dans aucun autres fichier qui se trouve dans le dossier d'exemple. Je le consulte que pour avancer avec mon App.

Donc j'ai un peu de mal à comprendre comment trouver la faille.

Une idée? Ou comment mieux faire
PS: Mon App fonctionne malgré ceci

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
import { useThemeColors } from "@/hooks/useThemeColors";
import { useRef, useState } from "react";
import { Modal, StyleSheet, Image, Text, View, Pressable, Dimensions } from "react-native";
import { Colors } from "react-native/Libraries/NewAppScreen";
import { ThemedText } from "./ThemedText";
import { Card } from "./Card";
import { Row } from "./Row";
import { Radio } from "./Radio";
import { Shadows } from "@/constants/shadows";
 
type Props = {
    value: "id_station" | "station_name",
    onChange: (v: "id_station" | "station_name") => void
}
 
const options = [
    {label: "number", value: "id_station"},
    {label: "Name", value: "station_name"}
] as const;
 
export function SortButton({value, onChange}:Props){
 
    const colors = useThemeColors()
    const [isModalVisible, setModalVisibility] = useState(false)
 
    const buttonRef = useRef<View>(null)
    const [position, setPosition] = useState<null | {
        top: number, 
        right: number
    }>(null)
 
    const onButtonPress = () => {
        buttonRef.current?.measureInWindow((x, y, width, height) => {
            setPosition({
                top: y + height,
                right: Dimensions.get("window").width - x - width 
            })
            setModalVisibility(true);
        })
 
    }
    const onClose = () => {
        setModalVisibility(false);
    }
 
    return (
        <>
        <Pressable onPress={onButtonPress} >
            <View
                ref={buttonRef} 
                style={[styles.button, {backgroundColor: colors.grayWhite}]}>
                <Image 
                    source={
                        value == "id_station" ? 
                        require("@/assets/images/number.png") :
                        require("@/assets/images/alpha.png")
                    }
                    width={16}
                    height={16} 
                />
            </View>
        </Pressable>
 
        <Modal
            animationType="fade"
            transparent
            visible={isModalVisible}
            onRequestClose={onClose}
        >
            <Pressable style={styles.backdrop} onPress={onClose} />
            <View style={[styles.popup, {backgroundColor: colors.grayMedium, ...position}]}>
                <ThemedText style={styles.title} variant="subtitle2" color="red">Sort by</ThemedText>
                <Card style={styles.card}>
                    {options.map((o) => (
                        <Pressable key={o.value} onPress={() => onChange(o.value)}>
                            <Row gap={8} > 
                                <Radio checked={o.value == value} />
                                <ThemedText>{o.label}</ThemedText>
                            </Row>
                        </Pressable>
                    ))}
                </Card>
            </View>
        </Modal>
    </>
    )
}
 
const styles = StyleSheet.create({
    button:{
        width: 32,
        height: 32,
        borderRadius: 25,
        flex:0,
        alignItems: 'center',
        justifyContent: 'center'
    },
    backdrop: {
        flex:1,
        backgroundColor: "rgba(0,0,0,0.4)"
 
    },
    popup: {
        position: 'absolute',
        width: 113,
        padding: 4,
        paddingTop: 16,
        gap: 16,
        borderRadius: 12,
    },
    title: {
        paddingLeft: 20,
    },
    card: {
        paddingHorizontal: 16,
        padding: 16,
        gap: 16,
 
    }
})

PS: En toute honneté, je n'ai pas compris à quoi sert ce <> et </>