Customizable Global Alert Component For React Native


A fully customizable global alert component for React Native.


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

How to use it:

1. Import the easy alert component.

# Yarn
$ yarn add react-native-easy-alert
$ npm i react-native-easy-alert
import AlertBox from 'react-native-easy-alert';

2. Create a basic alert box.

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

3. Available component props.

overlayColor?: string;
mainContainerStyles?: ViewStyle;
headerStyles?: ViewStyle;
containerStyles?: ViewStyle;
footerStyles?: ViewStyle;
bodyStyles?: ViewStyle;
overLayStyles?: ViewStyle;
buttonStyles?: ViewStyle;
headerTextStyles?: TextStyle;
bodyTextStyles?: TextStyle;
globalTextStyles?: TextStyle;
buttonTextstyles?: TextStyle;
customChildren?: any;
isRemoveChildrenAnimation?: boolean;
hideHeader?: boolean;
hideCloseIcon?: boolean;
closeIcon?: null | any;
containerRadius?: number;
buttonBorderRight?: number;
crossIconColor?: string;


Customizable Global Alert Component For React Native


Add Comment