react-native-animated-message

quocnguyenvan

A message alert component using animations for react native support for ios and android

Version 1.0.2 License MIT

Keywords

react-nativereact-componentreact-native-componentreactmessageanimatedalertanimationiosandroid

INSTALL

Type: ESM Default

Version:

No default JS file set by the package author so the URL is guessed. You can always browse all package files to use another one.

Readme

Files

Statistics Browse CDN

react-native-animated-message

A message component using animations for react native support for both Android and iOS

Demo

demo

Installation

npm i react-native-animated-message

Example

Check Example.js file in the example folder. Or you can run the built examples step by step as below:

Clone the repository:

git clone https://github.com/quocnguyenvan/react-native-animated-message.git

cd to example: cd react-native-animated-message/example
Install dependencies: npm install
Finally, run the apps:

iOS:

react-native run-ios

Android:

react-native run-android

Usage

import Message from 'react-native-animated-message';

<View style={styles.container}>
  <Button 
    title="Show top"
    onPress={()=> this.message.showMessage('This is a message', 3000)}
  />
  <Message
    ref={(message) => this.message = message }
    animation={'slideX'}
    position={'top'}>
  </Message>
</View>

Method

showMessage(message: string, duration: number)

Props

Prop	Default	Type	Description
animation	slideX	`string`	Animation for message (`slideX`, `slideY` or `zoom`)
position	top	`string`	Determine the position of message (`top`, `center` or `bottom`)
messageHeight	60	`number`	The height of message
textStyle	{color: 'white', fontSize: 16, fontWeight: 'bold', textAlign: 'center'}	`style`	Style for message text
messageStyle	{backgroundColor: 'green'}	`style`	Style applied to the message