rn-animation-toast v1.0.2

RNToastMessage

RNToastMessage is a simple React Native component for displaying toast messages with fade-in and fade-out animations. This component is designed to provide a customizable and visually appealing way to show brief informational messages to users.

Installation

To use RNToastMessage in your React Native project, follow these steps:

Install the package using your package manager:

npm i rn-animation-toast

Import the component in your code:

import RNToastMessage from 'rn-animation-toast';

Use the RNToastMessage component in your React Native application:

 <RNToastMessage
   message="Hello, this is a
   toast message!"
   subContainer={{
   borderWidth: 1,
   borderColor: '#FE7A36',
   backgroundColor: '#fff',
 }}
   container={{marginVertical: 10}}
   showDuration={7000}
   hideDuration={7000}
   textStyle={{textAlign: 'center'}}
 />

Props

• message (string): The text content of the toast message.

• showDuration (number): The duration for the toast message to fade in (in milliseconds).

• hideDuration (number): The duration for the toast message to fade out after being displayed (in milliseconds).

• container (object): Style object for the outer container of the toast message.

• subContainer (object): Style object for the inner container of the toast message.

• textStyle (object): Style object for the text content of the toast message.

Example

import React from 'react';
import { View } from 'react-native';
import RNToastMessage from 'rn-animation-toast';

const App = () => {
  return (
    <View>
      {/* Display a toast message with default styling */}
      <RNToastMessage message="This is a default toast message" />

      {/* Display a custom-styled toast message */}
      <RNToastMessage
        message="This is a custom-styled toast message"
        showDuration={1000}
        hideDuration={1000}
        container={{ backgroundColor: '#65B741' }}
        subContainer={{ borderRadius: 8 }}
        textStyle={{ color: '#000', fontSize: 14, fontWeight: '500', textAlign: 'center' }}
      />
    </View>
  );
};

export default App;

Feel free to customize the styles and durations according to your application's requirements.