Skip to content

Snackbar is broken on Android with new architecture enabled #3775

Open
@coolersham

Description

@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",
  },
})
  1. 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.
  2. Now enable the new architecture by setting the newArchEnabled flag to true in gradle.properties of the ejected android folder of the project.
  3. Sync and rebuild the app on your device or simulator.
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions