Skip to main content
Version: v5

Offline Support

React Native Chat SDK provides OOTB support for offline mode, which means user will be able to access and interact with chat even when the network is off. This is an opt-in feature that needs to be explicitly enabled on application level.

Integration with Expo is possible using the expo-dev-client library. Offline support cannot be used in the "Expo Go" app, because it requires custom native code.


The offline storage implementation currently offers the following features:

  • Access to chat when Internet connection is disabled or low.
  • Faster startup times and loading, since initial data is loaded from offline storage before performing any network requests.
  • Syncing of the offline database using WebSocket events and Sync API.
  • Optimistically update offline database during chat interactions, such as send message, add reaction, etc.

The following features are currently NOT implemented. They will be implemented gradually as part of minor releases in v5.

  • Access to threads in offline mode.

How To Enable Offline Support

First and foremost make sure to follow all steps from Migrating to v5 guide. To enable offline support, please follow the given steps:

  1. Remove stream-chat dependency (when applicable)

If you have installed stream-chat dependency explicitly on your application, then please make sure you remove it. Our Chat SDK (stream-chat-react-native) has stream-chat as a dependency (not peer dependency). Therefore, having stream-chat in your app's package.json is discouraged and will probably cause random issues that will disturb the chat functionalities.

yarn remove stream-chat
  1. Add react-native-quick-sqlite dependency

Contemplate our dependency version compatibility table to make sure your react-native-quick-sqlite version is compatible with your stream-chat-react-native version.

  yarn add react-native-quick-sqlite
npx pod-install
  1. Do not wait for connectUser call to succeed

It is important that you call the connectUser method on the chat client, before you render Chat components. But you don't need to wait for connectUser to succeed before rendering Chat components. This is to ensure:

  • Chat components have access to current user information, which is important to store/access offline data.

  • In case of slow or no network access, Chat components will still load the chat data without waiting for connectUser to succeed.

    const chatClient = StreamChat.getInstance('API_KEY');
    const App = () => {
    const [isClientReady, setIsClientReady] = useState(false);

    useEffect(() => {
    const startChat = async () => {
    const connectPromise = chatClient.connectUser(user, tokenOrTokenProvider);
    setIsClientReady(true); // this allows components to render
    await connectPromise();
    // Any other post-connectUser logic you may have goes here.

    }, []);

    if (!isClientReady) return null; // or some loading indicator;

    return (
    <Chat client={chatClient} enableOfflineSupport>
  1. Add enableOfflineSupport prop on Chat component
import { Chat } from 'stream-chat-react-native';

<Chat client={chatClient} enableOfflineSupport>
  1. Reset the database when signing out the user

Since the SDK doesn't handle app-level authentication logic, it's the application's responsibility to ensure the database is reset when a user gets logged out. This should generally be done before you call client.disconnectUser().

import { QuickSqliteClient } from 'stream-chat-react-native';

// Sign out logic

How To Cache Images

Available since version 5.3.0

Our SDK relies on the default caching provided by React Native (avatars, image attachments, URL preview, etc.). This default solution is far from perfect, and you might see a lot of images missing while operating the app in offline mode. We provide a convenient solution to replace all the underlying usage of the Image component using the ImageComponent prop on the Chat component. Use the ImageComponent prop to provide a custom component that handles caching and has the same API as react-native's Image component.

There are plenty of libraries available for this purpose:

NOTE: Due to technical limitations, viewing images in full screen (image viewer) in offline mode is not currently supported.

The following example demonstrates the usage of react-native-fast-image library to handle the caching of images in chat:

import FastImage from 'react-native-fast-image';



Did you find this page helpful?