I have an issue: the elements of my list are not spread appart and I don't understand why.I have 3 elements for each letter and they should be separated.I think it may have something to do with the fact that these elements are an array inside a list.Here is a screenshot:https://imgur.com/Yes53hO
Here is my code :
<View style={{ flex: 15, backgroundColor: "red" }}><Text style={[styles.texte201, { marginTop: 50, marginLeft: 80 }]}> Glossaire</Text><View style={{ flex: 1, backgroundColor: "snow", flexDirection: "row", shadowColor: "#000000", shadowOpacity: 0.2, shadowRadius: 10, marginLeft: 80, marginRight: 80, justifyContent: "center", alignItems: "center", marginTop: 30, }}> {letter.map((letter) => { if (letter.data.length >= 1) { return (<View><Text style={{ fontSize: 20, fontWeight: "600", marginLeft: 15, marginRight: 15, }}> {letter.name}</Text></View> ); } else { return (<View><Text style={{ color: "grey", fontSize: 20, fontWeight: "600", marginLeft: 15, marginRight: 15, }}> {letter.name}</Text></View> ); } })}</View><View style={{ flex: 10, backgroundColor: "green" }}> {letter.map((letter) => { if (letter.data.length >= 1) { return (<View style={{ flex: 1, backgroundColor: "blue", flexDirection: "row", }}><Text style={{ fontSize: 90, fontWeight: "200", marginLeft: 15, marginRight: 15, }}> {letter.name}</Text><Text style={{ fontSize: 18, fontWeight: "600", marginTop: 25, width: "50%", }}> {letter.data} {"\n"}</Text><Text style={{ marginTop: 50, width: "50%" }}> {letter.description} {"\n"}</Text></View> ); } })}</View></View>And here is the code of my list:
const letter = [ { id: "1", name: "A", data: ["Abricot", "Abricot", "Abricot"], description: ["Un abricot est un fruit","Un abricot est un fruit","Un abricot est un fruit", ], }, { id: "2", name: "B", data: ["Branche", "Branche", "Branche"], description: ["Une branche vient d'un arbre","Une branche vient d'un arbre","Une branche vient d'un arbre", ], }, { id: "3", name: "C", data: [], }, { id: "4", name: "D", data: ["Dalle", "Dalle", "Dalle"], description: ["Une dalle de pierre","Une dalle de pierre","Une dalle de pierre", ], }, { id: "5", name: "E", data: [], }, { id: "6", name: "F", data: [], }, { id: "7", name: "G", data: [], }, { id: "8", name: "H", data: [], }, { id: "9", name: "I", data: [], }, { id: "10", name: "J", data: [], }, { id: "11", name: "K", data: [], }, { id: "12", name: "L", data: [], }, { id: "13", name: "M", data: [], }, { id: "14", name: "N", data: [], }, { id: "15", name: "O", data: [], }, { id: "16", name: "P", data: [], }, { id: "17", name: "Q", data: [], }, { id: "18", name: "R", data: [], }, { id: "19", name: "S", data: [], }, { id: "20", name: "T", data: [], }, { id: "21", name: "U", data: [], }, { id: "22", name: "V", data: [], }, { id: "23", name: "W", data: [], }, { id: "24", name: "X", data: [], }, { id: "25", name: "Y", data: [], }, { id: "26", name: "Z", data: [], },];If you need it, here is my style :
texte201: { color: "#424242", fontSize: 25, fontWeight: "600", },