@@ -30,101 +30,14 @@ Following values in [`ImageGalleryContext`](https://getstream.io/chat/docs/sdk/r
3030 yarn add @react-native-camera-roll/camera-roll
3131 ```
3232
33- ## Enable Offline Support
33+ ## Offline Support
3434
3535Offline Support is a major opt-in feature introduced in v5 of SDK.
3636
37- > Offline support is currently not implemented for Expo package (stream-chat-expo).
38-
39- Offline storage implementation currently offers following features:
37+ This feature allows users to:
4038
4139- access to chat when internet is disabled
4240- faster loading of chat since chat gets loaded from offline storage first before loading data from network
4341- syncing of database using websocket events and sync api.
4442
45- Following features are currently ** NOT** implemented. They will be implemented gradually as part of minor releases in v5.
46-
47- - optimistically update offline database during chat interactions such as send message, add reactions etc.
48- - access to threads in offline mode
49- - offline caching of attachment images and user images
50-
51- To enable offline support please follow the given steps:
52-
53- - ** Upgrade stream-chat dependency (optional)**
54-
55- If you have installed ` stream-chat ` dependency explicitly on your application, then upgrade it to v7
56-
57- ``` bash
58- 59- ```
60-
61- - ** Add ` react-native-quick-sqlite ` dependency**
62-
63- ``` bash
64- yarn add react-native-quick-sqlite
65- npx pod-install
66- ```
67-
68- - ** Ensure unique instance of Chat component**
69-
70- Until v4, you could provide separate ` Chat ` component for each usage of ` Channel ` component or ` ChannelList ` component.
71- But from v5, it is necessary that you provide only one instance of ` Chat ` component within your application.
72- This component needs to be a parent for all the chat related components such as ` ChannelList ` , ` Channel ` or ` Thread ` .
73-
74- - ** Do not wait for ` connectUser ` call to succeed**
75-
76- It is important that you call ` connectUser ` method on chat client, before you render Chat components.
77- But you don't need to wait for ` connectUser ` to succeed before rendering Chat components. This is to ensure:
78-
79- - Chat components have access to current user information, which is important to store/access offline data.
80- - In case of slow or no network, Chat components will still load the chat data without waiting for connectUser to succeed.
81-
82- ``` tsx {7,8,16}
83- const chatClient = StreamChat .getInstance (' API_KEY' );
84- const App = () => {
85- const [isClientReady, setIsClientReady] = useState (false );
86-
87- useEffect (() => {
88- const startChat = async () => {
89- const connectPromise = chatClient .connectUser (user , tokenOrTokenProvider );
90- setIsClientReady (true ); // this allows components to render
91- await connectPromise ();
92- // Any other post-connectUser logic you may have goes here.
93- };
94-
95- startChat ();
96- }, []);
97-
98- if (! isClientReady ) return null ; // or some loading indicator;
99-
100- return (
101- <Chat client = { chatClient } enableOfflineSupport >
102- ...
103- </Chat >
104- );
105- };
106- ```
107-
108- - ** Add ` enableOfflineSupport ` prop on Chat component**
109-
110- ``` tsx
111- import { Chat } from ' stream-chat-react-native' ;
112-
113- <Chat client = { chatClient } enableOfflineSupport >
114- ...
115- </Chat >;
116- ```
117-
118- - ** Reset the database when signing out the user**
119-
120- Since SDK doesn't handle the app level authentication logic, its application's responsibility
121- to ensure resetting database when user gets logged out. This should be generally done before you
122- call ` client.disconnectUser() `
123-
124- ``` jsx
125- import { QuickSqliteClient } from ' stream-chat-react-native' ;
126-
127- // Sign out logic
128- QuickSqliteClient .resetDB ();
129- chatClient .disconnectUser ();
130- ```
43+ To enable offline support please check the [ Offline Support] ( ./offline_support.mdx ) guide.
0 commit comments