Crashing when triggering again with the same action object

[antsmo]

Description

I've created a lookup with some configs defined for different notifications and one button to show each one. It works fine until I tap the same button a second time and then I get an error message about the background color (see below).

I should add that this is from a completely fresh React Native project.

Example

// @flow

import React, { Component } from "react";
import { StyleSheet, Text, Button, View } from "react-native";
import Snackbar from "react-native-snackbar";

const NOTIFICATIONS = {
  CANCELLED: {
    title: "Cancelled",
    duration: Snackbar.LENGTH_INDEFINITE,
    backgroundColor: "#DA2446",
    action: {
      title: "View",
      onPress: () => null
    }
  },
  COMPLETED: {
    title: "Completed",
    duration: Snackbar.LENGTH_LONG,
    backgroundColor: "#3DC217"
  },
  REQUEST: {
    title: "New Request",
    duration: 5000,
    backgroundColor: "#5B408E",
    action: {
      title: "Open",
      onPress: () => null
    }
  }
};

export default class App extends Component<null> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Button
          title="Show Cancelled"
          onPress={() => Snackbar.show(NOTIFICATIONS.CANCELLED)}
        />
        <Button
          title="Show Completed"
          onPress={() => Snackbar.show(NOTIFICATIONS.COMPLETED)}
        />
        <Button
          title="Show Request"
          onPress={() => Snackbar.show(NOTIFICATIONS.REQUEST)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

[cooperka]

Hi @MyGuySi, that's very strange! I wonder if it's related to re-using the same config object? Can you try the following:

const NOTIFICATIONS = {
  get CANCELLED() {
    return {
      title: "Cancelled",
      duration: Snackbar.LENGTH_INDEFINITE,
      backgroundColor: "#DA2446",
      action: {
        title: "View",
        onPress: () => null
      }
    };
  },
  get COMPLETED() {
    return {
      title: "Completed",
      duration: Snackbar.LENGTH_LONG,
      backgroundColor: "#3DC217"
    };
  },
  get REQUEST() {
    return {
      title: "New Request",
      duration: 5000,
      backgroundColor: "#5B408E",
      action: {
        title: "Open",
        onPress: () => null
      }
    };
  }
};

Please let me know if this changes anything. Otherwise, if you could link to a working example app I'd like to try it myself. Thanks.

[antsmo]

Hi @cooperka, yep I tried out your suggestion and that does indeed fix it 🤔

[cooperka]

Thank you for confirming! This bug should certainly be fixed, but luckily it's rare and easily worked around. I'd welcome a PR to address it if you have the time.

[antsmo]

I'm not using react-native-snackbar in any of my projects currently, it was more of a research exercise so I may not be able to submit a PR straight away but if we decide to use it then I'll definitely take a stab at it 👍