react-native-irano v1.1.1

React Native Irano

Video Demonstration

You can watch a demonstration of the React Native Irano components in action below:

Installation

To use the React Native Irano components, ensure you have the following dependencies installed in your React Native project. You can use one of the following commands based on your package manager:

npm install react-native-irano
# or
yarn add react-native-irano

Table of Contents

• Overview
• Usage Example
  • Step 1: Wrap Your Application with IranoProvider
  • Step 2: Use the useIrano Hook in Your Component
• Components
  • Alert Component
  • Toast Component
• Features
• Props
• Styles
• Animations
• Example Presets
• Contributing
• License
• Getting Help

Overview

React Native Irano is a library that provides customizable alert and toast components for React Native applications. It allows developers to easily display notifications and alerts with smooth animations and various presets.

Usage Example

To use the IranoProvider, Alert, and Toast components in your application, follow the example below:

Step 1: Wrap Your Application with IranoProvider

First, ensure that your application is wrapped with the IranoProvider to provide context for the alert and toast functionalities.

import React from 'react';
import { IranoProvider } from 'react-native-irano';
import Home from './Home';

const App = () => {
    return (
        <IranoProvider
            doneProps={{
                titleStyle: { color: 'green' },
                subtitleStyle: { color: 'lightgray' },
            }}
            loadingProps={{
                titleStyle: { color: 'blue' },
                subtitleStyle: { color: 'lightgray' },
            }}
            errorProps={{
                titleStyle: { color: 'red' },
                subtitleStyle: { color: 'lightgray' },
            }}
        >
            <Home />
        </IranoProvider>
    );
};

export default App;

Step 2: Use the useIrano Hook in Your Component

In your component (e.g., Home), you can use the useIrano hook to access the showAlert and onToast functions.

import React from 'react';
import { View, Button } from 'react-native';
import { useIrano } from 'react-native-irano';

const Home = () => {
    const { showAlert, onToast } = useIrano();

    const handleShowAlert = () => {
        showAlert({
            title: 'Success!',
            subtitle: 'Your operation was successful.',
            preset: 'done',
        });
    };

    const handleShowToast = () => {
        onToast({
            title: 'Toast Notification',
            subtitle: 'This is a toast message.',
            preset: 'success',
        });
    };

    return (
        <View>
            <Button title="Show Alert" onPress={handleShowAlert} />
            <Button title="Show Toast" onPress={handleShowToast} />
        </View>
    );
};

export default Home;

Components

Alert Component

The Alert component is a customizable modal alert dialog for React Native applications. It provides visual feedback to users through various presets such as "done", "loading", and "error".

Props

Toast Component

The Toast component is a lightweight notification that appears temporarily at the top or bottom of the screen. It provides feedback to users about an operation.

Props

Features

• Customizable alert and toast presets (done, loading, error).
• Smooth animations using react-native-reanimated.
• Easy integration with React Native applications.

Styles

The components use default styles defined in their respective style objects. You can customize the appearance by passing your own styles through the relevant style props.

Animations

The Alert and Toast components utilize the react-native-reanimated library for smooth animations. The alert can animate in and out using various effects.

Example Presets

• Done: Displays a checkmark to indicate success.
• Loading: Shows a loading spinner.
• Error: Displays an "X" icon to indicate an error.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

This component is open-source and available under the MIT License. Feel free to use and modify it in your projects.

Getting Help

If you encounter any issues or have questions, please open an issue in the repository or contact the maintainers for support.

Made with create-react-native-library