import { Button, Icon, Snackbar } from 'react-native-magnus'

const snackbarLightRef = React.createRef<snackbarRef>();
const snackbarDarkRef = React.createRef<snackbarRef>();

<Button
  onPress={() => {
    if (snackbarLightRef.current) {
      snackbarLightRef.current.show();
    }
  }}
>
  Light
</Button>
<Button
  onPress={() => {
    if (snackbarDarkRef.current) {
      snackbarDarkRef.current.show();
    }
  }}
>
  Dark
</Button>

<Snackbar
  suffix={
    <Icon
      name="checkcircle"
      color="teal500"
      fontSize="subheader"
      fontFamily="AntDesign"
    />
  }
  onDismiss={() => {}}
  ref={snackbarLightRef}
  bg="green300"
  color="green800"
  duration={2000}
>
  Here is a light snack for you!
</Snackbar>
<Snackbar
  suffix={
    <Icon
      name="checkcircle"
      color="white"
      fontSize="subheader"
      fontFamily="AntDesign"
    />
  }
  onDismiss={() => {}}
  ref={snackbarDarkRef}
  bg="green800"
  color="white"
  duration={2000}
>
  Here is a dark snack for you!
</Snackbar>