callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.58k stars 2.05k forks source link

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

Open coolersham opened 1 year ago

coolersham commented 1 year ago

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 (

) }

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

return (

{}, }} > Hey there! I'm a Snackbar.

) }

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 commented 1 year ago

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

carozo commented 2 months ago

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

micahlt commented 3 weeks ago

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