@nguyentc21/react-native-toast v1.0.2

@nguyentc21/react-native-toast

Simple Toast for React native app

Installation

yarn add @nguyentc21/react-native-toast

Usage

// App.jsx
// ...
import { ToastSection } from '@nguyentc21/react-native-toast';

export function App(props) {
  return (
    <>
      {/* ... */}
      <ToastSection
        // position="bottom"
      />
    </>
  )
}

// ANiceView.jsx
// ...
import Toast from '@nguyentc21/react-native-toast';

export function ANiceView(props) {
  const _showToast = () => {
    Toast.show([
      {
        content: "A successful message!",
        type: "success",
      },
      {
        content: "A danger message!",
        type: "danger",
        duration: 5000,
      },
      {
        content: "A warning message!",
        type: "warning",
        textColor: 'red'
      },
      {
        content: "A standard message!",
      },
    ])
  }
  return (
    <>
      {/* ... */}
      <Pressable
        onPress={_showToast}
      />
      {/* ... */}
    </>
  )
}

Props

Customize all your Toast | Name | Type | Default | description | |---------------------|--------------------------------------------------|----------------|---------------------------------------------------------| | duration | number | 3000 | Shown time (ms) | | type | 'standard' | 'success' | 'danger' | 'warning' | 'standard' | Default Toast type | | position | 'top' | 'bottom' | 'top' | | | holdable | boolean | true | Allow to hole your Toast by pressing on it | | colors | ColorsType | DEFAULT_COLORS | Background color and text color for each position type. | | toastTextStyle | StyleProp | | Default text style of toast | | toastContainerStyle | StyleProp | | Default container style of toast |

** Please find ColorsType, DEFAULT_COLORS in source code.

And customize each of your Toast (ToastItemOptions) | Name | Type | Default | description | |-----------------|--------------------------------------------------|------------|-----------------------------| | content | string | | Toast message | | type | 'standard' | 'success' | 'danger' | 'warning' | 'standard' | Toast type | | duration | number | 3000 | Shown time (ms) | | backgroundColor | ColorValue | | | | textColor | ColorValue | | Text color of Toast message | | textStyle | StyleProp | | Text style of Toast message | | AdditionItem | Reactnode | | Try it. |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library