React Native TouchableOpacity onPress not working with FlatList - react-native

Question

I created a FlatList of selectable countries like this
export default function Body() {
const data = useData();
const [selected, setSelected] = useState(1);
const renderItem = ({ item }) => {
return item.empty ? (
<View style={styles.blank} />
) : (
<Country
text={item.name}
onPress={() => setSelected(item.id)}
selected={item.id === selected}
>
<item.Flag />
</Country>
);
};
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
extraData={selected}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.flatlist}
numColumns={3}
/>
</View>
);
}
And I defined a Country component like this
import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { styles } from "./Style";
export default function Country({ children, text, onPress, selected }) {
return (
<View style={styles.container}>
<View style={[styles.view, selected && styles.selected]}>
<TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>
</View>
<TouchableOpacity onPress={onPress}>
<Text style={styles.text}>{text}</Text>
</TouchableOpacity>
</View>
);
}
Everything was working perfectly fine and I was able to select a country but somehow now the touchableOpacity onPress event seems broken and the elements are no longer pressable. for things to work I need to edit and undo edit on the data array or the Country component. Is this a RN bug causing things to fail?

Answer 1

I found the root problem. Turns out that the problem lays on the stylesheet of the Country component wrapper. I gave it an alignSelf: "baseline" don't know why but removing it solved the hassle