React-native: some text is not showing on different android devices

Question

After I built my app and put it on google play console for tests, the analysis is showing this:

Why does the android not showing the text on android 12 & 13 ? Is there any links with the accessibility ? Is it because of nesting ? I can't find anything about that on internet. Need some help

Here is my code:

return (
        <>
            <TouchableHighlight
                underlayColor={'#666666bf'}
                onPress={() => sendSomeWhere(props.type)}
                style={[styles.btnUtils, { left: props.position }]}
            >
                <MaterialCommunityIcons name={props.icon} size={25} style={styles.icons} />
            </TouchableHighlight >
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalInfos}
                onRequestClose={() => {
                    setModalInfos(!modalInfos);
                }}
            >
                <TouchableOpacity
                    onPressOut={() => { setModalInfos(false) }}
                    style={styles.touchModal}
                >
                </TouchableOpacity>
                <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                        <Text style={styles.modalTitle}>Légende</Text>
                        <View style={styles.block}>
                            <View style={styles.line}>
                                <View style={styles.left}><Image
                                    resizeMode="cover"
                                    style={styles.dot}
                                    source={require('../../img/marker_nothing.png')}
                                /></View>
                                <Text style={styles.right}>Bar <Text style={styles.bold}>sans terrace ni Happyhour</Text></Text>
                            </View>
                            <View style={styles.line}>
                                <View style={styles.left}><Image
                                    resizeMode="cover"
                                    style={styles.dot}
                                    source={require('../../img/marker_simple_35.png')}
                                /></View>
                                <Text style={styles.right}>Bar encore <Text style={styles.bold}>non référencé</Text></Text>
                            </View>
                            <View style={styles.line}>
                                <View style={styles.left}><Image
                                    resizeMode="cover"
                                    style={styles.marker}
                                    source={require('../../img/marker_NHH.png')}
                                /></View>
                                <Text style={styles.right}>Bar sans terrasse mais avec <Text style={styles.bold}>Happyhour plus tard</Text></Text>
                            </View>
                            
                         ........

                        <TouchableOpacity
                            style={[styles.buttonClose]}
                            onPress={() => setModalInfos(false)}
                        ><Text>✖️</Text></TouchableOpacity>
                    </View>
                </View>
            </Modal>
        </>
    )

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22,
},
btnUtils: {
    zIndex: 3,
    position: 'absolute',
    backgroundColor: '#ffffffcb',
    color: '#FFF',
    top: 13,
    shadowColor: "#000",
    shadowOffset: {
        width: 3,
        height: 3,
    },
    shadowOpacity: 1,
    shadowRadius: 1,

    elevation: 3,
},
icons: {
    color: '#666666',
    padding: 6
},
modalView: {
    width: '95%',
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 15,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
        width: 0,
        height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
},
buttonClose: {
    position: 'absolute',
    top: 0,
    right: 0,
    backgroundColor: "#dddddd",
    padding: 10
},
touchModal: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.5)'
},
modalTitle: {
    fontSize: 25,
    fontWeight: 'bold'
},
block: {
    fontSize: 20,
    paddingVertical: 5,
    flexDirection: 'row',
    flexWrap: 'wrap'
},
line: {
    flexDirection: 'row',
    paddingVertical: 5
},
left: {
    justifyContent: "center",
    alignItems: 'center',
    width: '20%',
    textAlignVertical: 'center',
},
right: {
    alignItems: 'flex-start',
    width: '80%',
    flexDirection: "row",
    paddingHorizontal: 5,
    textAlignVertical: 'center',
},
premiumFont: {
    fontWeight: 'bold',
},
marker: { height: 40, width: 40 },
dot: { height: 20, width: 20 },
bold: {
    fontWeight: '800'
},
shots: {
    flexDirection: "column",
    flexWrap: "wrap",
},
saltIcon: {
    alignSelf: 'center'
},
shotsLine: {
    flexDirection: "row",
    flexWrap: "wrap",
},

})

Answer 1

The default text colour is defined by the preferred colour scheme (light or dark). Use Appearance API to detect the scheme or to force the certain mode.

const colorScheme = useColorScheme();

...

Appearance.setColorScheme('light')