Open
Description
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?
- Use any kind of bare
react-native
example project (e.g. via CLI template) and install all dependencies via your favourite package manager. - 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",
},
})
- After building the app on an Android device or simulator, try using both
Show
andHide
functionalities. Notice how theSnackbar
works fine and as intended. - Now enable the new architecture by setting the
newArchEnabled
flag totrue
ingradle.properties
of the ejectedandroid
folder of the project. - Sync and rebuild the app on your device or simulator.
- 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 |