README
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