Forem: Vishal Narkhede

React Native: How To Build Bidirectional Infinite Scroll

Vishal Narkhede — Mon, 01 Mar 2021 15:50:13 +0000

👋 Introduction

There have been many discussions on Stack Overflow and GitHub around implementing infinite scroll using React Native, on top of FlatList or SectionList. I've found that there aren't any easy solutions out there for bidirectional infinite scroll, which works on both Android and iOS. Recently, while working on v3.0.0 of React Native Chat SDK at Stream, we added bidirectional infinite scroll to our chat components. We had to jump through plenty of hurdles to make it happen while maintaining a good user experience around scrolling (especially for Android). Thus we decided to publish an excellent and small open-source package, on top of FlatList, to make this task easier for other React Native developers.

GitHub ⭐ : github.com/getstream/react-native-bidirectional-infinite-scroll

🔌 Usage

As mentioned earlier, this package is a wrapper around FlatList, and so it can be used exactly like FlatList from React Native, with few additional props:

🔮 Quick Preview

Scroll down further, for the tutorial

iOS	Android

Let's Dive Deep

What and How?
Tutorial: Chat UI With Bidirectional Infinite Scroll
What's more?!

📚 What and How

This section will walk you through the hurdles of implementing bidirectional infinite scroll and how we solved them.

Support for `onStartReached`

FlatList from React Native has built-in support for infinite scroll in a single direction (from the end of the list). You can add a prop onEndReachedon FlatList. This function gets called when your scroll is near the end of the list, and thus you can append more items to the list from this function. You can Google for React Native infinite scrolling, and you will find plenty of examples for this. Unfortunately, the FlatList doesn't provide any similar prop for onStartReached for infinite scrolling in other directions.

We have added support for this prop as part of this package by simply adding the onScroll handler on FlatList, and executing the callback function (onStartReached) when the scroll is near the start of the list. If you take a look at the implementation of VirtualizedList, you will notice that onEndReachedfunction gets called only once per content length. That's there for a good purpose - to avoid redundant function calls on every scroll position change. Similar optimizations have been done for onStartReached within this package.

Race condition between `onStartReached` and `onEndReached`

To maintain a smooth scrolling experience, we need to manage the execution order of onStartReached and onEndReached. Because if both the callbacks happen at (almost) the same time, which means items will be added to the list from both directions. This may result in scroll jump, and that's not a good user experience. Thus it's essential to make sure one callback waits for the other callback to finish.

`onStartReachedThreshold` and `onEndReachedThreshold`

FlatList from React Native has a support for the prop onEndReachedThreshold, which is documented here

How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback.

Instead, it's easier to have a fixed value offset (distance from the end of the list) to trigger one of these callbacks. Thus we can maintain these two values within our implementation. So onStartReachedThreshold and onEndReachedThreshold props accept the number - distance from the end of the list to trigger one of these callbacks.

Smooth scrolling experience

FlatList from React Native accepts a prop - maintainVisibleContentPosition, which makes sure your scroll doesn't jump to the end of the list when more items are added to the list. But this prop is only supported on iOS for now. So taking some inspiration from this PR, we published our separate package to add support for this prop on Android - flat-list-mvcp. And thus @stream-io/flat-list-mvcp is a dependency of the react-native-bidirectional-scroll package.

🖥 Tutorial: Chat UI With Bidirectional Infinite Scroll

Now let's see how we can implement a chat message list, scrolling infinitely in both directions.

Setup

Let's start by creating a React Native app:

$ npx react-native init AwesomeChatList
$ cd AwesomeChatList

Add the required dependencies:

$ yarn add react-native-bidirectional-infinite-scroll @stream-io/flat-list-mvcp

Next, run the app:

$ npx react-native run-ios

Note: The server will auto-refresh as you make changes to the code.

Create message list

Open this project in some editor (I love VS Code) and open App.js in the project's root directory.

We are going to populate the list with dummy messages. In a real application, these messages are queried against a server. For example, we can write a simple utility function to mock this API call for querying n number of messages.

Create a file - utils.js

Next, let's write a small UI component for the message bubble. Create a file named MessageBubble.js.

Now let's first implement a simple list, which renders these messages on the first load. Copy the following content to App.js and hit save.

You should be able to see the list of messages as shown in the screenshot on the right.

Add Infinite Scroll

Next, let's implement infinite scroll to the list by adding onStartReached and onEndReached prop functions.

onStartReached - add 10 messages at the beginning of the list
onEndReached - add 10 messages at the end of the list

Replace the contents of App.js with the following:

And that's it. If you scroll up or down, you will see new messages being loaded in the list and scroll position being maintained as well (both for Android and iOS)

Send Message

In real chat applications, you don't actually "infinitely" scroll. There is always an end to the loadMoreRecentMessages function. And after this point, you will want the scroll to automatically move to the bottom of the list, as other users send a new message or if you send a new message.

Basically, after this point, we want to enable the "autoscroll to top" (bottom in our case, since the list is inverted) functionality of FlatList. You can do this by setting a prop enableAutoscrollToTop as true. Additionally, you can also set autoscrollToTopThreshold to true.

Let's try to simulate this scenario by keeping a counter on the number of times recent messages were queried. Once the counter crosses 2, let's stop querying the message.
Let's add a "Send Message" button at the bottom to send a single message.

Replace the contents of App.js with following

Now scroll to the bottom couple of times, until you can't load any more recent messages. Now try to send a single message by pressing the "Send Message" button. You will see scroll automatically scrolling to the bottom of the list. But if you scroll up a bit and then send a message - then the scroll position will be maintained. The autoscrollToTopThreshold prop controls this threshold.

🎉 Congratulations!! Whats more?!

You've implemented a bidirectional infinite scroll with React Native! Additionally following props are available to add more customisations:

activityIndicatorColor
enableAutoscrollToTop
autoscrollToTopThreshold
onStartReachedThreshold
onEndReachedThreshold
showDefaultLoadingIndicators
HeaderLoadingIndicator
FooterLoadingIndicator

I hope you found it useful. Feel free to add some questions, comments, and feedback here. And don't forget to put a ⭐ on github repo. Happy Coding!!

maintainVisibleContentPosition prop for Android react-native

Vishal Narkhede — Wed, 09 Dec 2020 21:27:35 +0000

In react-native, ScrollView (and FlatList) component have support for a prop maintainVisibleContentPosition, which is really useful for chat-like applications where you want to see new messages scroll into place. Also you might need it in other applications where you need bi-directional infinite scroll. Although this prop is only supported on iOS for ScrollView/FlatList.

But it's easy enough to get it working Android by a simple wrapper. We at Stream built this wrapper for our in-house react-native chat sdk, but we are making it public, in case it helps other devs from react-native community.

Installation

yarn add @stream-io/flat-list-mvcp

Usage

import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';

<FlatList
    maintainVisibleContentPosition={{
        autoscrollToTopThreshold: 10,
        minIndexForVisible: 1,
    }}
    ...
/>

<ScrollView
    maintainVisibleContentPosition={{
        autoscrollToTopThreshold: 10,
        minIndexForVisible: 1,
    }}
    ...
/>

Cheers and happy coding :)

Special thanks to stackia for this :)

Tutorial: How to Build a Slack Clone with React Native — Part 3

Vishal Narkhede — Tue, 17 Nov 2020 16:06:03 +0000

In Part 2 of this tutorial, we covered how to build Slack-like navigation, channel list screen, channel screen, reaction picker, and action sheet. In this tutorial, Part 3, we will build various search screens and thread screen.

Resources 👇

Below are a few helpful links if you get stuck along the way:

Thread Screen

The MessageList component accepts the prop function onThreadSelect, which is attached to the onPress handler for reply count text below the message bubble. If you check our ChannelScreen component, you will see navigation logic to ThreadScreen added to the onThreadSelect prop on the MesaageList component.
Thread is provided out-of-the-box from stream-chat-react-native. If you look at the source code, it's a set of Message (parent message bubble), MessageList, and a MessageInput component. You can customize these underlying components using props – additionalParentMessageProps, additionalMessageListProps and additionalMessageInputProps. We can use this Thread component easily for our purpose.
We need to implement a checkbox labeled "Also send to {channel_name}" (as shown in the screenshot below). When ticked, the message should appear on the channel as well. We can use show_in_channel property on the message object for this, as mentioned in docs for threads and replies

If you specify show_in_channel, the message will be visible both in a thread of replies and the main channel.

If the checkbox is ticked, add show_in_channel: true to the message object before sending it. We can achieve this by providing a doSendMessageRequest prop function, which overrides Channel components default sendMessage handler.

Use the Animated API by React Native to achieve the sliding animation of the checkbox and other action buttons.

Now assign the ThreadScreen component to its respective HomeStack.Screen in App.js.

Search Screens

There are four modal search screens that we are going to implement in this tutorial:

Jump to Channel Screen & Channel Search Screen

We can create a standard component for Jump to channel screen and Channel search screen.

Let's first create a common component needed across the search screens.

Direct Messaging Avatar

This is a component for the avatar of direct messaging conversation:

For one to one conversations, it shows other member's picture with his presence indicator
For group conversation, it shows stacked avatars of two of its members.

Modal Screen Header

This is a common header for modal screens, with a close button on the left and title in the center.

Now let's build a ChannelSearchScreen, which can be used as "Jump to channel screen" and "Channel search." There are two main differences between these screens, which we will control through a prop — channelsOnly.

"Jump to channel screen" doesn't have a header
"Channel search screen" doesn't have a horizontal list of recent direct messaging conversation members.

Also, we need to display a list of recent conversations when the user opens this modal. We can use the cached list of recent conversations in CacheService (which we populated in the ChannelList component via the useWatchedChannels hook) to avoid extra calls to the queryChannels API endpoint.

Assign the ChannelSearchScreen component to its respective ModalStack.Screen in App.js.

New Message Screen

Highlights of this screen (NewMessageScreen) are as following:

Inputbox on top is a multi-select input. One can select multiple users there. This can be quickly built as a separate component — UserSearch. Expose onChangeTags callback as a prop function to give parent component access to selected users.
UserSearch component uses queryUsers endpoint provided available on chat client. Please check docs for queryUser endpoint
When the user focuses on the input box at the bottom of the screen, the app should create a conversation between the already selected users in the top (UserSearch) input box. We handle this in the onFocus handler for the input box at the bottom of the screen.

Now assign the NewMessageScreen component to its respective ModalStack.Screen in App.js.

Message Search Screen

We are going to implement a global search for message text on this screen — MessageSearchScreen.

Note: The official Slack app provides richer features such as search in a specific channel or search by attachments. Here, we are keeping it limited to a global search, although channel-specific search is also possible using Stream Search API

Global message search is relatively heavy for the backend so that search won't happen onChangeText, but when the user presses the search button explicitly. TextInput component has returnKeyType prop which we need for our use case.
Component uses search endpoint available on chat clients. Please check docs for message endpoint
Search results display a list of messages; when pressed, they should go to the channel screen on that particular message. We are going to build a separate screen for this — TargettedMessageChannelScreen. This component is quite similar to ChannelScreen, but it queries the channel at a specific message (provided through props) instead of the latest message as follows:

When the user lands on this screen, he can see the list of past searches. Store every search text in AsyncStorage.

Copy the following components in your app:

Assign the MessageSearchScreen and TargettedMessageChannelScreen component to its respective ModalStack.Screen in App.js.

Implementation for additional more screens (shown in screenshots below) is available in slack-clone-react-native repository. If you managed to follow the tutorial so far, implementation of following screens should be easy to understand.

Congratulations! 👏

You've completed Part 3, the final step, of our tutorial on building a Slack clone using the Stream’s Chat API with React Native. I hope you found this tutorial helpful!

Happy coding!

Tutorial: How to Build a Slack Clone with React Native — Part 2

Vishal Narkhede — Sat, 31 Oct 2020 15:01:48 +0000

React Native has come a long way since its first release in 2015. 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!

In this series, we will demonstrate how you can build a clone of Slack using React Native. Slack is a widely used messaging
platform for workplaces, and it's quite feature-rich. React Native can handle the front-end side of things for us while relying on Stream Chat, which is equally seamless, for the back-end.

In April 2020, Stream published a Part 1 of this series. There, we covered how to build Slack-type screens for navigation, message lists, and channel lists. Slack designs have changed quite a lot since then, so we will build a Slack clone from scratch with updated designs and additional features.

We have decided to divide this tutorial into two parts (Part 2 and Part 3).

In Part 2 (this tutorial) and 3 of this series, we will focus on the following items:

Dev Environment Setup
Project Setup
Navigation
Channel List
Message List
Action Sheet
Reaction Picker

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). 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.

Resources 👇

Below are a few links to help you if you get stuck along the way:

Quick Test 🥽

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:

Step 1: Setup 🛠️

Dev Environment Setup

Before getting started, make sure you have a development environment setup for react-native. Read the Installing Dependencies section of the official react-native docs.

Project Setup

Once you have a dev environment setup, create a new react-native application:

We will be using the svg format for all the icons that you see across the app. And thus, we are using react-native-svg-transformer dependency. Follow the installation steps required for this dependency: https://github.com/kristerkari/react-native-svg-transformer#installation-and-configuration

Slack uses Lato font, which is available free on https://fonts.google.com/. For visual parity, we need to import the font into our app. To do so, create a file named react-native.config.js in the project directory and paste the following contents:

You can download Lato font files from the slack-clone project [repository](https://github.com/GetStream/slack-clone-react-native/masterand icons from [here](https://github.com/GetStream/slack-clone-react-native/tree/master

You can download the fonts from the Google Fonts website here. You will see a Download family button at the top.

Next, prepare the following directory structure in the root directory of the project:

Run the following command:

Also, change the content of index.js in the root directory to the following:

This completes the setup required for your slack-clone app. You should now be able to run the app with the following command to launch the app on an emulator. Once started, you will see a welcome screen to React Native.

Step 2: Components 🧬

Utilities

Here's how to add a few essential utilities into your app.

Create the following directories for storing svg icons:

src/images/svgs/channel
src/images/svgs/channel-list
src/images/svgs/message
src/images/svgs/profile
src/images/svgs/tab-bar

Next, download all the svg icons from GitHub.

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. Create a component in src/components/SVGIcon.js.

We will add support for dark mode, so we need to create separate themes for the app. We are using a theme provider from react-navigation for this project. You can check out the documentation to know more about themes and useTheme hook

Next, create a Text component with the Lato font-family, which will used across the app.

Copy the rest of the utils from here to src/utils/ directory. You can read through the code comments about it, but they will make more sense as we use them through this tutorial.

The utils/useStreamChatTheme.js file exports a hook, which provides a theme for Stream Chat components. If you are not aware of theming for chat components from stream-chat-react-native library, please check this link. We need these styles to change according to the system theme (dark-light), so we have built a hook around this theme object in src/utils/useStreamChatTheme.js.

Basic Navigation

Before we dive into the navigation part, lets first design the screen header and floating action button:

The ScreenHeader component is below. We are using the useSafeAreaInsets hook to avoid overlapping content with the top inset of a device such as the iPhone 11.

The floating action button, which opens the new message screen (which we will implement later), is as follows:

Let's move on to setting up the navigation for our app, similar to Slack. Replace App.js with the following. It's essential to place navigation components at the correct position in the stack.

We need screens such as a draft screen or thread screen outside of the bottom tab navigation, so they go at the root level. Screens such as channel searches are a perfect example of react-navigation modals.

If you refresh the app, you should see the following navigation. You can toggle the dark mode by pressing cmd + shift + a.

Channel List Screen

Now, set up the channel list screen. This is similar to how we did it in Part 1 of the tutorial, with few changes.

Let's outline the important specs that we need to implement:

Channels to be grouped by
Unread channels and unread conversations ( directMessagingConversations)
Channels
Direct Message (directMessagingConversations)

Channels in our case are defined by a conversation with a non-empty name. directMessagingConversations are defined by conversations without a name.

Unread channel labels are bold
In case of one-to-one conversation (a subgroup of directMessagingConversations), users have a presence indicator next to their name — green if they are online, otherwise hollow circles.

Add the following files to the project:

The useWatchedChannels hook makes two calls to the queryChannels API to:

Fetch all group channels (conversations with a name)
Fetch all direct messages (conversations without a name)

Once fetched, results are sorted into three variables:

unreadChannels
readChannels
directMessagingConversations

We can reuse the queried channel data in other screens; thus, we are caching it in CacheService. To keep things simple, use an object for caching. You can use redux or some other state management service for this purpose.

Reload the app, and you should see the ChannelList screen working in the app.

Channel Screen

Let's start by building the header for the channel screen.

Create a new component for channel header:

Now we can build a ChannelScreen component with the following functionality:

Renders a MessageList component, with customized UI component to be displayed for message bubble - MessageSlack (🔗)
Renders a MessageInput component, with customized UI component to be shown for input box - InputBox (🔗). Copy the updated copy of component InputBox to src/components directory.
When the user navigates away from ChannelScreen, we store the user object in AsyncStorage as well as the message last type into the input box. This is required for the DraftMessages screen. In our code sample, we created the AsyncStore utility, which is an interface between AsyncStorage and app-level code, to help avoid boilerplate code around stringifying and parsing of values.
When a user lands on the ChannelScreen, check if a draft message exists in AsyncStorage for the current channel. If yes, set that message as the initial value of the input box.

MessageSlack component is as follows:

If you have read Part 1 of this tutorial, then you will recognize most of the props on MessageSimple component. Copy updated code for these components to src/components directory:

The MessageFooter, ReactionPicker, and MessageActionSheet are the new elements introduced in this version of the Slack clone.

The MessageFooter component now provides a Slack type reaction selector (shown in the following screenshot). ReactionPicker is just another component, whose visibility is controlled by two handles — openReactionPicker and dismissReactionPicker. These two functions are available on MessageSimple and all its children as props.

Notice the react-native-haptics dependency add additional haptic feedback on touch on an iOS device.

The ActionSheet prop was introduced in stream-chat-react-native@2.0.0 on the MessageSimple component. In our case, we need to build a Slack type action sheet, which is quite different than what stream-chat-react-native provides out-of-the-box:

Code for MessageActionSheet looks like the following:

Now assign the ChannelScreen component to its respective HomeStack.Screen in App.js.

If you reload the app, you should see the ChannelScreen working correctly.

Congratulations! 👏

You've completed Part 2 of our tutorial on building a Slack clone using the Stream’s Chat API with React Native. In Part 3 of the tutorial, we cover various search screens on the Slack clone app and threads screen.

Happy coding!

Tutorial: How to Build a Slack Clone with React Native — Part 1

Vishal Narkhede — Fri, 24 Apr 2020 10:43:57 +0000

React Native has a significant footprint in the mobile development world. And with every new release, it gets better and better in terms of development speed and performance. Building a chat application used to be a massive chunk of work, but with the power of react-native and Stream Chat, it's possible to create a messaging app within minutes.

In this tutorial, we will build a clone of Slack, a messaging platform for workplaces. The Slack application comes with plenty of features. In this part of our tutorial, we will cover Slack’s following UI/UX features:

Channel list navigation
Input box
Message row
Reaction list
Giphy cards
Enriched URL previews

The result will look like the following:

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). Instead, this tutorial will serve as a go-to guide to help you understand how you can build real-life chat using UI components provided by Stream's Chat and Messaging API and SDKs.

If you feel lost during the tutorial, the following resources will be helpful:

Note If you want to send a message to the app, to check if the real-time feature is working or not, use this CodePen.

Resources 👇

Here are a few links to help you if you get stuck along the way:

Quick Test 🥽

If you would like to see the final state of the app in action quickly, please clone the following expo example of the slack clone and run it on the emulator or a phone:

Step 1: Setup 🛠️

Dev Environment Setup

Before getting started, please make sure you have a development environment setup for react-native. Please read the Installing Dependencies section of the official react-native docs.

Project Setup

Once you have a dev environment setup, create a new react-native application:

Slack uses a Lato font, which is freely available on https://fonts.google.com/. For visual parity, we need to import the font into our app. To do so, create a file named react-native.config.js in the project directory and paste the following contents:

You can download Lato font files from the slack-clone project repository and icons from here.

Alternatively, you can download the fonts from the Google Fonts website. You will see a button titled Download family at the top.

Next, prepare the following directory structure in the root directory of the project:

Please run the following command at this step:

With these steps in place, this completes the setup required for your slack-clone app. You should now be able to run the app with the following command to launch the app on an emulator. Once started, you will see a welcome screen to React Native.

Step 2: Components 🏗️

Basic Navigation Drawer

Let's first create a basic drawer navigation in our app. Replace the content of App.js with the following code:

After you’ve completed this, you should see the essential Slack-like drawer navigation if you check your emulator.

Channel List Navigation 🧭

Now let's create a channel list navigation and add it to the drawer that we just created. For the Slack navigation drawer, some essential UI elements that we will focus on are the following:

Channels are grouped by
- Unread channels
- Channels (read channels)
- Direct messages - this is perfect use case of SectionList in react-native
Unread channel labels are bold
Direct message users have a presence indicator next to their name - green if they are online, otherwise hollow circles.

Let's create a file named src/components/ChannelList.js. You can copy the contents of the following code snippet into your newly created file:

Additionally, replace the ChannelListDrawer component in App.js with the following:

If you are familiar with react-native, this piece of code should be pretty straightforward. We have added a SectionList component with three sections: unread, channels, direct messages. You should see the following in your app so far:

Now let's populate the SectionList with some channels. As I mentioned earlier in the tutorial, we are going to use Stream’s chat infrastructure.

Let's start by creating a Stream Chat client in App.js and passing it as a prop to the ChannelList component.

We have also added a prop function named changeChannel, which takes care of opening the channel screen and passing the provided channel ID to it. We will use this function as an onPress handler for the ChannelListItem.

Now let’s create a hook in ChannelList.js file, which takes care of querying channels. Later, we will update them in real-time when new messages arrive, or we move messages between groups.

If you are not familiar with React hooks, here are some great resources to get started:

This hook queries the channels using the Stream client. It sorts them into three categories, which are returned as state variables: unreadChannels, readChannels, oneOnOneConversations

The renderChannelListItem function currently returns <Text>{channel.id}</Text>, which displays the ID of the channel. Let's create a proper UI for this item that resembles Slack.

Create a new component in a separate file named src/components/ChannelListItem.js.

This component will ensure different styles based on whether it's a group channel or one-on-one conversation, or if it's an unread channel. It will also check whether or not it contains user mentions.

Now let's use our ChannelListItem component in the ChannelList component’s SectionList.

As you can note here, I have supplied isUnread: true to unread section data. This way, I can tell the renderChannelRow function if the current channel to render is unread or not.

It's not necessary since you can quickly get an unread count of the channel in renderChannelRow using channel.unreadCount() to decide if it's read or unread. But it's just a way to avoid extra calls to channel.countUnread(), which essentially loops through messages.

If you reload your app, you should see a few channels populated in the channels list, as shown in the screenshot below:

So far, ChannelList works fine, but you will notice that it's not real-time. If a message is sent on some channel by another user, it won’t reflect on your ChannelList. We need to implement event handlers in our useWatchedChannels hook for this purpose.

You can find detailed docs about Stream events here.

We are going to handle two events for tutorial purpose, but you can experiment with as many events as you want:

message.new - this event tells us that there is a new message on some channel (channel data is included in the event object). In this case, we want to move the channel from either readChannels or oneOnOneConversations to unreadChannels.
message.read - this event tells us that some channel (data available in event object) was marked as read. In this case, we want to move the channel from unreadChannels to either readChannels or oneOnOneConversations.

Replace the useWatchedChannels hook code with the following updated code:

We have added another useEffect hook here, which adds an event listener to our stream client and takes care of removing the listener when the component unmounts. The handleEvent is an event handler that will take some action based on which event is received.

As an exercise, you can try adding handlers for other events such as user.presence.changed, channel.updated or channel.deleted

Now try sending a message to some channel from this CodePen, (which uses the user Tommaso) and you should see the channel with a new message moving to the unread section.

Now the last thing we need to take care of is the onclick handler for ChannelListItem. When an item is selected, we need to update the channel in the ChannelScreen.

This concludes our ChannelList component. If you send a message to a channel in this list, you will see the event handler doing its job of updating the list UI accordingly.

Channel Screen 📱

Let’s start by building the following channel header shown below:

Create a new file for header - src/components/ChannelHeader.js:

With this, we have added a hamburger icon on the left side of the screen, which, when clicked, will open the navigation drawer.

We are still yet to put this ChannelHeader in our ChannelScreen component.

Update the ChannelScreen component in App.js with the following:

If you reload your app, you should see an empty channel screen with the header on top:

Now let's move onto adding MessageList and MessageInput components to our ChannelScreen.

These two components are provided by Stream as part of the react-native-sdk.

Please update the ChannelScreen component with the following:

After this change, you will see messages and an input box at the bottom of our Channel Screen.

But it doesn’t quite look like Slack messages. So now we need to make changes to make it look like Slack. Here is the list of things in Slack UI that separates it from our current UI in the app.

The user name is shown at the top of the message
Avatars (circular user profile pics next to message) should be square
Reactions should be at the bottom of the message
Reaction counts should be shown next to each reaction
URL preview should have a thick left grey border and its content alignment offset
All the messages should be displayed on the left side of the screen
GIFs are shown differently in slack channels
Date separator between messages should be shown above a grey line
Send and attach buttons should be below the input box.

We will tackle these things one by one. Stream’s react-native SDK uses MessageSimple as the default message component. But you can also use a custom UI component as a message – reference here.

First, let’s add some basic custom theme styles. Let's create a custom message component (named MessageSlack) which internally uses MessageSimple with modifications. The MessageSimple component offers plenty of customizations. We will create our custom components for the following props, which are supported by the MessageSimple component.

Note: Please check the cookbook for more examples)

MessageAvatar
MessageFooter (which contains reactions)
MessageHeader (which contains the sender's username)
MessageText
UrlPreview (used to display enriched URL preview)
Giphy (used to show Giphy cards)

Let's create each of these components:

src/components/MessageSlack.js

src/components/MessageFooter.js

src/components/MessageHeader.js

src/components/MessageText.js

src/components/MessageAvatar.js

src/components/UrlPreview.js

src/components/Giphy.js

We also need a custom DateSeparator component. The default that is used by Stream shows the date in the middle of a spacer/line. However, in the Slack UI, it is shown on top in a grey spacer/line.

src/components/DateSeparator.js

Now, after this, all you need to do is pass MessageSlack and DateSeparator to the MessageList component in App.js.

If you refresh the app, you will see the UI now has much better parity with the slack UI.

We still need to add some final finishing touches, such as the square avatar. The avatar should be aligned with the top of the message, and messages should not have borders, so we'll need to make some small alignment tweaks as well.

We will take care of them by theming the chat component. Please read the Custom Styles section of Stream’s react-native chat tutorial.

Create a file named src/stream-chat-theme.js:

Now pass this theme to the Chat component in the ChannelScreen within App.js, as shown below:

And that's it! You should see beautiful Slack-like messages on the screen. 😺

Input Box 👨‍💻

Now let's move on to the input box at the bottom. The MessageInput component (from Stream) accepts Input as a custom UI component prop to be shown for the input box. Let's create this custom component in src/components/InputBox.js.

The following components that we have used in the InputBox are provided by Stream’s react-native SDK, which takes care of plenty of things for us:

AutoCompleteInput - takes care of all input box features such as mentions, sending messages, maintaining enabled/disabled state, etc.
SendButton
AttachButton

All we have done is shuffle around the internal components of the MessageInput.

It is important to note here that you must pass the entire prop object to AutoCompleteInput, SendButton, and AttachButton. Hence, all the handlers present in MessageInput are accessible to these components.

Now pass this InputBox component to MessageInput in the ChannelScreen component of App.js.

The final version of the ChannelScreen component is as follows:

Note: the extra prop to MessageInput component - additionalTextInputProps. That is to modify the placeholder of the input box.

Congratulations! 👏

This concludes part one of our tutorial on building a Slack clone using Stream’s React Native Chat Components. I hope you found this tutorial useful, and I look forward to hearing your feedback.

In the next part of the tutorial – which will be published later – we will cover additional UI components and their functionality, such as:

Threads
Channel search
Action sheets
Unread message notifications
And more!

Happy coding!

Forem: Vishal Narkhede

React Native: How To Build Bidirectional Infinite Scroll

👋 Introduction

🔌 Usage

🔮 Quick Preview

​

Let's Dive Deep

📚 What and How

Support for onStartReached

Race condition between onStartReached and onEndReached

onStartReachedThreshold and onEndReachedThreshold

Smooth scrolling experience

🖥 Tutorial: Chat UI With Bidirectional Infinite Scroll

Setup

Create message list

Add Infinite Scroll

Send Message

🎉 Congratulations!! Whats more?!

maintainVisibleContentPosition prop for Android react-native

Installation

Usage

Tutorial: How to Build a Slack Clone with React Native — Part 3

Resources 👇

Thread Screen

Search Screens

Jump to Channel Screen & Channel Search Screen

Direct Messaging Avatar

Modal Screen Header

New Message Screen

Message Search Screen

Congratulations! 👏

Tutorial: How to Build a Slack Clone with React Native — Part 2

Resources 👇

Quick Test 🥽

Step 1: Setup 🛠️

Dev Environment Setup

Project Setup

Step 2: Components 🧬

Utilities

Basic Navigation

Channel List Screen

Channel Screen

Congratulations! 👏

Tutorial: How to Build a Slack Clone with React Native — Part 1

Resources 👇

Quick Test 🥽

Step 1: Setup 🛠️

Dev Environment Setup

Project Setup

Step 2: Components 🏗️

Basic Navigation Drawer

Channel List Navigation 🧭

Channel Screen 📱

Input Box 👨‍💻

Congratulations! 👏

Support for `onStartReached`

Race condition between `onStartReached` and `onEndReached`

`onStartReachedThreshold` and `onEndReachedThreshold`