Dialogs are broken with React Native 0.85.2

[sandeepsengupta]

Current behaviour

When this library is used with React Native 0.85.2, dialogs have a broken visual appearance (in both Android and iOS). The dialog appears at the bottom of the screen, and the darkened background only fills part of the screen:

Expected behaviour

The expected behavior occurs with React Native 0.84.1:

How to reproduce?

1. Create a new React Native project: npx @react-native-community/cli@latest init DialogBugReproducer
2. Enter the new project directory: cd DialogBugReproducer
3. Install react-native-paper: npm install react-native-paper
4. If you want to reproduce the bug in iOS as well as Android, run cd ios, pod install, and cd ..
5. Delete all content in App.tsx and replace it with the following code. (This code is copied from the React Native Paper docs, except I have renamed MyComponent to App and added a marginTop to the button to prevent it from displaying underneath the status bar.)

// Code is from https://oss.callstack.com/react-native-paper/docs/components/Dialog/#usage
// with minor changes described above.

import * as React from 'react';
import { View } from 'react-native';
import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';

const App = () => {
  const [visible, setVisible] = React.useState(false);

  const showDialog = () => setVisible(true);

  const hideDialog = () => setVisible(false);

  return (
    <PaperProvider>
      <View>
        <Button style={{marginTop: 100}} onPress={showDialog}>Show Dialog</Button>
        <Portal>
          <Dialog visible={visible} onDismiss={hideDialog}>
            <Dialog.Title>Alert</Dialog.Title>
            <Dialog.Content>
              <Text variant="bodyMedium">This is simple dialog</Text>
            </Dialog.Content>
            <Dialog.Actions>
              <Button onPress={hideDialog}>Done</Button>
            </Dialog.Actions>
          </Dialog>
        </Portal>
      </View>
    </PaperProvider>
  );
};

export default App;

6. Run the app in Android or iOS
7. Click the "Show Dialog" button in the app

What have you tried so far?

I tried downgrading to React Native Paper 5.15.0, but that did not fix the issue.

Your Environment

software	version
ios	26.2 (simulated)
android	16 (API 36.1, emulated)
react-native	0.85.2
react-native-paper	5.15.1 and 5.15.0
node	25.9.0
npm or yarn	11.12.1
expo sdk	Not using Expo

[kaizensnehal]

StyleSheet.absoluteFillObject has been deprecated in latest version of react native. StyleSheet.absoluteFill should fix it.

[hxzrx]

Replace StyleSheet.absoluteFillObject with StyleSheet.absoluteFill in paper src and lib.

If you are in windows, the following powershell cmd will help you find the related files:

Get-ChildItem -Path "node_modules/react-native-paper/lib","node_modules/react-native-paper/src" `
    -Recurse -Include "*.js","*.tsx" |
    Select-String -Pattern "absoluteFillObject" -List |
    ForEach-Object { $_.Path }

And save the following script into a ps1 file in the root of your project, exec this file will replace all StyleSheet.absoluteFillObject with StyleSheet.absoluteFill, and then the bug will be fixed.

Get-ChildItem -Path "node_modules/react-native-paper/lib","node_modules/react-native-paper/src" `
    -Recurse -Include "*.js","*.tsx" |
    ForEach-Object {
        $content = Get-Content $_.FullName -Raw
        if ($content -match 'absoluteFillObject') {
            $content -replace 'absoluteFillObject', 'absoluteFill' |
                Set-Content $_.FullName -NoNewline
            Write-Host "Fixed: $($_.FullName)"
        }
    }

[voulgarakis]

same for me. any updates?

[tux2nicolae]

Until a fix is made, you can use this patch:

diff --git a/node_modules/react-native-paper/lib/commonjs/components/Modal.js b/node_modules/react-native-paper/lib/commonjs/components/Modal.js
index a898853..d28100c 100644
--- a/node_modules/react-native-paper/lib/commonjs/components/Modal.js
+++ b/node_modules/react-native-paper/lib/commonjs/components/Modal.js
@@ -167,7 +167,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   wrapper: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._reactNative.StyleSheet.absoluteFill,
     justifyContent: 'center'
   },
   // eslint-disable-next-line react-native/no-color-literals
diff --git a/node_modules/react-native-paper/lib/commonjs/components/TouchableRipple/TouchableRipple.native.js b/node_modules/react-native-paper/lib/commonjs/components/TouchableRipple/TouchableRipple.native.js
index 935abf4..4d36e3c 100644
--- a/node_modules/react-native-paper/lib/commonjs/components/TouchableRipple/TouchableRipple.native.js
+++ b/node_modules/react-native-paper/lib/commonjs/components/TouchableRipple/TouchableRipple.native.js
@@ -89,7 +89,7 @@ const styles = _reactNative.StyleSheet.create({
     overflow: 'hidden'
   },
   underlay: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._reactNative.StyleSheet.absoluteFill,
     zIndex: 2
   }
 });
diff --git a/node_modules/react-native-paper/lib/module/components/Modal.js b/node_modules/react-native-paper/lib/module/components/Modal.js
index e7e29b7..ac9b4ab 100644
--- a/node_modules/react-native-paper/lib/module/components/Modal.js
+++ b/node_modules/react-native-paper/lib/module/components/Modal.js
@@ -159,7 +159,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   wrapper: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center'
   },
   // eslint-disable-next-line react-native/no-color-literals
diff --git a/node_modules/react-native-paper/lib/module/components/TouchableRipple/TouchableRipple.native.js b/node_modules/react-native-paper/lib/module/components/TouchableRipple/TouchableRipple.native.js
index d34c7f2..69e9a70 100644
--- a/node_modules/react-native-paper/lib/module/components/TouchableRipple/TouchableRipple.native.js
+++ b/node_modules/react-native-paper/lib/module/components/TouchableRipple/TouchableRipple.native.js
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden'
   },
   underlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     zIndex: 2
   }
 });
diff --git a/node_modules/react-native-paper/src/components/Modal.tsx b/node_modules/react-native-paper/src/components/Modal.tsx
index dc55c3c..45bfcf6 100644
--- a/node_modules/react-native-paper/src/components/Modal.tsx
+++ b/node_modules/react-native-paper/src/components/Modal.tsx
@@ -236,7 +236,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   wrapper: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center',
   },
   // eslint-disable-next-line react-native/no-color-literals
diff --git a/node_modules/react-native-paper/src/components/TouchableRipple/TouchableRipple.native.tsx b/node_modules/react-native-paper/src/components/TouchableRipple/TouchableRipple.native.tsx
index 1cb17b4..2d81d2d 100644
--- a/node_modules/react-native-paper/src/components/TouchableRipple/TouchableRipple.native.tsx
+++ b/node_modules/react-native-paper/src/components/TouchableRipple/TouchableRipple.native.tsx
@@ -135,7 +135,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   underlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     zIndex: 2,
   },
 });

[sandeepsengupta]

I tested the changes in the post above by @tux2nicolae, and it does indeed fix the issue in my project!

It also fixes a different issue I noticed, where Button and FAB objects did not show any visual feedback while pressed on iOS.