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

| Prop | Type | Description | | ----------------------- | -------------------------- | -------------------------------------------------------------------- | | title | string | The title of the alert dialog. | | subtitle | string | The subtitle of the alert dialog. | | onClose | () => void | Callback function to be called when the alert is closed. | | visible | boolean | Controls the visibility of the alert dialog. | | preset | 'done' | 'loading' | 'error' | Determines the type of alert to display. | | titleStyle | TextStyle | Custom styles for the title text. | | subtitleStyle | TextStyle | Custom styles for the subtitle text. | | animatedViewProps | AnimatedProps<ViewProps> | Additional props for the animated view. | | overlayStyle | ViewStyle | Custom styles for the modal overlay. | | autoHide | boolean | If true, the alert will automatically close after a specified delay. | | autoHideDelay | number | The delay in milliseconds before the alert automatically closes. | | delay | number | The delay in milliseconds before the animation starts. | | duration | number | The duration of the animation in milliseconds. |

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

| Prop | Type | Description | | ----------------------- | -------------------------- | -------------------------------------------------------------------- | | title | string | The title of the toast notification. | | subtitle | string | The subtitle of the toast notification. | | onHide | () => void | Callback function to be called when the toast is hidden. | | preset | 'success' | 'error' | Determines the type of toast to display. | | position | 'top' | 'bottom' | Position of the toast on the screen. | | MAX_WIDTH | number | Maximum width of the toast. | | autoHideDuration | number | Duration in milliseconds before the toast automatically hides. | | iconContainerStyle | ViewStyle | Custom styles for the icon container. | | toastMainContainerStyle| ViewStyle | Custom styles for the main toast container. | | textContainerStyle | ViewStyle | Custom styles for the text container. | | titleStyle | TextStyle | Custom styles for the title text. | | subtitleStyle | TextStyle | Custom styles for the subtitle text. | | pathProps | PathProps | Additional props for the animated SVG path. |

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