react-native-alert-utils

This lib provide some basic types of alert on your app.

Usage

import AlertProvider from 'react-native-alert-utils';

<Providers>
    <NavigationProvider>
        <Router />
------> <AlertProvider />
    </NavigationProvider>
</Providers>

After set provider on your root app, you can use methods to show modal inside your screens, by default, you can all customize your modal, defining the component will'be show, but, if you like a fast usage, we provide a basic layout of modal.

Showing modal

import { setModal } from 'react-native-alert-utils';
import { SimpleLayout } from 'react-native-alert-utils/Layout';

const Screen = () => {

  const SimpleModal = () =>
    <SimpleLayout>
      <Text>Modal test</Text>
    </SimpleLayout>

  return (
    <View>
      <Button onPress={() => setModal(<SimpleModal />)} />
    </View>
  )
}

Methods

Name | Params | Description --- | --- | --- pushModal | Component[] | Push list of components to screen popModal | | Pop first modal of screen, if exists setModal | Component, Options? | Set modal on screen, you can add some options using a object hideModal | | Hide modal from screen showModal | | Show modal on screen if have some

Layouts

You can get layouts from:

import { ... } from 'react-native-alert-utils/Layout'

Name | Props | Description --- | --- | --- SimpleLayout | Container | Simple layout used on example

Types

Options

Name | Type | Required | Default | Description --- | --- | --- | --- | --- fixed | boolean | No | false | If true, the modal cannot be hide on click outside, then you need to provide way to hide.

Container

Name | Type | Required | Default --- | --- | --- | --- | --- backgroundColor | string | false | #FFF height | number | % | false | 50% width | number | % | false | 90% padding | number | false | 20