React Native text input is not responding to touch and not focusing when in multiple Modals

Question

Our project requires us to use a modal that is inside another modal(I know it`s bad but it was not my decision :) ) and it seems like text inputs are unable to focus when they are inside nested modals?

Here is a super simple demonstration of a code that fails to focus on text input when placed inside nested modal.

import React, { useState } from "react";
import { Modal, StyleSheet, View, TextInput } from "react-native";

const App = () => {
  const [text, setText] = useState('Some text');
  return (
    <View style={styles.centeredView}>
      <Modal visible={true} transparent={true} >
        <Modal visible={true} transparent={true} >
          <TextInput value={text} onChangeText={setText} style={styles.textInput} />
        </Modal>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  textInput: {
    width: 300,
    height: 300,
    backgroundColor: '#00ffff',
  }
});

export default App;

Here is an expo demo of this code running

Is this something that is not supported at all or it`s possible to somehow force focus on the text input when clicked?

Answer 1

Ok, figured out what was going wrong.

I am not entirely sure what is causing this but if the two modals open at the same time, text input is unable to focus.

If however, the inner modal is shown after the first one was already open, it works just fine. Take a look at these two examples to see the difference in behaviour.

Modals open at the same time. Focus is not working

Second modal is opened with some delay(Even works without the delay as long as it opens a bit later than the first one)

Answer 2

Okay, it seems like there's some sort of bug.

My best guess would be the following:

A modal will only allow you to focus on the components within that modal. Which makes sense, when using the Modal as a pop-up.

However, when you nest these Modal components, there is some issue figuring out whether the <TextInput> should be accessible or not.

Here's an adjusted version of yours: https://snack.expo.dev/qM68rALpM

Here, we can see that the <TextInput> does work within one <Modal>, but not within two. It won't work for 3 either.

So,

Our project requires us to use a modal that is inside another modal

Really? Does it require you to? Considering this is bugged behaviour - and it may not be a known one, stating that this solution is "required" is not something I would agree with. I suggest approaching this in a different way, as I suspect what has happened here is trying to solve X with Y, but Y isn't working and you want to solve Y.

If you want, you could elaborate on the problem (X) that you are trying to solve in the first place. It may be solved by having 2 <Modal>'s, but not nested, etc.