💬 Follow some activities (new user, payment, ...) from your app via Slack and this webhook lib

Overview

NPM version Downloads

react-native-slack-webhook

Slack webhook for React-Native

Installation

$ npm i react-native-slack-webhook --save

or

$ yarn add react-native-slack-webhook

Basic Usage

  • Install react-native first
$ npm i react-native -g
  • Initialization of a react-native project
$ react-native init myproject
  • Then, edit myproject/index.ios.js, like this:
/**
 * @flow
 */

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

import Slack from 'react-native-slack-webhook';
import { webhookURL } from './env';


class example extends Component {
  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to react-native-slack-webhook!
        </Text>
        <TouchableOpacity onPress={()=> new Slack(webhookURL).post('Test', '#test')}>
          <Text style={styles.instructions}>
            Press it to send message
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('example', () => example);

Setup

Slack

This lib need a webhook url, details here : https://api.slack.com/incoming-webhooks.

const webhookURL = '<your webhook URL provided by Slack, ie. Incoming WebHooks>'
const Slack = new Slack(webhookURL)

Example

Just provide a file name env.js at root of the example project, see the example/env.example.js file.

Payload object

Key Type Default Description
channel string '#general' The channel where you will post a message
username string 'bot' The username you will use to post the message
text string 'text is empty' The most important part, the message you will send
'icon_emoji' string ' 📱 ' The icon emoji with your message

FAQ

Is it supported and tested both on android and iOS?

YES

Contribution

Questions

Feel free to contact me or create an issue

made with

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!

You might also like...
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

React-magic-scroll - A react library for adding some effect you want when scroll

react-magic-scroll A react library for adding some effect you want when scroll.

A simple alert to notify users about new chat messages, something went wrong or everything is ok.
A simple alert to notify users about new chat messages, something went wrong or everything is ok.

react-native-dropdownalert info warn error success Table of contents Support Installation Demo Usage Props Caveats An alert to notify users about new

🚀  Organize your games easily. Create groups to play your favorite games with your friends.
🚀 Organize your games easily. Create groups to play your favorite games with your friends.

📱 Introduction 🧪 Technologies This project was developed using the following technologies: React Native Expo 🛠️ Features OAuth2 Social Authenticati

🗺 Open the map app of the user's choice.

An easy way to open a location in a map app of the user's choice, based on the apps they have installed on their device. Currently supported apps: App

📱⚛ 🔄 The Image360Viewer has support for React Native CLI and Expo. This library allows the user to explore and have the freedom to view all product details in 360 degrees.
📱⚛ 🔄 The Image360Viewer has support for React Native CLI and Expo. This library allows the user to explore and have the freedom to view all product details in 360 degrees.

📚 About 🗺 Getting started 🎉 Usage 📘 Properties 📱 Demo 👏 Contributing 💜 License About People want to see all the details of a product before the

ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.

react-native-infinite-scrollview ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can

TouchBolocker is a React Native and React Native Web component that helps blocking the user from interacting with children components.

TouchBlocker is a React Native and React Native Web component that helps blocking the user from interacting with children components.

🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.
🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.

Country Picker for React Native. iOS Android Web Demo 🎉 GO TO WEB DEMO 🎉 snack example Installation $ yarn add react-native-country-picker-modal Bas

Comments
  • Ampersand Issues

    Ampersand Issues

    I cannot seem to send an '&' through in a URL. For example, the following works:

    https://website.com/findsomething?id=hello

    But this does not: https://website.com/findsomething?id=hello&otherID=helloagain

    Per the Slack docs, https://api.slack.com/docs/message-formatting#how_to_escape_characters, this should work.

    Do you think it has anything to do with this library, or is it a bug with the Slack Webhook API in general?

    Thanks!

    opened by harryrein3 1
  • Action required: Greenkeeper could not be activated 🚨

    Action required: Greenkeeper could not be activated 🚨

    🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

    To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

    Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

    If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

    We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

    Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

    greenkeeper 
    opened by greenkeeper[bot] 0
Owner
Xavier Carpentier
📱Senior Freelance React-Native Developer Remote @ReactNativeGallery @Greaaat, 💬 GiftedChat main contributor
Xavier Carpentier
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Sam Aryasa 1.4k Sep 24, 2022
Credit cards and other payment icons in React Native

react-native-payment-icons There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't! We use SVGs tha

Henrique Bruno 10 Jul 4, 2022
🦇 [React Native+ Typescript + Animated] Tela de Signout animada com lib interna no React Native

BATMAN SIGNUP ?? Tela de Signout Animada com React Native + Typescript + Animated ?? Ilustração A ilustração pega como referência foi do sakin kumar d

Guilherme Andrade Lacerda 17 Apr 27, 2022
Teste lib React Native Snap Carousel - Créditos canal YouTube Sujeito programador

?? Projeto Aplicativo desenvolvido para teste da lib react-native-snap-carousel. ?? Tecnologias utilizadas React Native CLI React Native Snap Carousel

Alessandre Livramento 1 Aug 4, 2022
🏖️ Display some placeholder stuff before rendering your text or media content in React Native

Display some placeholder stuff before rendering your text or media content in React Native. Compatible with Expo and react-native-web. Snack applicati

Marvin Frachet 2k Sep 23, 2022
✈️ 🚀 React native progress-bar, give your progress-bar some brand style

React Native Air Progress Bar Pretty customizable and animated progress-bar component for React Native. We often need to customize our mobile applicat

Kirill Stepkin 55 Sep 2, 2022
A React Native button component customizable via props

apsl-react-native-button A React Native button component customizable via style props. Renders a TouchableOpacity under iOS and a TouchableNativeFeedb

APSL 750 Sep 12, 2022
An inline wrapper for calling out React Native components via tooltip

React Native Walkthrough Tooltip React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps. When not visible,

Jason Gaare 467 Sep 23, 2022
GPT3-generated podcasts via OpenAI's API. Currently in progress. Built with: TypeScript, React, awsm.css.

AI Cast GPT3-generated podcasts via OpenAI's API Built with TypeScript React awsm.css Available Scripts In the project directory, you can run: npm sta

Andrei Racasan 0 Sep 10, 2022
GPT3-generated podcasts via OpenAI's API. Currently in progress. Built with: TypeScript, React, awsm.css.

AI Cast GPT3-generated podcasts via OpenAI's API Built with TypeScript React awsm.css Available Scripts In the project directory, you can run: npm sta

Andrei Racasan 0 Sep 10, 2022