Have ideas to improve npm?Join in the discussion! »

    react-native-internal-notification
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    React Native InApp Notifications npm version

    Typescript component to show internal notifications for react native application

    Install

    yarn add react-native-internal-notification

    Props

    Name Description
    title Notification title
    message Message
    onPress The callback
    icon React component passed no notification. For example you can use @expo/vector-icons
    showingTime Timeout in ms how long notification show be visible on the screen
    color Background color for notification

    Usage

    Step 1.

    Wrap your app or root component with Notification provider

    import { NotificationProvider } from 'react-native-internal-notification';
    import App from './App';
    
    const Application = function () {
        return (
            <NotificationProvider>
                <App />
            </NotificationProvider>
        );
    };

    Step 2.

    Call show notification from any your components

    import React, { useCallback } from 'react';
    import { TouchableOpacity, Text } from 'react-native';
    import { FontAwesome } from '@expo/vector-icons';
    
    import { useNotification } from 'react-native-internal-notification';
    
    export default function DevScreen() {
        const notification = useNotification();
    
        const handleNotificationTestClick = useCallback(() => {
            notification.showNotification({
                title: 'My first notification',
                message: 'Hello from my first message',
                icon: <FontAwesome name="check-circle" size={45} />,
                onPress: () => {
                    alert('Pressed');
                },
            });
        }, [notification]);
    
        return (
            <>
                <TouchableOpacity onPress={handleNotificationTestClick}>
                    <Text>Show notification</Text>
                </TouchableOpacity>
            </>
        );
    }

    Small Demo and How it works

    How react-native-internal-notification works

    Install

    npm i react-native-internal-notification

    DownloadsWeekly Downloads

    67

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    18 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar