Projects with Native Code Only

• Slack Reaction
• Slack Reacji
• Slack Reactions List
• Slack React
• Slack React App
• Slack Reacts

Video Chat Roulette for Slack Snack one-on-one video calls replicate the spontaneity of meeting people in the office hallway, grabbing coffee in the break room, or sharing lunch. Remote teams use Snack conversation games to encourage face-to-face time. Jun 30, 2020 Slack’s reaction feature is a terrific way to respond in direct messages or public channels without having to type a thing. Be sure to look for those checkmark, thumbs-up, 100-percent, or simple smiley emojis to use for your reactions. Slack clone is built using stream-chat-react-native@2.x.x. This example won't work on stream-chat-react-native@3.x.x yet, which brought plenty of breaking changes. We will publish a new version for slack clone soon. Currently we are busy with polishing of.

The following section only applies to projects with native code exposed. If you are using the managed expo-cli workflow, see the guide on Linking in the Expo documentation for the appropriate alternative.

Linking gives you a general interface to interact with both incoming and outgoing app links.

Every Link (URL) has a URL Scheme, some websites are prefixed with https:// or http:// and the http is the URL Scheme. Let's call it scheme for short.

In addition to https, you're likely also familiar with the mailto scheme. When you open a link with the mailto scheme, your operating system will open an installed mail application. Similarly, there are schemes for making phone calls and sending SMS. Read more about built-in URL schemes below.

Like using the mailto scheme, it's possible to link to other applications by using custom url schemes. For example, when you get a Magic Link email from Slack, the Launch Slack button is an anchor tag with an href that looks something like: slack://secret/magic-login/other-secret. Like with Slack, you can tell the operating system that you want to handle a custom scheme. When the Slack app opens, it receives the URL that was used to open it. This is often referred to as deep linking. Read more about how to get the deep link into your app.

Custom URL scheme isn't the only way to open your application on mobile. You don't want to use a custom URL scheme in links in the email because then the links would be broken on desktop. Instead, you want to use a regular https links such as https://www.myapp.io/records/1234546. and on mobile you want that link open your app. Android calls it Deep Links (Universal Links - iOS).

Built-in URL Schemes#

As mentioned in the introduction, there are some URL schemes for core functionality that exist on every platform. The following is a non-exhaustive list, but covers the most commonly used schemes.

Enabling Deep Links#

If you want to enable deep links in your app, please read the below guide:

• Android
• iOS

For instructions on how to add support for deep linking on Android, refer to Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links.

If you wish to receive the intent in an existing instance of MainActivity, you may set the launchMode of MainActivity to singleTask in AndroidManifest.xml. See <activity> documentation for more information.

NOTE: On iOS, you'll need to add the LinkingIOS folder into your header search paths as described in step 3 here. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your *AppDelegate.m:

If you're targeting iOS 8.x or older, you can use the following code instead:

If your app is using Universal Links, you'll need to add the following code as well:

Handling Deep Links#

There are two ways to handle URLs that open your app.

1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired#

You can handle these events with Linking.addEventListener('url', callback) - it calls callback({ url }) with the linked URL

2. If the app is not already open, it is opened and the url is passed in as the initialURL#

You can handle these events with Linking.getInitialURL() - it returns a Promise that resolves to the URL, if there is one.

Example#

Open Links and Deep Links (Universal Links)#

Open Custom Settings#

Get the Deep Link#

Send Intents (Android)#

Methods#

addEventListener()#

Add a handler to Linking changes by listening to the url event type and providing the handler.

canOpenURL()#

Determine whether or not an installed app can handle a given URL.

The method returns a Promise object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.

The Promise will reject on Android if it was impossible to check if the URL can be opened, and on iOS if you didn't add the specific scheme in the LSApplicationQueriesSchemes key inside Info.plist (see bellow).

Parameters:

For web URLs, the protocol ('http://', 'https://') must be set accordingly!

This method has limitations on iOS 9+. From the official Apple documentation:

• If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always return false. If the user reinstalls or upgrades the app, iOS resets the limit.

As of iOS 9, your app also needs to provide the LSApplicationQueriesSchemes key inside Info.plist or canOpenURL() will always return false.

getInitialURL()#

If the app launch was triggered by an app link, it will give the link url, otherwise it will give null.

Slack Reaction

To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

Slack Reacji

getInitialURL may return null while debugging is enabled. Disable the debugger to ensure it gets passed.

openSettings()#

Open the Settings app and displays the app’s custom settings, if it has any.

openURL()#

Try to open the given url with any of the installed apps.

You can use other URLs, like a location (e.g. 'geo:37.484847,-122.148386' on Android or 'http://maps.apple.com/?ll=37.484847,-122.148386' on iOS), a contact, or any other URL that can be opened with the installed apps.

The method returns a Promise object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.

Parameters:

This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check canOpenURL() first.

For web URLs, the protocol ('http://', 'https://') must be set accordingly!

This method may behave differently in a simulator e.g. 'tel:' links are not able to be handled in the iOS simulator as there's no access to the dialer app.

removeEventListener()#

Remove a handler by passing the url event type and the handler.

sendIntent()

Android

#

Launch an Android intent with extras.

Parameters:

Sematext team is highly distributed. We are ex-Skype users who recently switched to Slack for team collaboration. We’ve been happy with Slack features and especially integrations for watching our Github repositories, Jenkins, or receiving SPM or Logsene Alerts from our production servers through their ChatOps support. The ability to add custom integrations is really awesome! Being search experts it is hard for us to accept any limitation in search functionality in tools we use. For example, I personally miss the ability to search over all teams and all channels and I really miss having no analytics on user activity or channel usage. Elasticsearch has become a popular data store for analytical queries. What if we could take all Slack messages and index them into Elasticsearch? This would make it possible to perform advanced analytics with Kibana or Grafana, such as getting like top terms used, most active users or channels. Finally, a simple mobile web page to access only the indexed data from various Teams and Channels might be handy to have, too.

In this post we’re going to see how to build what we just described. We’ll use the Slack API, Node.js, React and Elasticsearch in 3 steps:

• Index Data from Slack
• Analyse Data from Slack
• Create a custom Web-App for search

Index Data from Slack

The Slack API provides several ways to access data. For example, outgoing webhook. This looks useful at first, however, this needs a setup per channel or keywords as trigger. Then I discovered a better way – the Node.js Slack Client. Simply log in with your Slack account and get all Slack messages! I wrote a little Node.js app to dump the relevant information as JSON to the console or to a file. Having the JSON output, it can be piped to Logagent-js a smart log shipper written in Node.js. I packaged this as “slack-elasticsearch-indexer” so it’s super easy to run:

The LOGSENE_TOKEN is what you can get from Logsene – the “ELK log management service”. Using Logsene means you don’t have to bother running your own Elasticsearch, plus the volume of most team’s Slack data is probably so small that it fits in Logsene’s free plan! 🙂

Once you run the above you should see new Slack Messages on the console. At the same time the messages will also be sent to Logsene and you will see them in the Logsene UI (or your local Elasticsearch server or cluster) right away.

Slack Reactions List

Analyze Slack Messages in Sematext

Now that our Slack messages are in Logsene we can build our Kibana Dashboards to visualize channel utilization, top terms, the chattiest people, and so on. But … did you know, that Logsene comes with a nice ad-hoc charting function? Simply open one of the Slack messages in Logsene, and click on the little chart symbol in the field userName and channel (see below).

This will very quickly render top users and channels for you:

Slack React

Slack Alerting

Imagine a support chat channel – wouldn’t it be nice to be notified when people start mentioning “Error”, “Problems” and “Broken” things increasingly frequently? This is where we can make use of Logsene Alerts and its ability to do anomaly detection. Any triggered alerts can be delivered via email, PagerDuty, Slack, HipChat or WebHooks:

While Logsene is great for alerts, analytics and Slack message search, as a general ‘data viewer’ the message rendering in Logsene does not show application-specific things like users’ profile pictures, which would allow much faster recognition of user messages. Thus, as our next step, we’ll create a simple Web Client with nice rendering of indexed Slack messages. Let’s see how this can be done very quickly using some cutting edge Web technology together with Logsene.

Create a Custom Web-App for Search

Slack React App

Slack Reacts

We recently started using Facebook’s React.js for rendering of various UI parts like the views for Top Database Operations and we came across a new set of React UI Components for Elasticsearch called SearchKit. Thanks to Logsene’s Elasticsearch API SearchKit works out of the box with Logsene!
After a few lines of CSS and some JavaScript a simple Slack Search UI is born. Check it out!

You just need to use your Logsene token as the Elasticsearch index name to run this app on your own data. For production we recommend adding a proxy to Elasticsearch (or Logsene) on the server side as described in the SearchKit UI documentation to hide connection details from the client application.

While this post shows how to index your Slack messages in Logsene for the purpose of archiving, searching, and analytics, we hope it also serves as an inspiration to build your own custom Search application with SearchKit, React, Node.js and Logsene?

If you haven’t used Logsene before, give it try – you can get a free account and have your logs and other event data in Logsene in no time. Drop us an email or hit us on Twitter with suggestions, questions or comments.