0.1.3 • Published 2 years ago
react-native-easy-alert v0.1.3
React Native Easy Alert Component.
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