redux-saga-rn-alert

Ever wanted to use Alert.alert() with callbacks within a side-effect or generator function? This library help along!

It allows us to show a typical alert-modal while we can pass callbacks for the user-action the redux-saga-way with yield put() or yield call(). Other side-effects like fork or spawn aren't implemented yet. Feel free to contribute if you need it!

Changelog

V 1.2.6

Nested alerts will be prevented from now on, as soon as one re-enables them calling preventNestedAlerts(false).

Let's say in your code gets another alert() called while the first one is still open. This could result in unwanted and strage effects. Since 1.2.6 we will prevent that a subsequent call to alert() will be appear if another alert is still open.

Installation

yarn add redux-saga-rn-alert

or

npm install redux-saga-rn-alert --save

Setup

In the root reducer add the alert-reducer. For instance:

reducer.js:

import { alertReducer } from 'redux-saga-rn-alert';

const appReducer = combineReducers({
  appStates,
  routes,
  ...
  alertReducer
});

In the root saga spawn the channel watcher:

saga.js

import { watchAlertChannel } from 'redux-saga-rn-alert';

export default function * rootSaga() {
  yield [
    // ... all your sagas here
    spawn(watchAlertChannel),
  ];
}

Usage

The alert-function has the same signature as the official alert-method of react-native.

static alert(title, message?, buttons?, options?) {}

Example 1

Show an alert with 2 Buttons and put some actions:

  const buttons = [
      {text: 'Cancel', style:'cancel', put: {type: ACTIONS.S_CANCEL_EDIT}},
      {text: 'OK', style:'default',call: RouterActions.pop},
  ]

  yield call(alert, 'Error', 'Foobar message', buttons)

In this example an alert-box will be shown with two buttons "Cancel" and "ok". If the user taps on "cancel", a yield put() will be executed with a user-defined action, while "ok" raises a yield call to the pop-method of the Router from react-native-router-flux.

Instead of executing a "plain" function like pop() without any arguments, you can also call a method passing arguments:

Example 2

  const buttons = [
      {text: 'Cancel', style:'cancel', put: {type: ACTIONS.S_CANCEL_EDIT}},
      {text: 'OK', style:'default', call: {method: myMethod, args: {name: '', street: ''}},
  ]

  yield call(alert, 'Error', 'Happy to call alert with callbacks within a generator function', buttons)

Example 3

It is also allowed to pass an array of several side effects:

  const buttons = [
      {text: 'Cancel', style:'cancel', actions:
        [
            {put: {type: ACTIONS.S_CANCEL_EDIT}},
            {call: RouterActions.pop},
        ],
      },
      {text: 'OK', style:'default', call: RouterActions.pop},
  ]

  yield call(alert, 'Error', 'Foobar message', buttons)

In this example, the callback-function of the Cancel-button will first "yield put" an action to our reducers and then call the pop()-method of the router.

IOS Style Support:

iOS

On iOS you can specify any number of buttons. Each button can optionally specify a style, which is one of

• default
• cancel
• destructive

Contribution:

Contributors are welcome! Feel free to submit pull requests or open discussions.