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

by React Native Example

? React Native Easy Alert

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

GitHub

View Github