React Native Slack Integration (Android & Ios)

In this tutorial we will learn how to integrate Slack with React Native apps

Slack can replace email, text messaging, and instant messaging for your team, and keep all those communication styles together in one app. With both desktop and mobile versions, Slack can help your team collaborate and coordinate their work no matter where they are — in the field office, at home, or out knocking doors.By integrating Slack in our app, we can use all the features of slack in our app.

Steps to follow

1. In order to integrate slack in React Native, we need to create a new app in slack

Visit : https://api.slack.com/apps and create a new app in slack

Click on ‘Create New App’

2. Enter the app name and select your development stack work space, then click on App Button

3. After pressing on the create app button you will be redirected to the above screen.

• Take OAuth and Permission from the left side menu.
• Click on Add New Redirect url and enter your redirect url. chatapp://oauth is my redirect url, where chatapp is my react native app name
• Then scroll down

4. Click on Add an OAuth Scope and add the user token scopes you need for your react native app. For example, if you are posting a message to a conversation then your required scopes arechat:write chat:write:user chat:write:bot.

5. After adding scopes and redirect url you need to press on Install to Workspace button. Earlier the button was inactive state. After adding scopes and redirect url the button will become active.

6. A prompt for requesting permission will be shown. You need to click on the allow button to continue.

Now you will get the authentication tokens for your react native app.

Visit : https://api.slack.com/methods/ to see all the api methods and its Method Url, Method, Scopes Etc..

Post a message in channel

Create React Native application

npx react-native init chatapp

Sample code

In this example we implemented two things

• Creating a conversation channel in slack
• Post messages to conversation channel in slack

You can implement other features by looking https://api.slack.com/methods/ to see all the api methods and its Method Url, Method, Scopes Etc..

import React, { useState } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, Alert, TextInput } from 'react-native';
const App = () => {
const [conversationName, setConversationName] = useState('')const [conversationMessage, setConversationMessage] = useState('')const userToken = 'Your Token'
const createConversation = () => {
fetch('https://slack.com/api/conversations.create?token=' + userToken + '&name=' + conversationName + '&pretty=1')
.then((response) => response.json())
.then((responseJson) => {
alert(JSON.stringify(responseJson));
console.log(responseJson);
})
.catch((error) => {
alert(JSON.stringify(error));
console.error(error);
});
}
const postMessageToChannel = () => {fetch('https://slack.com/api/chat.postMessage?token=' + userToken + '&channel=' + conversationName + '&text=' + conversationMessage + '&pretty=1')
.then((response) => response.json())
.then((responseJson) => {
alert(JSON.stringify(responseJson));
console.log(responseJson);
})
.catch((error) => {
alert(JSON.stringify(error));
console.error(error);
});
}
return (
<View style={styles.container}>
{conversationName !== '' ? <Text style={styles.conversationHead}>Current conversation name is </Text> : null}
{conversationName !== '' ? <Text style={styles.conversationName}>{conversationName}</Text> : null}
<TextInput
placeholder='Conversation Name'
autoCapitalize={false}
onChangeText={text => setConversationName(text)}
value={conversationName}
style={styles.input}
/>
<TouchableOpacity onPress={() => createConversation()} style={styles.button}>
<Text style={styles.buttonText}> Create conversation</Text>
</TouchableOpacity>
<TextInput
placeholder='Conversation Message'
autoCapitalize={false}
onChangeText={text => setConversationMessage(text)}
value={conversationMessage}
style={styles.input}
/>
<TouchableOpacity onPress={() => postMessageToChannel()} style={styles.button}>
<Text style={styles.buttonText}> Post Message to Conversation</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
conversationHead: {
fontSize: 16,
fontWeight: '700'
},
conversationName: {
fontSize: 16
},
button: {
height: 40,
width: '80%',
borderRadius: 7,
marginTop: 10,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
color: 'white'
},
input: {
height: 50,
width: '80%',
borderColor: 'gray',
borderWidth: 1,
marginTop: 30,
borderRadius: 7,
padding: 10
}
});
export default App;

The UI for the below code is

• When we press on create conversation button, a conversation channel will be created in the slack
• When we press on Post Message to Conversation button, the mesage will be send to the corresponding conversation channel in the slack

Working

Pricing

For free version

With 10k searchable messages, 10 apps and integrations, 1-to-1 video calls, and two-factor authentication, the free version gives your team access to Slack’s basic features.

For paid version

References

• https://app.slack.com/

Thank You