Modal not appearing (or toggling) when using react-native-reanimated-carousel (Android only) - Stack Overflow

admin管理员组

文章数量:1317904

I'm trying to display a modal when an item in my react-native-reanimated-carousel is pressed, but it either never appears or doesn't toggle correctly. I've created a minimal example below. When I tap on an item in the carousel, I want the modal to become visible, and tapping again should close it. However, I'm not seeing the modal on the screen. It seems something to do with the animation. Any suggestion would be highly appreciated, Thanks.

Here is my code:

import { useState } from "react";
import {
  StyleSheet,
  Text,
  Dimensions,
  Modal,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import Carousel from "react-native-reanimated-carousel";

export default function App() {
  const width = Dimensions.get("window").width;
  const [modal, setModal] = useState(false);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={styles.container}>
        <Carousel
          data={[1, 2, 3, 4, 5]}
          width={width}
          height={200}
          renderItem={({ item, index }) => (
            <TouchableOpacity onPress={() => setModal(!modal)}>
              <Text>This is item {item}</Text>
            </TouchableOpacity>
          )}
          style={{ backgroundColor: "red" }}
        />
      </SafeAreaView>

      <Modal visible={modal} animationType="none" transparent={true}>
        <TouchableOpacity onPress={() => setModal(!modal)}>
          <Text>open/close modal</Text>
        </TouchableOpacity>
      </Modal>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 60,
  },
});

I'm trying to display a modal when an item in my react-native-reanimated-carousel is pressed, but it either never appears or doesn't toggle correctly. I've created a minimal example below. When I tap on an item in the carousel, I want the modal to become visible, and tapping again should close it. However, I'm not seeing the modal on the screen. It seems something to do with the animation. Any suggestion would be highly appreciated, Thanks.

Here is my code:

import { useState } from "react";
import {
  StyleSheet,
  Text,
  Dimensions,
  Modal,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import Carousel from "react-native-reanimated-carousel";

export default function App() {
  const width = Dimensions.get("window").width;
  const [modal, setModal] = useState(false);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={styles.container}>
        <Carousel
          data={[1, 2, 3, 4, 5]}
          width={width}
          height={200}
          renderItem={({ item, index }) => (
            <TouchableOpacity onPress={() => setModal(!modal)}>
              <Text>This is item {item}</Text>
            </TouchableOpacity>
          )}
          style={{ backgroundColor: "red" }}
        />
      </SafeAreaView>

      <Modal visible={modal} animationType="none" transparent={true}>
        <TouchableOpacity onPress={() => setModal(!modal)}>
          <Text>open/close modal</Text>
        </TouchableOpacity>
      </Modal>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 60,
  },
});

• react-native
• carousel
• react-native-reanimated
• react-native-reanimated-v2

Share Improve this question Follow edited Jan 22 at 17:20 Balasubramanian asked Jan 22 at 17:05 BalasubramanianBalasubramanian 7366 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

There is a known issue with the react-native-reanimated library on Android, which causes conflicts when using Modal. You can find the related discussion and issue here: react-native-reanimated #6659.

As a temporary workaround, I hide the Carousel component when the Modal is open to prevent any issues.

We will likely get an official fix from react-native-reanimated soon.

Here the workaround :

 return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={styles.container}>
        {!modal && <Carousel
          data={[1, 2, 3, 4, 5]}
          width={width}
          height={200}
          renderItem={({ item, index }) => (
            <TouchableOpacity onPress={() => setModal(!modal)}>
              <Text>This is item {item}</Text>
            </TouchableOpacity>
          )}
          style={{ backgroundColor: "red" }}
        />}
      </SafeAreaView>

      <Modal visible={modal} animationType="none" transparent={true}>
        <TouchableOpacity onPress={() => setModal(!modal)}>
          <Text>open/close modal</Text>
        </TouchableOpacity>
      </Modal>
    </GestureHandlerRootView>
  );

本文标签： Modal not appearing (or toggling) when using reactnativereanimatedcarousel (Android only)Stack Overflow