Package Exports

react-native-snackbar-dialog

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-snackbar-dialog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-snackbar-dialog

A React Native SnackBar component with configurable dialog. Pull Requests are welcomed.

Why react-native-snackbar-dialog?

Flexible - Display as a popup message or a dialog
Controllable - Everything is just JavaScript and React Native
Simple - No configuration on the RootContainer and Redux

Preview

A SnackBar component that can display inline:
Inline Mode

And also can display as dialog:
Flat Mode

Installation

yarn add react-native-snackbar-dialog

Basic Usage

import SnackBar from 'react-native-snackbar-dialog'

Render inline always shows SnackBar without any buttons.

SnackBar.show('Making the world happier', { isStatic: true })

Controlling the show/hide logic with the onAutoDismiss callback with 8 seconds duration (default: 5 seconds).

SnackBar.show('Making the world happier', { duration: 8000 })

An inline SnackBar with an action button, triggering dismiss after confirm.

SnackBar.show('Making the world happier', {
  confirmText: 'Learn more',
  onConfirm: () => {
    console.log('Thank you')
    SnackBar.dismiss()
  }
})

A SnackBar dialog with separated row action button display.

SnackBar.show('Making the world happier', {
  confirmText: 'Learn more',
  onConfirm: () => {
    console.log('Thank you')
    SnackBar.dismiss()
  },
  cancelText: 'No thanks',
  onCancel: () => {
    console.log('Hope to see you again')
    SnackBar.dismiss()
  }
})

A SnackBar with confirgurable style.

SnackBar.show('Making the world happier', {
  style: { marginBottom: 20 },
  backgroundColor: 'white',
  buttonColor: 'blue',
  textColor: 'yellow'
})

Flow Control

This library handles messages order with peace of mind.

SnackBar.show(title, options)
For some operations like taking a screenshot requires the message to show it immediately. Using this method to give highest order among all Snack message.
SnackBar.add(title, options)
It will show it immediately if there isn't any active Snack message. Otherwise, it will enqueue and show it one by one when calling the dismiss function.
SnackBar.dismiss()
Adding it manually to onConfirm and onCancel props action to control the flow of show / hide.