Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Snackbar is broken on Android with new architecture enabled #3775

Open
coolersham opened this issue Mar 22, 2023 · 2 comments
Open

Snackbar is broken on Android with new architecture enabled #3775

coolersham opened this issue Mar 22, 2023 · 2 comments

Comments

@coolersham
Copy link

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
@fgagneten
Copy link

fgagneten commented Mar 30, 2023

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

@carozo
Copy link

carozo commented May 15, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants