4

React Native's Global Alert Component that can be fully customized and without t...

 2 years ago
source link: https://reactnativeexample.com/react-natives-global-alert-component-that-can-be-fully-customized-and-without-the-need-of-a-state/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

🚩 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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK