Not Implemented Dialog

A beautiful and user-friendly "Not Implemented" dialog component for React Native applications during development phases. This library provides an elegant way to show users that certain features are not yet ready, with a professional UI that maintains a positive user experience.

Features

• 🎨 Beautiful UI: Clean, modern design with smooth animations
• 📱 React Native Compatible: Built specifically for React Native applications
• 🎭 Bottom Sheet Modal: Uses @gorhom/bottom-sheet for native-like interactions
• 🎯 Easy Integration: Simple provider pattern with custom hook
• 📦 TypeScript Support: Full TypeScript definitions included
• 🎪 Animated GIF: Includes a friendly animated illustration
• 🔒 Safe Area Aware: Respects device safe areas and notches

Installation

npm install @nizek/not-implemented-dialog

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

npm install react react-native @gorhom/bottom-sheet @expo/vector-icons react-native-safe-area-context react-native-gesture-handler

Quick Start

1. Wrap your app with the provider

import React from 'react';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
import {NotImplementedProvider} from "@nizek/not-implemented-dialog";

export default function App() {
    return (
        <GestureHandlerRootView style={{flex: 1}}>
            <BottomSheetModalProvider>
                <NotImplementedProvider>
                    {/* Your app content */}
                </NotImplementedProvider>
            </BottomSheetModalProvider>
        </GestureHandlerRootView>
    );
}

2. Use the hook to show the dialog

import React from 'react';
import {View, Button} from 'react-native';
import {useNotImplemented} from "@nizek/not-implemented-dialog";

export default function MyComponent() {
    const {openDialog} = useNotImplemented();

    const handleNotImplementedFeature = () => {
        openDialog();
    };

    return (
        <View>
            <Button
                title="Coming Soon Feature"
                onPress={handleNotImplementedFeature}
            />
        </View>
    );
}

API Reference

NotImplementedProvider

A React context provider that manages the dialog state and provides the openDialog function to child components.

Props:

• children: ReactNode - Your app content

useNotImplemented

A custom hook that provides access to the dialog functionality.

Returns:

• openDialog: () => void - Function to open the "Not Implemented" dialog

Example Usage

import React from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import {NotImplementedProvider, useNotImplemented} from '@nizek/not-implemented-dialog';

function FeatureButton() {
    const {openDialog} = useNotImplemented();

    return (
        <TouchableOpacity style={styles.button} onPress={openDialog}>
            <Text style={styles.buttonText}>Premium Feature</Text>
        </TouchableOpacity>
    );
}

export default function App() {
    return (
        <NotImplementedProvider>
            <View style={styles.container}>
                <Text>My App</Text>
                <FeatureButton/>
            </View>
        </NotImplementedProvider>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        backgroundColor: '#007AFF',
        padding: 12,
        borderRadius: 8,
        marginTop: 20,
    },
    buttonText: {
        color: 'white',
        fontWeight: 'bold',
    },
});

Customization

The dialog comes with a predefined design that includes:

• A friendly animated GIF
• "Not Ready Yet!" title
• Encouraging message for users
• Professional "Got it" button

The dialog automatically handles:

• Safe area insets
• Backdrop dismissal
• Smooth animations
• Proper modal behavior

Requirements

• React Native >= 0.73
• React >= 18
• @gorhom/bottom-sheet >= 4
• @expo/vector-icons >= 14
• react-native-safe-area-context >= 4
• react-native-gesture-handler >= 2

TypeScript Support

This package includes full TypeScript definitions. Simply import and use with full type safety:

import {NotImplementedProvider, useNotImplemented} from '@nizek/not-implemented-dialog';

License

ISC

Author

Pooya Jalali

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Version History

• 1.0.9
• Initial release with core functionality
• 1.1.0
• Added DialogProps to customize dialog appearance (dark mode)

Made with ❤️ for Nizek developers