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

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.

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...

Twitter-Clone-Nextjs - Twitter Clone Built With React JS, Next JS, Recoil for State Management and Firebase as Backend

Twitter Clone This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn de

Feb 7, 2022

๐Ÿป Bear necessities for state management in React

๐Ÿป Bear necessities for state management in React

A small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just eno

Jan 9, 2023

๐Ÿ High performance subscription-based form state management for React

๐Ÿ High performance subscription-based form state management for React

You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of React Final Form.

Jan 7, 2023

A state management library for React, heavily inspired by vuex

A state management library for React, heavily inspired by vuex

Vuex - But for React! โš› If you know vuex, you know it's as close as we get to a perfect state management library. What if we could do this in the reac

Sep 8, 2022

experimental project for babel-plugin-mutable-react-state

Goalist Mutable React Example This example is an attempt to work with babel-plugin-mutable-react-state on a simpler project to see how complicated wou

Jun 7, 2022

Whoosh - minimalistic React state manager

Whoosh - minimalistic React state manager

Whoosh - minimalistic React state manager Whoosh is a React state manager which entire API consists of exactly one function - createShared(). TL;DR ve

Nov 7, 2022

Small (0.5 Kb) react hook for getting media breakpoints state info in runtime

tiny-use-media Small (0.5 Kb) react hook for getting media breakpoints state info in runtime Usage npm i tiny-use-media --save Adn in your react code

Dec 13, 2022

Finished code and notes from EFA bonus class on building a React project without create-react-app

React From Scratch Completed Code This is the completed code for the EFA bonus class on building a React project from scratch. Included are also markd

Oct 11, 2021

This simple and small react component can check your repository stars and change theme on light/dark

This simple and small react component can check your repository stars and change theme on light/dark

Repository metrics for react This beauty and easy (4KB) react component can help you add metrics to your repositories also you can change component th

Jun 25, 2022
Owner
null
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | ็ฎ€ไฝ“ไธญๆ–‡ Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

null 136 Dec 30, 2022
Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic.

Synergies Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic. synergies is a tiny (

Lukas Bach 8 Nov 8, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil ยท Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems

DORAI UI Accessible, unstyled, open-sourced and fully functional react component library for building design systems Documentation site coming soon St

Fakorede Boluwatife 38 Dec 30, 2022
Simple React Native marquee component,fully implemented using reanimated v2,support to iOS/Android/Web.

@react-native-reanimated-community/react-native-reanimated-marquee Simple React Native marquee component,fully implemented using reanimated v2,support

react-native-reanimated-community 6 Sep 25, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

React Hook Component State This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the so

Yongwoo Jung 2 May 15, 2022
To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them ๐Ÿš€

Slinkity ?? This project is heavily under construction! ?? As excited as you may be, we don't recommend this early alpha for production use. Still, gi

Benjamin Holmes 398 Dec 27, 2022
a babel plugin that can transform generator function to state machine, which is a ported version of typescript generator transform

Babel Plugin Lite Regenerator intro This babel plugin is a ported version of TypeScript generator transform. It can transform async and generator func

Shi Meng 6 Jul 8, 2022