react-native-animated-message

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

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:

1. Clone the repository:

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

2. cd to example: cd react-native-animated-message/example
3. Install dependencies: npm install
4. 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

MIT Licensed