To make it easy to use svg icons across the app, create a separate component, SVGIcon, which accepts type, height, and width props and renders the icon on view. Next, download all the svg icons from GitHub. Here's how to add a few essential utilities into your app.Ĭreate the following directories for storing svg icons: Next, prepare the following directory structure in the root directory of the project: You will see a Download family button at the top. You can download the fonts from the Google Fonts website here. You can download Lato font files from the slack-clone project repository and icons from ( To do so, create a file named in the project directory and paste the following contents: For visual parity, we need to import the font into our app. Slack uses Lato font, which is available free on. Follow the installation steps required for this dependency: And thus, we are using react-native-svg-transformer dependency. We will be using the svg format for all the icons that you see across the app. Once you have a dev environment setup, create a new react-native application: Read the Installing Dependencies section of the official react-native docs. If you would like to see the final state of the app in action quickly, clone the following expo example of the slack clone and run it on the emulator or a phone:īefore getting started, make sure you have a development environment setup for react-native.

Resources 👇īelow are a few links to help you if you get stuck along the way: Rather, this tutorial is a comprehensive guide on how to build real-time chat using UI components provided by Stream's Chat and Messaging API and SDKs. Note: The objective of this tutorial is not intended to help you build a production-ready clone of the Slack application (because it already exists). In Part 2 (this tutorial) and 3 of this series, we will focus on the following items: We have decided to divide this tutorial into two parts (Part 2 and Part 3). Slack designs have changed quite a lot since then, so we will build a Slack clone from scratch with updated designs and additional features. There, we covered how to build Slack-type screens for navigation, message lists, and channel lists. In April 2020, Stream published a Part 1 of this series. React Native can handle the front-end side of things for us while relying on the Stream Chat API, which is equally seamless, for the back-end. Platform for workplaces, and it's quite feature-rich. In this series, we will demonstrate how you can build a clone of Slack using React Native. In fact, it has enough components, APIs, and supporting libraries in its present state that you can re-create every app that's out there on the Google Play Store or Apple App Store in no time! React Native has come a long way since its first release in 2015.

Please check our latest tutorial or our finished Slack clone. Note: This blog is archived due to limited compatibility with an old version of the React Native chat SDK.

Native slack client mac