i'm using a Modal inside a flatlist using react native. But, when I click on the Icon that opens the modal, it starts to bug - the background becomes black and it starts to blink. Any ideas on what is happening here? I'm using the modal from native-base and the iconbutton from react-native-paper. Thanks!
export function Prospecction() {
const scrollY = React.useRef(new Animated.Value(0)).current;
const navigation = useNavigation();
const [modalVisible, setModalVisible] = React.useState(false);
const initialRef = React.useRef(null);
const finalRef = React.useRef(null);
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<Animated.FlatList
data={DATA}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
{ useNativeDriver: true }
)}
keyExtractor={(item) => item.key}
contentContainerStyle={{
padding: SPACING,
paddingTop: StatusBar.currentHeight || 42,
}}
renderItem={({ item, index }) => {
const inputRange = [
-1,
0,
ITEM_SIZE * index,
ITEM_SIZE * (index + 2),
];
const opacityInputRange = [
-1,
0,
ITEM_SIZE * index,
ITEM_SIZE * (index + 1),
];
const scale = scrollY.interpolate({
inputRange,
outputRange: [1, 1, 1, 0],
});
const opacity = scrollY.interpolate({
inputRange: opacityInputRange,
outputRange: [1, 1, 1, 0],
});
return (
<Animated.View
style={{
elevation: 10,
flexDirection: "row",
padding: SPACING,
marginBottom: SPACING,
backgroundColor: "#fff",
borderRadius: 12,
}}
>
<Modal
isOpen={modalVisible}
onClose={() => setModalVisible(false)}
initialFocusRef={initialRef}
finalFocusRef={finalRef}
>
<Modal.Content>
<Modal.CloseButton />
<Modal.Header>Adicionar comentário</Modal.Header>
<Modal.Body>
<FormControl>
<FormControl.Label>
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
Comentário
</Text>
</FormControl.Label>
</FormControl>
<FormControl mt="3">
<View style={{ padding: 1 }}>
<TextInput
style={{
flex: 1,
borderColor: "white",
borderRadius: 5,
borderWidth: 1,
backgroundColor: "#E6E7ED",
textAlign: "left",
}}
placeholder="Digite seu comentário aqui"
autoFocus={true}
numberOfLines={10}
multiline
></TextInput>
</View>
</FormControl>
</Modal.Body>
<Modal.Footer justifyContent={"center"} alignItems={"center"}>
<Button.Group
justifyContent={"center"}
alignItems={"center"}
>
<Button
onPress={() => {
setModalVisible(false);
}}
justifyContent={"center"}
alignItems={"center"}
rounded={15}
height={55}
width="80%"
bgColor={"#250D8A"}
_pressed={{ bgColor: "#4530a7" }}
>
Adicionar
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
<View style={{ flexDirection: "column" }}>
<View style={{ flexDirection: "row" }}>
<Image
source={{ uri: item.image }}
alt="Alternate Text"
size="xl"
style={{
width: AVATAR_SIZE,
height: AVATAR_SIZE,
borderRadius: AVATAR_SIZE,
marginRight: SPACING / 2,
}}
/>
<View style={{ flexDirection: "column" }}>
<Text
style={{
fontSize: 22,
fontWeight: "700",
textAlign: "left",
marginTop: SPACING - 4,
}}
>
{item.name}
</Text>
<Text
style={{
fontSize: 13,
opacity: 0.5,
fontWeight: "700",
textAlign: "left",
}}
>
{item.adate}
</Text>
</View>
</View>
<View
style={{ marginTop: SPACING - 5, flexDirection: "column" }}
>
<Text
style={{
fontSize: 16,
opacity: 0.7,
textAlign: "left",
alignSelf: "flex-start",
}}
>
<Text style={{ fontWeight: "bold" }}>Interno:</Text>{" "}
{item.intern}{" "}
</Text>
<Text
style={{
fontSize: 16,
opacity: 0.7,
textAlign: "left",
alignSelf: "flex-start",
}}
>
<Text style={{ fontWeight: "bold" }}>Externo:</Text>{" "}
{item.extern}
</Text>
</View>
</View>
<View
style={{
marginTop: SPACING - 5,
flexDirection: "column",
marginLeft: 80,
}}
>
<Text
style={{
fontSize: 14,
fontWeight: "700",
textAlign: "right",
color: "#7B61FF",
alignContent: "space-between",
}}
></Text>
</View>
<View
style={{
position: "absolute",
marginLeft: "5%",
marginTop: "5%",
right: 0,
flexWrap: "wrap",
}}
>
<Text
style={{
fontSize: 14,
fontWeight: "700",
textAlign: "right",
color: "#7B61FF",
}}
>
{item.status}
</Text>
</View>
<View
style={{
marginTop: SPACING - 5,
flexGrow: 1,
flexDirection: "column",
marginTop: "auto",
flexWrap: "wrap-reverse",
}}
>
<IconButton
icon="card-account-details-outline"
iconColor={MD3Colors.secondary30}
size={30}
onPress={() => navigation.navigate("ClientInfo")}
/>
</View>
</Animated.View>
);
}}
></Animated.FlatList>
<IconButton
style={{
position: "absolute",
bottom: 0,
right: 0,
}}
icon="plus-circle-outline"
iconColor={MD3Colors.secondary30}
size={30}
onPress={() => {
setModalVisible(!modalVisible);
}}
/>
</View>
);
}
This happened to me when I was working on a hangman game. The scaffold modals were preventing my FlatList of TouchableOpacities from being pressed when a modal was visible. I suggest using a conditionally rendered View instead of a modal as that should fix your issue.
Refer to my question here: Touchable Opacity in FlatList doesn't respond to touch.