v5.0.0-beta.0

What's Changed

• feat: offline support by @vishalnarkhede in #1527
• feat: improve performance in message-list by reducing api calls using the improved 2-way pagination api [CRNS-462] by @santhoshvai in #1239
• fix: android 11 compatibility by replacing @react-native-community/cameraroll with @stream-io/react-native-cameraroll dependency @santhoshvai

Upgrade Helper

Please refer to Upgrade Helper doc to upgrade to latest beta version and to enable offline support.

Update Camera Roll dependency

Replace the @react-native-community/cameraroll with @stream-io/react-native-cameraroll. We had to roll out our fork as @react-native-community/cameraroll is no longer accepting pull requests for important fixes like Android 11 compatibility.

# Remove existing cameraroll dependency
yarn remove @react-native-community/cameraroll

# Add stream-io's fork for cameraroll dependency.
yarn add @stream-io/react-native-cameraroll

Enable Offline Support

Offline Support is a major opt-in feature introduced in v5 of SDK.

Offline support is currently not implemented for Expo package (stream-chat-expo).

Offline storage implementation currently offers following features:

• access to chat when internet is disabled
• faster loading of chat since chat gets loaded from offline storage first before loading data from network
• syncing of database using websocket events and sync api.

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

• optimistically update offline database during chat interactions such as send message, add reactions etc.
• access to threads in offline mode
• offline caching of attachment images and user images

To enable offline support please follow the given steps:

• Upgrade stream-chat dependency (optional)

  If you have installed stream-chat dependency explicitely on your application, then upgrade it to v7

  yarn add [email protected]

• Add react-native-quick-sqlite dependency

  yarn add [email protected]
  npx pod-install

• Ensure unique instance of Chat component

  Until v4, you could provide separate Chat component for each usage of Channel component or ChannelList component.
  But from v5, it is necessary that you provide only one instance of Chat component within your application.
  This component needs to be a parent for all the chat related components such as ChannelList, Channel or Thread.

• Do not wait for connectUser call to succeed

  It is important that you call connectUser method on 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 or slow or no network, 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.
      };
  
      startChat();
    }, []);
  
    if (!isClientReady) return null; // or some loading indicator;
  
    return (
      <Chat client={chatClient} enableOfflineSupport>
        ...
      </Chat>
    );
  };

• Add enableOfflineSupport prop on Chat component

  import { Chat } from 'stream-chat-react-native';
  
  <Chat client={chatClient} enableOfflineSupport>
    ...
  </Chat>;

• Reset the database when signing out the user

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

  import { QuickSqliteClient } from 'stream-chat-react-native';
  
  // Sign out logic
  QuickSqliteClient.resetDB();
  chatClient.disconnectUser();

Full Changelog: v4.12.1...v5.0.0-beta.0