`Snackbar` is broken on `Android` with new architecture enabled

[coolersham]

Current behaviour

Showing the Snackbar component via the visible property seems to be broken when the new architecture with its Fabric renderer is enabled. The component is simply not showing up upon toggling the corresponding flag. When trying to hide the still not visible Snackbar, it flashes up and immediately hides again.

This is only noticeable when using the implementation with the new architecture of react-native on Android devices. The old architecture is not affected by this problem on either of the two major mobile platforms.

Expected behaviour

The behaviour of showing and hiding the Snackbar component should work the same way with both architecture approaches.

How to reproduce?

1. Use any kind of bare react-native example project (e.g. via CLI template) and install all dependencies via your favourite package manager.
2. Add the following code snippet into your App file and build the application with the new architecture disabled at first.

import React, { useState } from "react"
import { View, StyleSheet } from "react-native"
import { Button, Provider as PaperProvider, Snackbar } from "react-native-paper"

export default function App() {
  return (
    <PaperProvider>
      <Content />
    </PaperProvider>
  )
}

function Content() {
  const [visible, setVisible] = useState(false)
  const onToggleSnackBar = () => setVisible(prevState => !prevState)
  const onDismissSnackBar = () => setVisible(false)

  return (
    <View style={styles.container}>
      <Button onPress={onToggleSnackBar}>{visible ? "Hide" : "Show"}</Button>
      <Snackbar
        visible={visible}
        onDismiss={onDismissSnackBar}
        action={{
          label: "Undo",
          onPress: () => {},
        }}
      >
        Hey there! I'm a Snackbar.
      </Snackbar>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
})

3. After building the app on an Android device or simulator, try using both Show and Hide functionalities. Notice how the Snackbar works fine and as intended.
4. Now enable the new architecture by setting the newArchEnabled flag to true in gradle.properties of the ejected android folder of the project.
5. Sync and rebuild the app on your device or simulator.
6. Last but not least, try the same functionalities as described under 3. and notice that they are broken.

Your Environment

software	version
android	13.0 (API 33)
react-native	0.71.4
react-native-paper	5.5.0

[fgagneten]

+1 Same issue here, RN 0.71 + new arch enabled. react-native-paper version: 4.12.5!

[carozo]

+1 same issue, RN 0.73.2, react-native-paper: 5.12.3. did you happen to find a workaround?

[micahlt]

There's a PR open for this currently! https://github.com/callstack/react-native-paper/pull/4447 See also: #4445