Installation

npm install --save react-native-alertbox

Usage

First you have to add AlertBox to App

//App.js
import React from 'react';
import {AlertBox} from 'react-native-alertbox';

export default function App() {
  return (
    <View>
      {/* ... */}
      <AlertBox />
    </View>
  );
}

Show some message

import React from 'react';
import {Button} from 'react-native';
import {fire} from 'react-native-alertbox';

export default function ExampleScreen() {
  return (
    <Button
      title="Click Me"
      onPress={() => fire({title: 'Title', message: 'Some text message'})}
    />
  );
}

If you need to use only one screen, you can instance your AlertBox Component with a ref ID.

import React, {useRef} from 'react';
import {Button, View} from 'react-native';
import {AlertBox} from 'react-native-alertbox';

export default function ExampleScreen() {
  const ref = useRef();
  return (
    <View>
      <AlertBox />
      <Button
        title="Click Me"
        onPress={() => ref.current.fire({title: 'Title', message: 'Some text message'})}
      />
    </View>
  );
}

The fire method takes title, message, actions, fields parameters. Let's look at the advanced example where we use these parameters.

fire({
  title: 'Username',
  message: 'Please enter your username and then click approve',
  // buttons
  actions: [
    {
      text: 'Close',
      style: 'cancel',
    },
    {
      text: 'Approve',
      onPress: (data) => console.log(data), // It is an object that holds fields data
    },
  ],
  // fields
  fields: [
    {
      name: 'username',
      placeholder: 'Enter username',
    },
  ],
});

License

MIT