react-native-modal-notifier is a third party in-app notification notifier package! It provides modal notification popup. And reachable from any screen or component after the wrap the application with container. There are more than one usage example;
- Can be triggered by
useEffect
function - Can be triggered by user action
- Can be triggered by api service data
yarn add react-native-modal-notifier
Or
npm install --save react-native-modal-notifier
Wrap your app with NotifierContainer
import { NotifierContainer } from 'react-native-modal-notifier';
const App = () => (
<NotifierContainer>
<HomeScreen />
</NotifierContainer>
);
Then import useNotifier
anywhere in your code/screen/components
import { useNotifier } from 'react-native-modal-notifier';
const HomeScreen = () => {
const notifier = useNotifier();
useEffect(() => {
alert && notifier({
title: alert.title,
message: alert.message
});
}, [alert]);
return (
<TouchableHighlight
onPress={() =>
notifier({
title: 'New Notification',
message:
'New Notification',
})
}>
<Text>Set Notification</Text>
</TouchableHighlight>
);
};
Name | Description | Type | Default |
---|---|---|---|
title | Title of the message | string | null |
message | The message of the content | string | null |
headerShown | Header visibility option | boolean | true |
primaryButtonText | The text in the primary button content | string | undefined |
primaryButtonAction | The primary button action | func | undefined |
primaryButtonColor | The background color of the primary button | string | #3a86ff |
primaryButtonPosition | The position of the primary button in the notifier | center or right or left |
center |
type | The type of modal notifier | default or info or warning or error |
default |
childComponent | The child component to be rendered within the modal component | JSX.Element |
undefined |
contentImage | The image uri or address to be rendered within the modal | ImageSourcePropType |
undefined |
contentImageRadius | The image radius controller | boolean | false |
contentImageSize | The size of the content image | small or middle or large |
middle |
contentImageType | The image type of content | square or rectangle |
square |
autoCloseDelay | The timer of the auto close the notifier as millisecond | number |
null |