fungilation / react-native-notification

:bell: Customizable toast-like notifications for React Native

react-native-notification

Customizable toast-like notifications for React Native

Install

$ npm install react-native-notification

Usage

import React, { Component, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Notification from 'react-native-notification';

class MyComponent extends Component {
  constructor() {
    this.state = {
      message: '',
    };
  }

  onPress = () => {
    this.setState({
      message: 'Hi there',
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.onPress}>
          <Text style={styles.text}>Tap me!</Text>
        </TouchableOpacity>
        <Notification message={this.state.message} styles={{
          container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
          },
          text: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
          },
        }} />
      </View>
    );
  }
}

export default MyComponent;

Customization

The styles of the notification are exposed as Notification.styles. The container property describes the notification container (by default the rounded gray-ish rectangle) and the message property the message itself (the white color text).

What may be in store for future versions

• Allow message as props.children allowing other components to be part of the message
• More unit tests

License

MIT (See LICENSE)