Screen.Recording.2022-04-24.at.22.38.13.mov
A utility that displays notifications to user ✏️
# for reanimated 2 users
yarn add [email protected]
# for reanimated 3 users
yarn add rn-notify@latestrn-notify needs react-native-reanimated package 💎
yarn add react-native-reanimated👇 You also need to complete installations of these packages for more information use the links below 👇
import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NotifyProvider, useNotify } from 'rn-notify';
function Page() {
const notify = useNotify();
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() =>
notify.success({
message: 'Good Job 👍',
duration: 1000,
})
}
>
<Text>Show alert</Text>
</TouchableOpacity>
</View>
);
}
export default function App() {
return (
<NotifyProvider>
<Page />
</NotifyProvider>
);
}For more examples check out the example folder 📂
Used to show a message. can take 3 types:
notify.success- Shows the message in a green boxnotify.info- Shows the message in a yellow boxnotify.error- Shows the message in a red box
NotifyOptions is an object with the following properties:
export type NotifyOptions = {
/**
* The text of the notification.
*/
message: string;
/**
* The level of the notification. Can be 'info', 'success' or 'error'.
*/
level: NotifyLevel;
/**
* The duration of the notification. Defaults to `3000`.
*/
duration?: number;
/**
* Show the timeout bar
*/
noTimeoutBar?: boolean;
/**
* Limit the number of notification displayed at the same time.
*/
limit?: number | null;
/**
* the function to call when the notification is clicked
* @param remove - the function to remove the notification that was clicked
*/
onPress?: (remove: () => void) => void;
/**
* The style of the notification.
*/
options?: {
containerStyle?: ViewStyle;
textStyle?: TextStyle;
timeoutBarStyle?: ViewStyle;
};
};See the contributing guide to learn how to contribute to the repository and the development workflow.