feat(modal): dismiss only the topmost overlay on back or escape

example/src/DrawerItems.tsx

@@ -10,7 +10,6 @@ import {
   Dialog,
   Drawer,
   Palette,
-  Portal,
   Switch,
   Text,
   TouchableRipple,
@@ -240,24 +239,22 @@ function DrawerItems() {
           </Text>
         </>
       )}
-      <Portal>
-        <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
-          <Dialog.Title>Changing to RTL</Dialog.Title>
-          <Dialog.Content>
-            <Text variant="bodyMedium">
-              Due to Expo Go limitations it is impossible to change RTL
-              dynamically. To do so, you need to create a development build of
-              Example app or change it statically by setting{' '}
-              <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
-              <Text variant="labelMedium">app.json</Text> within{' '}
-              <Text variant="labelMedium">example</Text> directory.
-            </Text>
-            <Dialog.Actions>
-              <Button onPress={_handleDismissRTLDialog}>Ok</Button>
-            </Dialog.Actions>
-          </Dialog.Content>
-        </Dialog>
-      </Portal>
+      <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
+        <Dialog.Title>Changing to RTL</Dialog.Title>
+        <Dialog.Content>
+          <Text variant="bodyMedium">
+            Due to Expo Go limitations it is impossible to change RTL
+            dynamically. To do so, you need to create a development build of
+            Example app or change it statically by setting{' '}
+            <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
+            <Text variant="labelMedium">app.json</Text> within{' '}
+            <Text variant="labelMedium">example</Text> directory.
+          </Text>
+          <Dialog.Actions>
+            <Button onPress={_handleDismissRTLDialog}>Ok</Button>
+          </Dialog.Actions>
+        </Dialog.Content>
+      </Dialog>
     </DrawerContentScrollView>
   );
 }

example/src/Examples/Dialogs/DialogWithCustomColors.tsx

@@ -1,4 +1,4 @@
-import { Button, Portal, Dialog, Palette } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -10,29 +10,27 @@ const DialogWithCustomColors = ({
   close: () => void;
 }) => {
   return (
-    <Portal>
-      <Dialog
-        onDismiss={close}
-        theme={{
-          colors: {
-            surfaceContainerHigh: Palette.primary10,
-          },
-        }}
-        visible={visible}
-      >
-        <Dialog.Title style={{ color: Palette.primary95 }}>Alert</Dialog.Title>
-        <Dialog.Content>
-          <TextComponent style={{ color: Palette.primary95 }}>
-            This is a dialog with custom colors
-          </TextComponent>
-        </Dialog.Content>
-        <Dialog.Actions>
-          <Button textColor={Palette.primary95} onPress={close}>
-            Ok
-          </Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+    <Dialog
+      onDismiss={close}
+      theme={{
+        colors: {
+          surfaceContainerHigh: Palette.primary10,
+        },
+      }}
+      visible={visible}
+    >
+      <Dialog.Title style={{ color: Palette.primary95 }}>Alert</Dialog.Title>
+      <Dialog.Content>
+        <TextComponent style={{ color: Palette.primary95 }}>
+          This is a dialog with custom colors
+        </TextComponent>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Button textColor={Palette.primary95} onPress={close}>
+          Ok
+        </Button>
+      </Dialog.Actions>
+    </Dialog>
   );
 };
 

example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Portal, Dialog, Palette } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -9,28 +9,26 @@ const DialogWithDismissableBackButton = ({
   visible: boolean;
   close: () => void;
 }) => (
-  <Portal>
-    <Dialog
-      onDismiss={close}
-      visible={visible}
-      dismissable={false}
-      dismissableBackButton
-    >
-      <Dialog.Title>Alert</Dialog.Title>
-      <Dialog.Content>
-        <TextComponent>
-          This is an undismissable dialog, however you can use hardware back
-          button to close it!
-        </TextComponent>
-      </Dialog.Content>
-      <Dialog.Actions>
-        <Button textColor={Palette.tertiary50} disabled>
-          Disagree
-        </Button>
-        <Button onPress={close}>Agree</Button>
-      </Dialog.Actions>
-    </Dialog>
-  </Portal>
+  <Dialog
+    onDismiss={close}
+    visible={visible}
+    dismissable={false}
+    dismissableBackButton
+  >
+    <Dialog.Title>Alert</Dialog.Title>
+    <Dialog.Content>
+      <TextComponent>
+        This is an undismissable dialog, however you can use hardware back
+        button to close it!
+      </TextComponent>
+    </Dialog.Content>
+    <Dialog.Actions>
+      <Button textColor={Palette.tertiary50} disabled>
+        Disagree
+      </Button>
+      <Button onPress={close}>Agree</Button>
+    </Dialog.Actions>
+  </Dialog>
 );
 
 export default DialogWithDismissableBackButton;

example/src/Examples/Dialogs/DialogWithIcon.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import { Button, Portal, Dialog, Palette } from 'react-native-paper';
+import { Button, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -12,24 +12,22 @@ const DialogWithIcon = ({
   close: () => void;
 }) => {
   return (
-    <Portal>
-      <Dialog onDismiss={close} visible={visible}>
-        <Dialog.Icon icon="alert" />
-        <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
-        <Dialog.Content>
-          <TextComponent>
-            This is a dialog with new component called DialogIcon. When icon is
-            displayed you should center the header.
-          </TextComponent>
-        </Dialog.Content>
-        <Dialog.Actions>
-          <Button onPress={close} textColor={Palette.error50}>
-            Disagree
-          </Button>
-          <Button onPress={close}>Agree</Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+    <Dialog onDismiss={close} visible={visible}>
+      <Dialog.Icon icon="alert" />
+      <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
+      <Dialog.Content>
+        <TextComponent>
+          This is a dialog with new component called DialogIcon. When icon is
+          displayed you should center the header.
+        </TextComponent>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Button onPress={close} textColor={Palette.error50}>
+          Disagree
+        </Button>
+        <Button onPress={close}>Agree</Button>
+      </Dialog.Actions>
+    </Dialog>
   );
 };
 

example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx

@@ -1,6 +1,6 @@
 import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
 
-import { Dialog, Palette, Portal } from 'react-native-paper';
+import { Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -12,21 +12,19 @@ const DialogWithLoadingIndicator = ({
   close: () => void;
 }) => {
   return (
-    <Portal>
-      <Dialog onDismiss={close} visible={visible}>
-        <Dialog.Title>Progress Dialog</Dialog.Title>
-        <Dialog.Content>
-          <View style={styles.flexing}>
-            <ActivityIndicator
-              color={Palette.tertiary30}
-              size={Platform.OS === 'ios' ? 'large' : 48}
-              style={styles.marginRight}
-            />
-            <TextComponent>Loading.....</TextComponent>
-          </View>
-        </Dialog.Content>
-      </Dialog>
-    </Portal>
+    <Dialog onDismiss={close} visible={visible}>
+      <Dialog.Title>Progress Dialog</Dialog.Title>
+      <Dialog.Content>
+        <View style={styles.flexing}>
+          <ActivityIndicator
+            color={Palette.tertiary30}
+            size={Platform.OS === 'ios' ? 'large' : 48}
+            style={styles.marginRight}
+          />
+          <TextComponent>Loading.....</TextComponent>
+        </View>
+      </Dialog.Content>
+    </Dialog>
   );
 };
 

example/src/Examples/Dialogs/DialogWithLongText.tsx

@@ -1,6 +1,6 @@
 import { Dimensions, ScrollView, StyleSheet } from 'react-native';
 
-import { Button, Portal, Dialog } from 'react-native-paper';
+import { Button, Dialog } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -11,61 +11,59 @@ const DialogWithLongText = ({
   visible: boolean;
   close: () => void;
 }) => (
-  <Portal>
-    <Dialog
-      onDismiss={close}
-      visible={visible}
-      style={{ maxHeight: 0.6 * Dimensions.get('window').height }}
-    >
-      <Dialog.Title>Alert</Dialog.Title>
-      <Dialog.ScrollArea style={styles.smallPadding}>
-        <ScrollView contentContainerStyle={styles.biggerPadding}>
-          <TextComponent>
-            Material is the metaphor
-            {'\n'}
-            {'\n'}A material metaphor is the unifying theory of a rationalized
-            space and a system of motion. The material is grounded in tactile
-            reality, inspired by the study of paper and ink, yet technologically
-            advanced and open to imagination and magic.
-            {'\n'}
-            {'\n'}
-            Surfaces and edges of the material provide visual cues that are
-            grounded in reality. The use of familiar tactile attributes helps
-            users quickly understand affordances. Yet the flexibility of the
-            material creates new affordances that supersede those in the
-            physical world, without breaking the rules of physics.
-            {'\n'}
-            {'\n'}
-            The fundamentals of light, surface, and movement are key to
-            conveying how objects move, interact, and exist in space and in
-            relation to each other. Realistic lighting shows seams, divides
-            space, and indicates moving parts.
-            {'\n'}
-            {'\n'}A material metaphor is the unifying theory of a rationalized
-            space and a system of motion. The material is grounded in tactile
-            reality, inspired by the study of paper and ink, yet technologically
-            advanced and open to imagination and magic.
-            {'\n'}
-            {'\n'}
-            Surfaces and edges of the material provide visual cues that are
-            grounded in reality. The use of familiar tactile attributes helps
-            users quickly understand affordances. Yet the flexibility of the
-            material creates new affordances that supersede those in the
-            physical world, without breaking the rules of physics.
-            {'\n'}
-            {'\n'}
-            The fundamentals of light, surface, and movement are key to
-            conveying how objects move, interact, and exist in space and in
-            relation to each other. Realistic lighting shows seams, divides
-            space, and indicates moving parts.
-          </TextComponent>
-        </ScrollView>
-      </Dialog.ScrollArea>
-      <Dialog.Actions>
-        <Button onPress={close}>Ok</Button>
-      </Dialog.Actions>
-    </Dialog>
-  </Portal>
+  <Dialog
+    onDismiss={close}
+    visible={visible}
+    style={{ maxHeight: 0.6 * Dimensions.get('window').height }}
+  >
+    <Dialog.Title>Alert</Dialog.Title>
+    <Dialog.ScrollArea style={styles.smallPadding}>
+      <ScrollView contentContainerStyle={styles.biggerPadding}>
+        <TextComponent>
+          Material is the metaphor
+          {'\n'}
+          {'\n'}A material metaphor is the unifying theory of a rationalized
+          space and a system of motion. The material is grounded in tactile
+          reality, inspired by the study of paper and ink, yet technologically
+          advanced and open to imagination and magic.
+          {'\n'}
+          {'\n'}
+          Surfaces and edges of the material provide visual cues that are
+          grounded in reality. The use of familiar tactile attributes helps
+          users quickly understand affordances. Yet the flexibility of the
+          material creates new affordances that supersede those in the physical
+          world, without breaking the rules of physics.
+          {'\n'}
+          {'\n'}
+          The fundamentals of light, surface, and movement are key to conveying
+          how objects move, interact, and exist in space and in relation to each
+          other. Realistic lighting shows seams, divides space, and indicates
+          moving parts.
+          {'\n'}
+          {'\n'}A material metaphor is the unifying theory of a rationalized
+          space and a system of motion. The material is grounded in tactile
+          reality, inspired by the study of paper and ink, yet technologically
+          advanced and open to imagination and magic.
+          {'\n'}
+          {'\n'}
+          Surfaces and edges of the material provide visual cues that are
+          grounded in reality. The use of familiar tactile attributes helps
+          users quickly understand affordances. Yet the flexibility of the
+          material creates new affordances that supersede those in the physical
+          world, without breaking the rules of physics.
+          {'\n'}
+          {'\n'}
+          The fundamentals of light, surface, and movement are key to conveying
+          how objects move, interact, and exist in space and in relation to each
+          other. Realistic lighting shows seams, divides space, and indicates
+          moving parts.
+        </TextComponent>
+      </ScrollView>
+    </Dialog.ScrollArea>
+    <Dialog.Actions>
+      <Button onPress={close}>Ok</Button>
+    </Dialog.Actions>
+  </Dialog>
 );
 
 const styles = StyleSheet.create({