React Native Easy Alert Component.

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

• react-native-easy-alert - MIT Mohamadmek