React Native Easy Alert Component

Overview

🚩 React Native Easy Alert

React Native Easy Alert Component.

Version Downloads Star on GitHub


Watch on youtube
Easy Alert example app.

React Native's Global Alert Component that can be fully customized and without the need of a state.

  • No need for redux.
  • No need for Context API.
  • Work with Class based Components and Functional.
  • Easy and Flexible and can be fully custom.

EasyAlert is an Alert replacement that solves adding a state to each alert.

Features

  • Support passing a custom component.
  • Less State and simple to use.
  • Can be used from any screen.
  • Customizable on various levels.
  • Change Font Family.
  • By default opening and closing animations.

Usage

**Note: You will feel much comfortable when you use it as it will make you write less code.

yarn add react-native-easy-alert
or
npm i react-native-easy-alert

Add AlertBox in your root component and give it a custom component or customize it using the props available.

import AlertBox from 'react-native-easy-alert';

const App = () => {
  return (
    <>
      <RootComponent />
      <AlertBox
        headerStyles={{backgroundColor: '#2E5AAC',}}
        headerTextStyles={{color: '#fff'}}
        bodyTextStyles={{color: '#000'}}
      />
    <>
  );
};

Use custom component to show your own creativity

import AlertBox from 'react-native-easy-alert';

const App = () => {
  return (
    <>
      <RootComponent />
      <AlertBox
       customChildren={(title?: string, body?: string, buttons?: any) => (
          <View
            style={{
              backgroundColor: '#fff',
              height: 200,
              width: 300,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text>{title}</Text>
            <Text>{body}</Text>
            <View style={{flexDirection: 'row', marginTop: 20}}>
              {buttons.map((x: any, i: any) => (
                <View
                  style={{
                    backgroundColor: 'lightblue',
                    marginHorizontal: 10,
                    padding: 15,
                  }}
                  key={i}>
                  <Text>buttons</Text>
                </View>
              ))}
            </View>
          </View>
        )}
         />
    <>
  );
};

Now you can use the functions showAlert and hideAlert Globaly.

import { showAlert, hideAlert } from 'react-native-easy-alert';

const MyScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableWithoutFeedback
        onPress={() =>
          showAlert({
            titleParam: 'Alert',
            bodyParam: 'Do you want to close me?',
            buttonsParam: [
              {
                backgroundColor: '#34c240',
                text: 'Yes',
                onPressAction: () => hideAlert(),
              },
              {
                backgroundColor: '#d64242',
                text: 'No',
                onPressAction: () => Alert.alert('Continue Please'),
              },
            ],
          })
        }
      >
        <Text>Show Alert</Text>
      </TouchableWithoutFeedback>
    </View>
  );
};

If you have a problem Alert not appearing above modal you need to add AlertBox Component inside the Modal.

{ hideAlert(); setIsModalVisible(!modalVisible); }} > showAlert({ titleParam: 'Alert', bodyParam: 'Do you want to close me?', buttonsParam: [ { backgroundColor: 'green', text: 'Yes', onPressAction: () => hideAlert(), }, { backgroundColor: 'red', text: 'No', onPressAction: () => Alert.alert('Continue Please'), }, ], }) } > Show Alert ); };">
import AlertBox, { hideAlert, showAlert } from 'react-native-easy-alert';

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(true);

  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={isModalVisible}
      onRequestClose={() => {
        hideAlert();
        setIsModalVisible(!modalVisible);
      }}
    >
      <TouchableWithoutFeedback
        onPress={() =>
          showAlert({
            titleParam: 'Alert',
            bodyParam: 'Do you want to close me?',
            buttonsParam: [
              {
                backgroundColor: 'green',
                text: 'Yes',
                onPressAction: () => hideAlert(),
              },
              {
                backgroundColor: 'red',
                text: 'No',
                onPressAction: () => Alert.alert('Continue Please'),
              },
            ],
          })
        }
      >
        <Text>Show Alert</Text>
      </TouchableWithoutFeedback>
      <AlertBox />
    </Modal>
  );
};

Static Methods

showAlert

showAlert({titleParam, bodyParam, buttonsParam}: {
titleParam?: string ;
bodyParam: string;
buttonsParam?:
| {backgroundColor?: string; text: string; onPressAction: Function}[];
}) => void`

hideAlert

hideAlert() => void`

Props

Main

Prop Type Description Default
customChildren? function function that receive three parameters (title, body, buttons) null
isRemoveChildrenAnimation? boolean Remove animation for custom children false
hideHeader? boolean Hide header false
hideCloseIcon? boolean Hide close icon false
containerRadius? number Radius of the main container false
closeIcon? component Custom close icon component false

Styling

Prop Type Description Default
overlayColor? string Overlay color behind the alert rgba(0, 0, 0, 0.5)
overLayStyles? object Overlay styles -
crossIconColor? string crossIconColor color #fff
globalTextStyles? string Style all the text that is in the alert like change font family -
mainContainerStyles? object Main container styles -
containerStyles? object Inner container styles -
headerStyles? object Header styles -
headerTextStyles? object Header text styles -
bodyStyles? object Body styles -
bodyTextStyles? object Body text styles -
footerStyles? object Footer styles -
buttonStyles? object Button styles -
buttonBorderRight? number Border right on button 0.5
buttonTextstyles? object Button text styles -
mainContainerStyles? object Main container styles -

Licenses

You might also like...
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project 💳 💳 Code: CreditCardInput onChange={this._on

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Customizable & Easy to Use Single Select Library for React Native
Customizable & Easy to Use Single Select Library for React Native

Dark Theme Light Theme Installation Add the dependency: npm i @freakycoder/react-native-single-select npx pod-install // After Install the `react-nati

An easy to use date picker for react native.
An easy to use date picker for react native.

React Native Neat Date Picker An easy-to-use date picker for react native. Main Features 📲 Both Android and iOS devices are supported 👍 Providing ra

Simple and easy to use TextArea for React Native.
Simple and easy to use TextArea for React Native.

Installation Add the dependency: React Native npm i @freakycoder/react-native-text-area Peer Dependencies IMPORTANT! You need install them Zero Depend

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API
An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

react-native-gif-search An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between light and dark mode. 🌟

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between "light" and "dark" mode

🚀 Easy to use time and date picker with lots of options for React Native 🥳
🚀 Easy to use time and date picker with lots of options for React Native 🥳

Documentation Getting Started Usage Configuration Localization Localization Contribution Installation Add the dependency: npm i react-native-time-date

Create your own complete Web color system fast and easy
Create your own complete Web color system fast and easy

Simpler Color Create your own complete Web color system fast and easy! Color is at the heart of every UI design system. A cohesive color system enable

Owner
null
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Arafat Zahan 13 Nov 21, 2022
A simple alert to notify users about new chat messages, something went wrong or everything is ok.

react-native-dropdownalert info warn error success Table of contents Support Installation Demo Usage Props Caveats An alert to notify users about new

Brian 1.7k Jan 1, 2023
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more

react-native-hero ?? A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more. Why not

Brandon Him 249 Sep 1, 2022
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.

react-native-styled-toast Themeable react-native toast component built using styled-components & styled-system. Features Pure JS implementation Suppor

Jean Verster 292 Dec 22, 2022
Easy, convenient, quick-forming Wizard component for React Native

React Native Wizard Easy, convenient, quick-forming Wizard component for React Native. Also this package is providing simple usage with few props and

Talut TASGIRAN 70 Nov 28, 2022
A react-native dropdown component easy to customize for both iOS and Android.

react-native-element-dropdown react-native-element-dropdown A react-native dropdown component easy to customize for both iOS and Android. Getting star

Hoà Phan 316 Jan 6, 2023
A native and easy to use toast plugin for react-native

react-native-toast-native React Native Toast is a toast component for both Android and iOS. it uses scalessec/Toast for iOS; Demo: Getting started $ n

null 98 Nov 17, 2022
Easy, convenient, quick-forming PinView component.

React Native Pin View Easy, convenient, quick-forming PinView component. It runs smoothly for both IOS and Android, and has only keyboard and input. v

Talut TASGIRAN 165 Dec 29, 2022
Quick and easy icons in React Native

WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons There's far bigger problems to so

Cory Smith 1.2k Dec 16, 2022
Easy React Native Layout & Grid for the Dumb

React Native Easy Grid ?? This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach. Installation npm insta

GeekyAnts 2.1k Dec 24, 2022