react-native-dialog-layer

A easy to use react native dialog layer, with queue support, based on mobx, react-native-simple-dialogs.

INSTALLATION:

yarn add react-native-dialog-layer
OR
npm install --save react-native-dialog-layer

You also need to install mobx dependencies:

yarn add mobx mobx-react
OR
npm install --save mobx mobx-react

PREPARING

Modify your codes like this:

...
import { DialogLayer, dialogLayerStore } from 'react-native-dialog-layer';
...

class AppComponent extends React.Component {
  render() {
    <View style={{ flex: 1, backgroundColor: 'white' }}>
      ...
      <DialogLayer />
      ...
    </View>
  }
}

const App = () => (
  <Provider {...yourOtherMobxStores} dialogLayerStore={dialogLayerStore}>
    <AppComponent />
  </Provider>
);

BASIC USAGE

1. Import dialogLayerStore in your js files:

   import { dialogLayerStore } from 'react-native-dialog-layer';

2. Add a dialog into the queue:

   dialogLayerStore.add(
     'Some APP',
     'Do you want to exit?',
     [
       { text: 'EXIT', onPress: () => { BackHandler.exitApp(); } },
       { text: 'CANCEL', onPress: () => { dialogLayerStore.shift(); } },
     ],
   );

The first dialog in the queue will show up.

API

Method | Description ----------------- | ----------- dialogLayerStore.add() | Add a dialog into the queue (See the example above) dialogLayerStore.shift() | Close current dialog

Contribution

Issues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve issue is to reproduce it in one of the examples.

Pull requests are welcome. If you want to change the API or do something big it is best to create an issue and discuss it first.

MIT Licensed