React Native Modal Does Not Display Properly When Used in the Same Screen as a ReorderableList (Android)

[juanmigdr]

Hey @omahili, thanks for the amazing library, it is looking amazing in one of my projects! I am currently having a small issue on android for which maybe you have a solution?

Description

When using a Modal component (e.g., from React Native or a custom modal) on the same screen as a ReorderableList (from react-native-reorderable-list), the modal does not display correctly on Android. It either appears partially off-screen, becomes non-interactive, or fails to render entirely.

This behavior is observed primarily on Android and works as expected on iOS.

Steps to reproduce

1. Create a screen with a Modal and a ReorderableList.
2. Trigger the Modal to display.
3. Observe that the Modal does not render correctly on Android.

Expected Behavior

The Modal should render properly, overlaying the screen content as expected.

Example

import React, { useState } from "react";
import {
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import ReorderableList, { reorderItems } from "react-native-reorderable-list";

const Screen1 = () => {
  const [isModalVisible, setModalVisible] = useState(false);
  const [items, setItems] = useState([
    { id: "1", name: "Item 1" },
    { id: "2", name: "Item 2" },
    { id: "3", name: "Item 3" },
  ]);

  const handleReorder = ({ from, to }: any) => {
    setItems((prevItems) => reorderItems(prevItems, from, to));
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setModalVisible(true)}
      >
        <Text>Open Modal</Text>
      </TouchableOpacity>

      <Modal
        transparent
        visible={isModalVisible}
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modal}>
          <Text>This is a modal</Text>
          <TouchableOpacity onPress={() => setModalVisible(false)}>
            <Text>Close</Text>
          </TouchableOpacity>
        </View>
      </Modal>

      <ReorderableList
        data={items}
        keyExtractor={(item) => item.id}
        onReorder={handleReorder}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item.name}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: "center",
  },
  button: {
    padding: 10,
    backgroundColor: "#007ACC",
    marginBottom: 20,
  },
  modal: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  },
  item: {
    padding: 20,
    backgroundColor: "#f9f9f9",
    marginBottom: 10,
  },
});

export default Screen1;

If you remove the ReorderableList, the modal shows up perfectly

[omahili]

Hello @juanmigdr, thanks!

So I was able to reproduce the issue after upgrading from RN 0.75.3 to 0.76.5 bridgeless. I solved it in your example by wrapping the Modal into a View like so:

<View>
  <Modal
    transparent
    visible={isModalVisible}
    animationType="slide"
    onRequestClose={() => setModalVisible(false)}
  >
    <View style={styles.modal}>
      <Text>This is a modal</Text>
      <TouchableOpacity onPress={() => setModalVisible(false)}>
        <Text>Close</Text>
      </TouchableOpacity>
    </View>
  </Modal>
</View>

I need to dive into it a bit more, but I'm not sure this is an issue with the reorderable list itself. I see it could be related to reanimated as there seems to be some similar issues.

[juanmigdr]

That fixes it, thank you so much for the prompt answer! 🎉

[omahili]

Closing for now as it doesn't seem to be caused by the library itself.

[TonyFTannous-Byd]

Hello @juanmigdr, thanks!

So I was able to reproduce the issue after upgrading from RN 0.75.3 to 0.76.5 bridgeless. I solved it in your example by wrapping the Modal into a View like so:

<View>
  <Modal
    transparent
    visible={isModalVisible}
    animationType="slide"
    onRequestClose={() => setModalVisible(false)}
  >
    <View style={styles.modal}>
      <Text>This is a modal</Text>
      <TouchableOpacity onPress={() => setModalVisible(false)}>
        <Text>Close</Text>
      </TouchableOpacity>
    </View>
  </Modal>
</View>

I need to dive into it a bit more, but I'm not sure this is an issue with the reorderable list itself. I see it could be related to reanimated as there seems to be some similar issues.

same for me, when update my react native app from o.75.4 to 0.76.5, the modal not working in android, since on ios it work perfectly
react-native-reanimated version is 3.16.1

Put the Modal in a View container resolve my case also. Thanks

[DARPANMANEK]

Hello @juanmigdr, thanks!
So I was able to reproduce the issue after upgrading from RN 0.75.3 to 0.76.5 bridgeless. I solved it in your example by wrapping the Modal into a View like so:

<View>
  <Modal
    transparent
    visible={isModalVisible}
    animationType="slide"
    onRequestClose={() => setModalVisible(false)}
  >
    <View style={styles.modal}>
      <Text>This is a modal</Text>
      <TouchableOpacity onPress={() => setModalVisible(false)}>
        <Text>Close</Text>
      </TouchableOpacity>
    </View>
  </Modal>
</View>

I need to dive into it a bit more, but I'm not sure this is an issue with the reorderable list itself. I see it could be related to reanimated as there seems to be some similar issues.

same for me, when update my react native app from o.75.4 to 0.76.5, the modal not working in android, since on ios it work perfectly react-native-reanimated version is 3.16.1

Put the Modal in a View container resolve my case also. Thanks

This Worked for me
@TonyFTannous-Byd Thanks! You saved my time