Nested Public Modules

    react-native-easy-alert
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published
                          React Native Easy Alert Component.
    

    🚩 React Native Easy Alert

    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

    • [x] Support passing a custom component.
    • [x] Less State and simple to use.
    • [x] Can be used from any screen.
    • [x] Customizable on various levels.
    • [x] Change Font Family.
    • [x] 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

    Install

    npm i react-native-easy-alert

    DownloadsWeekly Downloads

    3

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    109 kB

    Total Files

    16

    Last publish

    Collaborators

    • mohamadmek