import React from "react";
import { Div, Text, Host, Portal } from "react-native-magnus";

export const MyApp = () => (
  <Host>
    <Div>
      <Text>Some copy here and there...</Text>

      <Portal>
        <Text>A portal on top of the rest</Text>
      </Portal>
    </Div>
  </Host>
);

import React from "react";
import { Modal, Host, Portal, Div, Icon, SnackbarRef } from "react-native-magnus";

const snackbarLightRef = React.createRef<SnackbarRef>();

export const App = () => (
  <Host>
    <Div>
     <Button
      onPress={() => {
        if (snackbarLightRef.current) {
          snackbarLightRef.current.show();
        }
      }}
    >
      Open snackbar
    </Button>

    <Portal>
      <Snackbar
        suffix={
          <Icon
            name="checkcircle"
            color="teal500"
            fontSize="md"
            fontFamily="AntDesign"
          />
        }
        onDismiss={() => {}}
        ref={snackbarLightRef}
        bg="green300"
        color="green800"
        duration={2000}
      >
        Here is a light snack for you!
      </Snackbar>
    </Portal>
    <Div>
  </Host>
);