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'
})

A SnackBar with nested actions. Always dismiss current SnackBar before showing a new one using the dismiss callback.

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

Flow Control

This library handles messages order with peace of mind. Calling these functions will show the message immediately if there is no active item. Callback is optional, but it is suggested to use for flow control.

SnackBar.show(title, options, [callback])
Give highest priority to show among all Snack messages.
SnackBar.add(title, options, [callback])
Enqueue and show it one by one when calling the dismiss function.
SnackBar.dismiss([callback])
Control when and where to dismiss an active item, e.g. onConfirm and onCancel props action.