title: Best practice for managing multiple modals in React Native
body: <p>I have a screen and I need to show multiple modals in it. For example, if some request was failed then I want to show an error modal, if some request was successful then I want to show a success modal.</p>
  <p>I currently do it as following which I think is bad practice:</p>
  <pre><code>...
  
  export default function SomeSampleScreen(props) {
    const [errorModalVisible, setErrorModalVisible] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');
    const [successModalVisible, setSuccessModalVisible] = useState(false);
    const [successMessage, setSuccessMessage] = useState('');
  
    function showError(message) {
      setErrorMessage(message);
      setErrorModalVisible(true);
    }
  
    function showSuccess(message) {
      setSuccessMessage(message);
      setSuccessModalVisible(true);
    }
  
    return (
      &lt;&gt;
        &lt;ErrorModal
          visible={errorModalVisible}
          onClose={() =&gt; {
            setErrorModalVisible(false);
          }}&gt;
          {errorMessage}
        &lt;/ErrorModal&gt;
        &lt;SuccessModal
          visible={successModalVisible}
          onClose={() =&gt; {
            setSuccessModalVisible(false);
          }}&gt;
          {successMessage}
        &lt;/SuccessModal&gt;
        &lt;View&gt;
          ...
        &lt;/View&gt;
      &lt;/&gt;
    );
  }
  </code></pre>