diff --git a/docusaurus/reactnative-docusaurus-dontent-docs.plugin.js b/docusaurus/reactnative-docusaurus-dontent-docs.plugin.js index 024979badf..068d07b14f 100644 --- a/docusaurus/reactnative-docusaurus-dontent-docs.plugin.js +++ b/docusaurus/reactnative-docusaurus-dontent-docs.plugin.js @@ -3,23 +3,27 @@ module.exports = { [ '@docusaurus/plugin-content-docs', { - lastVersion: 'current', + lastVersion: '5.x.x', versions: { current: { + label: 'v6', + path: 'v6', + }, + '5.x.x': { label: 'v5', }, '4.x.x': { label: 'v4', path: 'v4', - banner: 'unmaintained' + banner: 'unmaintained', }, '3.x.x': { label: 'v3', path: 'v3', - banner: 'unmaintained' - } - } - } - ] - ] -} + banner: 'unmaintained', + }, + }, + }, + ], + ], +}; diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/libraries.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/libraries.mdx new file mode 100644 index 0000000000..9b111349be --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/libraries.mdx @@ -0,0 +1,34 @@ +--- +id: libraries +sidebar_position: 2 +title: Libraries +--- + +### [React Navigation Docs](https://reactnavigation.org/docs/getting-started/) + +Our tutorials, guides and sample apps are all using React Navigation. We recommend using it in +order to provide better support for all the use cases displayed. + +### [Gesture Handler Docs](https://docs.swmansion.com/react-native-gesture-handler/docs/) + +React Native Gesture Handler is used inside of our SDK on our channels and messages lists. Also used +on our gallery, chat buttons, and reactions overlay. + +### [Markdown Lib Docs](https://github.com/andangrd/react-native-markdown-package) + +React Native Markdown Package is used to render markdown on our messages. + +### [Reanimated Lib Docs](https://docs.swmansion.com/react-native-reanimated/docs) + +React Native Reanimated is used to create our own beautiful custom animations in our gallery, attachment picker, +message actions/reactions and loading indicators/skeletons. + +### [Day.js Docs](https://day.js.org/docs/en/installation/installation) + +We are using Day.js to manipulate, customize, parse and display dates through the app. +You may want to use it when creating you own custom components. + +### [React Native SVG](https://github.com/react-native-svg/react-native-svg) + +React Native SVG is one of our peer dependencies. We use it to render icons and a couple of small indicators +through the app. diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/stream.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/stream.mdx new file mode 100644 index 0000000000..0c95c0db5d --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/stream.mdx @@ -0,0 +1,44 @@ +--- +id: stream-additional-resources +sidebar_position: 1 +title: Stream Additional Resources +--- + +### [Demos](https://github.com/GetStream/react-native-samples) + +Stream Chat for React Native has multiple examples in the repository. +In addition we have "cloned" some popular UIs to help demonstrate the flexibility of the SDK. + +### [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript) + +Stream Chat for React Native uses the Stream Chat JS client under the hood for most interactions with the backend. +The client documentation covers a wide range of interactions that can be performed, not all of these are used within +the Stream Chat for React Native SDK but can be integrated within your own app as required. + +### [API Tutorial](https://getstream.io/chat/get_started/) + +To help you get acquainted with the Stream Chat JS client we have an easy to follow tutorial on our website. +This is a great primer for using the client directly and can also help you understand how the Stream Chat for +React Native SDK if functioning under the hood. + +### [Stream Chat JS Basic Guide](https://github.com/GetStream/javascript-beginner-guide) + +> ### Internal Articles + +- [Stream Chat Glossary](https://getstream.zendesk.com/hc/en-us/articles/1500007212082-Stream-Chat-Glossary) + +- [Stream Chat Success Checklist](https://getstream.zendesk.com/hc/en-us/articles/1500007673721-Stream-Chat-Success-Checklist) + +- [React - Customizing Message Actions](https://getstream.zendesk.com/hc/en-us/articles/1500008025241--Customizing-Message-Actions-in-React-Chat) + +- [Stream Webhooks](https://getstream.zendesk.com/hc/en-us/articles/1500006478421-How-can-I-use-the-Stream-Webhook-to-send-customers-emails-based-on-Chat-events-) + +- [Stream Rate limits](https://getstream.zendesk.com/hc/en-us/articles/360056792833-Rate-limits-and-HTTP-429-Errors) + +- [Stream API → Client → Server](https://getstream.zendesk.com/hc/en-us/articles/360061669873-How-do-the-Chat-Client-Server-Stream-API-communicate-with-each-other-) + +- [Stream Chat Moderation](https://getstream.zendesk.com/hc/en-us/articles/360041455753) + +- [Stream User Roles and Permissions](https://getstream.zendesk.com/hc/en-us/articles/360053064274-User-Roles-and-Permission-Policies-Chat) + +- [Stream `queryChannels` filters](https://getstream.zendesk.com/hc/en-us/articles/360057461213-Filters-for-queryChannels-Chat) diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/technologies_and_techniques.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/technologies_and_techniques.mdx new file mode 100644 index 0000000000..d5262bcf21 --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/additional-resources/technologies_and_techniques.mdx @@ -0,0 +1,21 @@ +--- +id: technologies-and-techniques +sidebar_position: 3 +title: Technologies & Techniques +--- + +### [Typescript Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html) + +Our SDK is written in Typescript and heavily uses generics in order to allow users to use custom data and +still have decent typing support. + +### [React Context](https://reactjs.org/docs/context.html) + +We rely on multiple contexts in our SDK to access components, functions, and data. +Context also allows you as a developer to override our defaults for many of these throughout the SDK. +Understanding how to draw upon values in context is important to customizing the SDK for your own needs. + +### [React Hooks](https://reactjs.org/docs/hooks-intro.html) + +We use/expose a bunch of our component's hooks so users can use them in order to replicate some behaviour/data +parsing when creating custom components. Understanding how to work with hooks can come in very handy. diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/channel_list.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/channel_list.png new file mode 100644 index 0000000000..48f357ee70 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/channel_list.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/message_input.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/message_input.png new file mode 100644 index 0000000000..6abb430200 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/message_input.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/message_list.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/message_list.png new file mode 100644 index 0000000000..bf1468aeb0 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/message_list.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/summary.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/summary.png new file mode 100644 index 0000000000..787c36a5ad Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/summary.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/thread.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/thread.png new file mode 100644 index 0000000000..a9ba6b8ae4 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/hello-stream-chat/thread.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_1.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_1.png new file mode 100644 index 0000000000..44917f352e Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_1.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_2.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_2.png new file mode 100644 index 0000000000..a85680b3e9 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_2.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_3.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_3.png new file mode 100644 index 0000000000..4cef17ecbe Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_after_3.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_1.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_1.png new file mode 100644 index 0000000000..da0a3f7030 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_1.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_2.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_2.png new file mode 100644 index 0000000000..2d8b3ad4d0 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_2.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_3.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_3.png new file mode 100644 index 0000000000..65fca944e2 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/gallery_before_3.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/pin_message_action.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/pin_message_action.png new file mode 100644 index 0000000000..bd2432a79b Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/pin_message_action.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/pinned_message.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/pinned_message.png new file mode 100644 index 0000000000..bb80f51969 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/pinned_message.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/scroll_view_warning.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/scroll_view_warning.png new file mode 100644 index 0000000000..3343d98c8f Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/scroll_view_warning.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/slow_mode.gif b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/slow_mode.gif new file mode 100644 index 0000000000..44bb7759a4 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/basics/upgrading-from-v3/slow_mode.gif differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/date_header.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/date_header.png new file mode 100644 index 0000000000..c0c96f8f6a Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/date_header.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/name_date_header.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/name_date_header.png new file mode 100644 index 0000000000..698cefdec6 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/name_date_header.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/new_date_header.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/new_date_header.png new file mode 100644 index 0000000000..23c892550d Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/new_date_header.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/no_date_header.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/no_date_header.png new file mode 100644 index 0000000000..c1d2655d55 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/custom-components/no_date_header.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/typescript/explicit_types.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/typescript/explicit_types.png new file mode 100644 index 0000000000..86cddca96f Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/typescript/explicit_types.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/typescript/inference.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/typescript/inference.png new file mode 100644 index 0000000000..0e39545284 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/customization/typescript/inference.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-attachment-upload-preview.jpg b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-attachment-upload-preview.jpg new file mode 100644 index 0000000000..e413b986d2 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-attachment-upload-preview.jpg differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-attachment.jpg b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-attachment.jpg new file mode 100644 index 0000000000..241a7f67e3 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-attachment.jpg differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recorder-lock-button.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recorder-lock-button.png new file mode 100644 index 0000000000..b25bb6ee9b Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recorder-lock-button.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recording-in-progress.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recording-in-progress.png new file mode 100644 index 0000000000..74b0528128 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recording-in-progress.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recording-preview.jpg b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recording-preview.jpg new file mode 100644 index 0000000000..8cdcbf458a Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/audio-recording-preview.jpg differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/start-recording.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/start-recording.png new file mode 100644 index 0000000000..d0889fde51 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/audio-support/start-recording.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/blocking-users/blocked-users-list.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/blocking-users/blocked-users-list.png new file mode 100644 index 0000000000..e58a48d243 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/blocking-users/blocked-users-list.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-channel-list/load_more_button.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-channel-list/load_more_button.png new file mode 100644 index 0000000000..38b1c04a05 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-channel-list/load_more_button.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-actions/message_actions.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-actions/message_actions.png new file mode 100644 index 0000000000..5629323e2c Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-actions/message_actions.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-actions/my_message_actions.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-actions/my_message_actions.png new file mode 100644 index 0000000000..b45cb0d218 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-actions/my_message_actions.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-input/native_attachment_picker_step_1.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-input/native_attachment_picker_step_1.png new file mode 100644 index 0000000000..02737531f0 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-input/native_attachment_picker_step_1.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-input/native_attachment_picker_step_2.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-input/native_attachment_picker_step_2.png new file mode 100644 index 0000000000..977c1cb408 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-message-input/native_attachment_picker_step_2.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-1.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-1.png new file mode 100644 index 0000000000..3b1f5b5271 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-1.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-2.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-2.png new file mode 100644 index 0000000000..5ab05ebf3e Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-2.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-3.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-3.png new file mode 100644 index 0000000000..0b8f992959 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-3.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-4.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-4.png new file mode 100644 index 0000000000..1c1607ad86 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/custom-thread-list/custom-thread-list-step-4.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/debug-using-flipper-plugin/flipper_desktop_guide.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/debug-using-flipper-plugin/flipper_desktop_guide.png new file mode 100644 index 0000000000..ee4ae95631 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/debug-using-flipper-plugin/flipper_desktop_guide.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/debug-using-flipper-plugin/flipper_stream_chat_react_native_banner.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/debug-using-flipper-plugin/flipper_stream_chat_react_native_banner.png new file mode 100644 index 0000000000..76193de190 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/debug-using-flipper-plugin/flipper_stream_chat_react_native_banner.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/deeplinking/xcode-info-url-types.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/deeplinking/xcode-info-url-types.png new file mode 100644 index 0000000000..2f0ad2e275 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/deeplinking/xcode-info-url-types.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/deeplinking/xcode-signing-capabilitites.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/deeplinking/xcode-signing-capabilitites.png new file mode 100644 index 0000000000..2dd6c0bf85 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/deeplinking/xcode-signing-capabilitites.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/live-location-sharing/chat-screen.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/live-location-sharing/chat-screen.png new file mode 100644 index 0000000000..7448b91fde Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/live-location-sharing/chat-screen.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/live-location-sharing/detail-screen.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/live-location-sharing/detail-screen.png new file mode 100644 index 0000000000..b4fe186670 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/live-location-sharing/detail-screen.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/bounced-message-action.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/bounced-message-action.png new file mode 100644 index 0000000000..c33d3f1e1b Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/bounced-message-action.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/bounced-message.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/bounced-message.png new file mode 100644 index 0000000000..cf80581799 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/bounced-message.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/moderation-dashboard.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/moderation-dashboard.png new file mode 100644 index 0000000000..e522547097 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/moderation/moderation-dashboard.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/native-image-picker/options.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/native-image-picker/options.png new file mode 100644 index 0000000000..4ffb6726ad Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/native-image-picker/options.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/performance/channel_settings.jpeg b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/performance/channel_settings.jpeg new file mode 100644 index 0000000000..8dd27ccf42 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/performance/channel_settings.jpeg differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/push-notifications/v2/chat_overview_page.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/push-notifications/v2/chat_overview_page.png new file mode 100644 index 0000000000..9e92437dbf Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/push-notifications/v2/chat_overview_page.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/push-notifications/v2/firebase_notifications_toggle.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/push-notifications/v2/firebase_notifications_toggle.png new file mode 100644 index 0000000000..c5670d0dc2 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/guides/push-notifications/v2/firebase_notifications_toggle.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/loading_indicator.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/loading_indicator.png new file mode 100644 index 0000000000..3e7a36fd34 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/loading_indicator.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/visual_guide_1.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/visual_guide_1.png new file mode 100644 index 0000000000..1a04d87bcb Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/visual_guide_1.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/visual_guide_2.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/visual_guide_2.png new file mode 100644 index 0000000000..f24e82df4b Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel-list/visual_guide_2.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_1.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_1.png new file mode 100644 index 0000000000..6ad712098e Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_1.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_2.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_2.png new file mode 100644 index 0000000000..0dc993276c Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_2.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_3.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_3.png new file mode 100644 index 0000000000..5ad7dbca4d Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_3.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_4.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_4.png new file mode 100644 index 0000000000..8e75fa494b Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel/visual_guide_4.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel_preview_messenger.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel_preview_messenger.png new file mode 100644 index 0000000000..8b65929b46 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel_preview_messenger.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel_preview_messenger_2.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel_preview_messenger_2.png new file mode 100644 index 0000000000..4788875bbb Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/channel_preview_messenger_2.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_1.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_1.png new file mode 100644 index 0000000000..4e34222f36 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_1.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_2.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_2.png new file mode 100644 index 0000000000..18e38a95e0 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_2.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_3.png b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_3.png new file mode 100644 index 0000000000..a38272ef27 Binary files /dev/null and b/docusaurus/reactnative_versioned_docs/version-5.x.x/assets/ui-components/overlay-provider/visual_guide_3.png differ diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/client.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/client.mdx new file mode 100644 index 0000000000..68bc6254f7 --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/client.mdx @@ -0,0 +1,222 @@ +--- +id: client +sidebar_position: 5 +title: Client +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Stream Chat for React Native uses the [Stream Chat client](https://github.com/GetStream/stream-chat-js) to connect to and communicate with the Stream API. + +The full [JavaScript client docs](https://getstream.io/chat/docs/javascript/?language=javascript) should be referenced for detailed information on directly using the client. + +## Setup + +To interact with the Stream Chat API you must create a client instance and connect to the API, usually as an authenticated user. + +### Instantiation + +The Stream Chat client, `StreamChat` is a dependency of `stream-chat-react-native` and can be imported from `stream-chat`. +To create a client instance you can call `getInstance` on the client and provide and API key. + +```ts +import { StreamChat } from 'stream-chat'; + +const client = StreamChat.getInstance('api_key'); +``` + +:::caution + +**Usage of `StreamChat.getInstance()` available since stream-chat@2.12.0.** + +
+This new Singleton pattern allows you to instantiate a unique StreamChat client, i.e create a StreamChat instance and +retrieve it wherever you need it on your app to perform API calls. After calling it once, any following + getInstance + call will return the initial StreamChat instance. This will prevent you from accidentally creating multiple +StreamChat instances, opening multiple WebSockets, and driving up your concurrent connections unnecessarily. +
+
+ +Stream Chat is backward compatible. Users can continue using new StreamChat() if desired. + +
+ +```ts +const client = new StreamChat('api_key'); +``` + +Calling new StreamChat() repeatedly will create new copies of the client and in turn new WebSocket connections when connectUser is called. +If you are using new StreamChat() you need to be vigilant about your use to ensure you are not creating multiple WebSocket connections unnecessarily. + +::: + +### Connecting a User + +To connect a user a the `connectUser` function should be called and provided with the user object and `user_token`. +The `user_token` is typically sent from your back end when a user is authenticated. + +```ts +await client.connectUser( + { + id: 'testUser', + name: 'Test User', + }, + 'user_token', +); +``` + +It is recommended to not repeatedly call `connectUser` unnecessarily, multiple calls to `connectUser` will result in warnings, and attempting to call `connectUser` before disconnecting a current user will throw an Error. + +## UI Components + +The Stream Chat for React Native UI components handle most interactions with the client for you after connecting with an authenticated user. + +### Providing the Client to the UI + +To provide the client to the UI components you simply provide the client instance as the prop `client` to the `Chat` component. + +```tsx +import { StreamChat } from 'stream-chat'; +import { Chat } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const Screen = () => {/** App components */}; +``` + +The Stream Chat for React Native UI components then handle interacting with the client internally by accessing the client via [`context`](https://reactjs.org/docs/context.html). + +:::note + +If you are customizing certain components or functionality you may have to interact with the client as well. +You can access the client provided to the `Chat` component internally via the `useChatContext`. + +
+ +```ts +import { useChatContext } from 'stream-chat-react-native'; + +const { client } = useChatContext(); +``` + +::: + +### Using UI Functions + +The UI provides a number of functions that interact with the client while keeping the UI state in sync using `context`. +The [contexts section](../contexts/attachment-picker-context.mdx) details what functions are accessible. +When customizing your application you should ensure you are utilizing the correct functions to keep the UI state up to date. + +The `sendMessage` function for instance, provided by `useMessageInputContext`, is not the same as the `sendMessage` function found directly on a `channel` in the client. +Therefore calling `channel.sendMessage(messageData)` will not result in a message optimistically showing in the UI, or a failed send state, instead the message will not show until it is returned by the server. + +:::caution + +You should not assume any function directly called on the client will result in a UI update. +The UI state is managed internally by the components and `context`, most client interactions require an event returned by the server to update the UI. + +::: + +## Accessing the Client Instance + +There are multiple ways to access the client instance throughout your application. +[As mentioned](#providing-the-client-to-the-ui) you can access the `client` via `useChatContext` when inside the `Chat` component. +This works well if you can wrap your entire application in a single `Chat` component and have the `StreamChat` instance provided throughout your app via the internal `context`. +But if you have multiple screens that contain `Chat` components where a client instance is necessary you will need to access the shared instance in other ways. + +You can store the client in a [`context`](https://reactjs.org/docs/context.html) you create yourself. +Create your own custom class that provides it. +Or using the Singleton structure you can call `getInstance` when required to always be returned the current instance if one exists, or create a new one otherwise. + +:::warning + +Do not create and connect multiple instances using `new StreamChat()`, this will result in multiple `StreamChat` instances and opening multiple WebSocket connections. + +::: + +## Direct Interaction + +There may be some direct interaction with the client that is required for your application. +Referring to the [full documentation](https://getstream.io/chat/docs/javascript/?language=javascript) is suggested for detailed information on client functionality. +Common interactions with the client used in conjunction with the Stream Chat for React Native components have been included for convenience. + +### Creating a Channel + +A channel must be initialized with either an `id` or a list of members for the channel. +If you provide a list of members an `id` will be auto-generated on backend for the channel. + +:::note + +You can't add or remove members from channel created using a list of members. + +::: + + + + +```ts +/** + * Channel created using a channel id + */ +const channel = client.channel(channel_type, 'channel_id', { + name: 'My New Channel', +}); +``` + + + + +```ts +/** + * Channel created using a members list + */ +const channel = client.channel(channel_type, { + members: ['userOne', 'userTwo'] + name: 'My New Channel', +}); +``` + + + + +To create a channel on the server you must call `create` or `watch` on a new channel instance. +`create` will create the channel while `watch` will both create the channel and subscribe the client to updates on the channel. + + + + +```ts +await channel.watch(); +``` + + + + +```ts +await channel.create(); +``` + + + + +### Disconnecting a User + +To disconnect a user you can call `disconnect` on the client. + +```ts +await client.disconnectUser(); +``` diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/hello_stream_chat.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/hello_stream_chat.mdx new file mode 100644 index 0000000000..59b53c2601 --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/hello_stream_chat.mdx @@ -0,0 +1,548 @@ +--- +id: hello_stream_chat +sidebar_position: 2 +title: Hello Stream Chat +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import channelList from '../assets/basics/hello-stream-chat/channel_list.png'; +import messageInput from '../assets/basics/hello-stream-chat/message_input.png'; +import messageList from '../assets/basics/hello-stream-chat/message_list.png'; +import summary from '../assets/basics/hello-stream-chat/summary.png'; +import thread from '../assets/basics/hello-stream-chat/thread.png'; + +Adding feature rich chat to a React Native application can be quite challenging when starting from scratch. +There are many considerations, states, and edge cases that need accounting for, styling, message grouping, read states, context menus, etc. all add to the complexity of the challenge. +Stream Chat for React Native provides an easy to implement flexible solution. + +Stream Chat for React Native provides a way to add chat to an existing or new application with very little code. +The library was built with flexibility and customization in mind, starting with the out of the box form and function one would expect from a chat app you can modify the UI and UX as desired. + +Before starting make sure you have installed `stream-chat-react-native` as directed in the [getting started](/chat/docs/sdk/reactnative) guide. + +## Creating a Chat Client + +Stream Chat for React Native uses [`stream-chat`](https://github.com/GetStream/stream-chat-js), Stream's JavaScript client, to interact with Stream's chat services. +`stream-chat` is a dependency of Stream Chat for React Native so it is can be used once `stream-chat-react-native` is installed. + +To start, you can sign up for a [Free subscription](https://getstream.io/chat/pricing/) and then get your API key. + +```ts +import { StreamChat } from 'stream-chat'; + +const client = StreamChat.getInstance('api_key'); +``` + +There are multiple ways to access the client throughout your application. You can store the client in a [`context`](https://reactjs.org/docs/context.html). +Create your own class. Or using the Singleton structure you can call `getInstance` when required. + +## Connecting a User + +Tokens are used to authenticate a user. +Typically, you send this token from your backend to the client when a user registers or logs in. +See the [Tokens & Authentication](https://getstream.io/chat/docs/javascript/tokens_and_authentication/) documentation to learn more about creating tokens. +You can use a [developer token](https://getstream.io/chat/docs/javascript/tokens_and_authentication/?language=javascript#developer-tokens) if desired, but for the purpose of this guide it will be assumed you have created and retrieved a `user_token`. + +To connect a user the `connectUser` function should be called and provided with the user object and `user_token`. +Connecting a user could be done in the login flow or elsewhere in the application after the client is instantiated. + +```ts +await client.connectUser( + { + id: 'jlahey', + name: 'Jim Lahey', + image: 'https://i.imgur.com/fR9Jz14.png', + }, + 'user_token', +); +``` + +It is recommended to not repeatedly call `connectUser` unnecessarily, multiple calls to `connectUser` will result in warnings, and attempting to call `connectUser` before disconnecting a current user will throw an Error. + +To disconnect a user you can call `disconnectUser` on the client. + +```ts +await client.disconnectUser(); +``` + +## Creating a Channel + +Channels are at the core of Stream Chat, they are where messages are contained, sent, and interacted with. +Before delving into the UI components a channel is needed that can be displayed. +Let’s start by initializing one. + +A [channel type](https://getstream.io/chat/docs/javascript/creating_channels#channel-data) is required for creating a channel and controls the settings for a given channel. +There are 5 default types of channels. + +- `commerce` +- `gaming` +- `livestream` +- `messaging` +- `team` + +These five options provide you with sensible defaults for the named use cases. +You can also define custom channel types if Stream Chat defaults don’t work for your use case. + +A channel must be initialized with either an `id` or a list of members for the channel. +If you provide a list of members an `id` will be auto-generated on backend for the channel. + +:::note + +You can't add or remove members from channel created using a list of members. + +::: + +You can also add additional custom data to a channel. +You can add as many custom fields as you desire as long as the total size of the custom fields object is _less than 5KB_. + +For the purpose of this guide you should create a `channel` as you see fit utilizing either a members list that includes your user's `id`, or a channel `id`. +**This can be done once, then the code removed** as this guide will not be covering on the fly channel creation. + + + + +```ts +/** + * Channel created using a channel id + */ +const channel = client.channel('messaging', 'the_park', { + name: 'The Park', +}); +``` + + + + +```ts +/** + * Channel created using a members list + */ +const channel = client.channel('messaging', { + members: ['jlahey', 'rlafleur'], + name: 'The Park', +}); +``` + + + + +To create this channel on the server you must call `create` on the new channel instance. + +```ts +await channel.create(); +``` + +:::note + +For on the fly channel creation you would instead call the `watch` function on the channel as this both creates the channel and subscribes the client to channel updates. + +::: + +## Configuring UI Components + +Now that you have a `client` instance, a user set, and a channel created on the server you can setup your project to use the UI components. + +All major `stream-chat-react-native` components rely on `contexts` to function properly. +The UI and functionality are heavily controlled by a number of components that contain [`Providers`](https://reactjs.org/docs/context.html#contextprovider) to give access to these `contexts`. + +### Overlay Provider + +The `OverlayProvider` is the highest level of the Stream Chat components. +The `OverlayProvider` allows users to interact with messages on long press above the underlying views, use the full screen image viewer, and use the `AttachmentPicker` as a keyboard-esk view. + +The `OverlayProvider` can be used with no props provided but there are a plethora of props for customizing the components in the overlay. + +For additional information on the `OverlayProvider` check the [OverlayProvider docs](../core-components/overlay-provider.mdx) for detailed usage instructions, including how to properly use the `OverlyProvider` with [React Navigation](https://reactnavigation.org/). + +```tsx +import { OverlayProvider } from 'stream-chat-react-native'; + +export const Screen = () => {/** App components */}; +``` + +### Chat + +`Chat` is the next level down of context component from `OverlyProvider` that is required for `stream-chat-react-native` to function as designed. +You can choose to wrap your entire application in `Chat` similar to what is required for the `OverlayProvider` or you can implement `Chat` at the screen level. +`Chat` has one required prop, `client`, which is the instance of `StreamChat` [you created](#creating-a-chat-client). + +For additional information on the `Chat` component check the [Chat component docs](../core-components/chat.mdx) for detailed usage instructions, including how to provide theming and translations to the app. + + + + +```tsx {8-10} +import { StreamChat } from 'stream-chat'; +import { Chat, OverlayProvider } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const App = () => ( + + {/** App components */} + +); +``` + + + + +```tsx +import { StreamChat } from 'stream-chat'; +import { Chat } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const Screen = () => {/** App components */}; +``` + +```tsx {6} +import { OverlayProvider } from 'stream-chat-react-native'; +import { Screen } from './Screen'; + +export const App = () => ( + + + +); +``` + + + + +## Channel List + +
+
+ +Stream Chat for React Native provides a `ChannelList` component out of the box for displaying a list of channels. +`ChannelList` can be used with no props and will return all of the channels the set user has access to. +To functionally use the `ChannelList` an `onSelect` prop should be provided. +The `onSelect` function is called with the selected `Channel` instance and can then be used to react to the user interaction, for example to store the `Channel` in state and navigate to the appropriate channel screen. + +For additional information on the `ChannelList` component check the [ChannelList component docs](../core-components/channel-list.mdx), these include instructions on how to filter and sort the `ChannelList`. + +The `ChannelList` should be implemented inside of the UI components [previously configured](#configuring-ui-components) to provide the appropriate `contexts`. +For the purpose of this guide the example implementation will continue to be given in a single component with the assumption that the client has already been instantiated, a user connected, and a channel the user has access to exists. + +
+ChannelList +
+ +```tsx {9} +import { StreamChat } from 'stream-chat'; +import { ChannelList, Chat, OverlayProvider } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const App = () => ( + + + + + +); +``` + +These three components in conjunction will provide a [`FlatList`](https://reactnative.dev/docs/flatlist) of all channels available to the connected user. + +## Channel + +When creating a chat screen it is required that the `Channel` component wrap the `stream-chat-react-native` components being used. +`Channel` provides multiple `contexts` to the enclosed components and allows for modification and replacement of many of the components. +Channel is the major entry point for modifying the look and feel of your chat application. + +For additional information on the `Channel` component, how to modify various features, adjusting for keyboard offsets, and more, check the [Channel component docs.](../core-components/channel.mdx) + +The `Channel` component does not require any props, but will not function as desired without the `channel` prop being provided. +The `channel` prop expects a `StreamChat` `Channel` instance. +This can be created [as you did previously](#creating-a-channel), pulled directly from the `client.activeChannels`, or conveniently stored when a channel is selected from the `ChannelList`. + +```tsx {8,13-19} +import React, { useState } from 'react'; +import { Channel as ChannelType, StreamChat } from 'stream-chat'; +import { ChannelList, Chat, OverlayProvider } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const App = () => { + const [channel, setChannel] = useState(); + + return ( + + + {channel ? {/** App components */} : } + + + ); +}; +``` + +### Message List + +
+
+ +The `Channel` component on it's own will not provide any UI. +For this additional components are required, most notably the `MessageList` component. +`MessageList` has no required props, and when used in concert with the `Channel` component should function properly out of the box. + +For additional information on the `MessageList` component, how to pass props to the underlying [`FlatList`](https://reactnative.dev/docs/flatlist), or use the `MessageList` for threads, check the [MessageList component docs.](../ui-components/message-list.mdx) + +
+MessageList +
+ +```tsx {15} +import React, { useState } from 'react'; +import { Channel as ChannelType, StreamChat } from 'stream-chat'; +import { ChannelList, Chat, OverlayProvider } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const App = () => { + const [channel, setChannel] = useState(); + + return ( + + + {channel ? ( + + + + ) : ( + + )} + + + ); +}; +``` + +### Message Input + +
+
+ +A chat app needs to be able to send messages, and for this Stream Chat for React Native provides a `MessageInput` component. +Similar to the `MessageList` component `MessageInput` has no required props. +Adding it to the app is as simple as rendering it below the `MessageList`. + +Be sure to set the `keyboardVerticalOffset` on `Channel` to the appropriate height based off any header spacing. +As there is currently no header the `keyboardVerticalOffset` can be set to `0`. + +For additional information on the `MessageInput` component, how to modify it using `context`, or designate it for thread use via the `threadList` prop, check the [MessageInput component docs.](../ui-components/message-input.mdx) + +
+MessageInput +
+ +```tsx {14,16} +import React, { useState } from 'react'; +import { Channel as ChannelType, StreamChat } from 'stream-chat'; +import { ChannelList, Chat, OverlayProvider } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const App = () => { + const [channel, setChannel] = useState(); + + return ( + + + {channel ? ( + + + + + ) : ( + + )} + + + ); +}; +``` + +This small code snippet is enough to render a list of channels and swap them out for a functional and feature rich message list and input when one is selected. + +### Thread + +
+
+ +There is one more high level component that Stream Chat for React Native provides out of the box, and that is `Thread`. +Stream Chat supports threaded messages, and the `MessageList` supplies a UI for threads out of the box. +But as a thread on a mobile messaging app generally exists in a separate screen it is up to you to handle thread selection and subsequent navigation in your implementation. +`Thread` has no required props as it relies heavily on `context` to function. +The simple code snippet can be extended to include `Thread` and keep track of a `thread` state similarly to `channel` by utilizing the `onThreadSelect` prop on the `MessageList`. +The code snippet now has a fully functional `ChannelList`, `MessageList`, and `threadList`, although currently it provides no way to _back_ out of the sudo-navigation. + +For additional information on the `Thread` component, such as how to use `onThreadDismount` to manage your `thread` state, check the [Thread component docs.](../ui-components/thread.mdx) + +
+Thread +
+ +```tsx {9,15-24} +import React, { useState } from 'react'; +import { Channel as ChannelType, StreamChat } from 'stream-chat'; +import { ChannelList, Chat, MessageType, OverlayProvider } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const App = () => { + const [channel, setChannel] = useState(); + const [thread, setThread] = useState(); + + return ( + + + {channel ? ( + + {thread ? ( + + ) : ( + <> + + + + )} + + ) : ( + + )} + + + ); +}; +``` + +## Summary + +- You need a `client` that is an instance of `StreamChat` to provide to the UI components so they function correctly. + +- You need to connect a user via the `connectUser` call to interact with the backend properly. + To do this you need to create tokens as per the [Tokens & Authentication](https://getstream.io/chat/docs/javascript/tokens_and_authentication/) docs. + +- You need to surround your app with the `OverlayProvider` for the UI to function properly, and your app or chat screen with the `Chat` component to provide data to the UI components. + +- `ChannelList` provides access to the list of available channels in the UI, and using props, can be queried, filtered, and sorted as desired. + `ChannelList` also provides convenient functionality for implementing navigation to a selected `Channel`. + +- The `Channel` component is the functional wrapper of the `MessageList`, `MessageInput`, and `Thread` components. + It is the access point for the majority of the customization of the SDK, and controls much of the functionality. + +### Hello Stream Chat + +
+
+ +Putting everything covered together into a single functional component most of the Stream Chat for React Native SDK can be tested with a few additional setup. + +The final sample code: + +- Adds a `useEffect` to connect the user on mount and render the UI when ready. +- Adds a `back` button for sudo-navigation by resetting the states of `thread` and `channel` when appropriate. +- Adds a `View` around the `Chat` component with style `flex: 1` to allow `Chat` to adjust for the `back` button height, and an empty `Thread` component to layout properly. +- Adjusts the `topInset` and `keyboardVerticalOffset` to account for the `back` button height. + +These additions result in a small but functional chat sample app. + +
+Summary +
+ +```tsx +import React, { useEffect, useState } from 'react'; +import { View, TouchableOpacity, Text } from 'react-native'; +import { Channel as ChannelType, StreamChat } from 'stream-chat'; +import { + Channel, + ChannelList, + Chat, + MessageInput, + MessageList, + MessageType, + OverlayProvider, + Thread, +} from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); + +export const App = () => { + const [channel, setChannel] = useState(); + const [clientReady, setClientReady] = useState(false); + const [thread, setThread] = useState(); + + useEffect(() => { + const setupClient = async () => { + try { + await client.connectUser( + { + id: 'jlahey', + name: 'Jim Lahey', + image: 'https://i.imgur.com/fR9Jz14.png', + }, + 'user_token', + ); + setClientReady(true); + } catch (e) { + console.log(e); + } + }; + + setupClient(); + }, []); + + const onBackPress = () => { + if (thread) { + setThread(undefined); + } else if (channel) { + setChannel(undefined); + } + }; + + if (!clientReady) return null; + + return ( + + + {channel && Back} + + + + {channel ? ( + + {thread ? ( + + ) : ( + <> + + + + )} + + ) : ( + + )} + + + + ); +}; +``` diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/installation.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/installation.mdx new file mode 100644 index 0000000000..3fab594bdd --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/installation.mdx @@ -0,0 +1,350 @@ +--- +id: installation +title: Installation +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Installation and usage of our Stream Chat React Native SDK is simple and involves the following steps: + +### Prerequisites + +First things first, make sure you have set up the development environment for React Native. You can find the official guide [here](https://reactnative.dev/docs/environment-setup). + +For Expo, you can follow [this guide](https://docs.expo.dev/get-started/installation/). + +### Add Stream's Chat SDK and its peer dependencies + +In order to install the Stream Chat React Native SDK, run the following command in your terminal of choice: + + + + +```bash title="Terminal" +yarn add stream-chat-react-native +``` + + + + +```bash title="Terminal" +npx expo install stream-chat-expo +``` + + + + + +Stream Chat React Native SDK requires installing some peer dependencies to provide you with a great chat experience. You can run the following command to install them: + + + + +```bash title="Terminal" +yarn add @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-fs react-native-gesture-handler react-native-image-resizer react-native-reanimated react-native-svg +``` + + + + + +```bash title="Terminal" +npx expo install @stream-io/flat-list-mvcp @react-native-community/netinfo expo-file-system expo-image-manipulator react-native-gesture-handler react-native-reanimated react-native-svg +``` + + + + +So what did we install precisely? + + + + +- [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for accessing device gallery. +- [`@stream-io/flat-list-mvcp`](https://github.com/GetStream/flat-list-mvcp) for bi-directional FlatList support. +- [`react-native-fs`](https://github.com/itinance/react-native-fs) to perform file operations like save, delete, etc. +- [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) to handle gestures within the SDK. +- [`react-native-image-resizer`](https://github.com/bamlab/react-native-image-resizer) to compress image uploads. +- [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated) to compress image uploads. +- [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) for SVG support. + + + + +- [`@react-native-community/netinfo`](https://github.com/react-native-netinfo/react-native-netinfo) for accessing device gallery. +- [`@stream-io/flat-list-mvcp`](https://github.com/GetStream/flat-list-mvcp) for bi-directional FlatList support. +- [`expo-file-system`](https://docs.expo.dev/versions/latest/sdk/filesystem/) to perform file operations like save, delete, etc. +- [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) to handle gestures within the SDK. +- [`expo-image-manipulator`](https://docs.expo.dev/versions/latest/sdk/imagemanipulator/) to compress image uploads. +- [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated) to compress image uploads. +- [`react-native-svg`](https://docs.expo.dev/versions/latest/sdk/svg/) for SVG support. + + + + +### Optional Dependencies + +:::note +Starting from `v5.35.0` the `react-native-image-crop-picker` and `expo-image-picker` is no longer a required dependency. You can use it if you want to capture images to attach them in the message else feel free to uninstall it. +::: + +There are a few optional dependencies that can be added to have more features within the SDK. + + + + +- [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll) for accessing device gallery. +- [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker) to capture images to attach them in the message. +- [`react-native-video`](https://github.com/react-native-video/react-native-video) for Video and Audio playback support. +- [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player) for Audio recording and async audio messages support. +- [`react-native-share`](https://github.com/react-native-share/react-native-share) for Attachment sharing support. +- [`react-native-haptic-feedback`](https://github.com/junina-de/react-native-haptic-feedback) for user haptics feedback. +- [`@react-native-clipboard/clipboard`](https://github.com/react-native-clipboard/clipboard) for Copy message support. +- [`react-native-document-picker`](https://github.com/rnmods/react-native-document-picker) to access device media files. +- [`react-native-quick-sqlite`](https://github.com/margelo/react-native-quick-sqlite) to enable Offline support in the app. +- [`react-native-image-picker`](https://github.com/react-native-image-picker/react-native-image-picker) to use native photo picker. + + + + +- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Video and Audio playback, recording and async audio messages support. +- [`expo-media-library`](https://docs.expo.dev/versions/latest/sdk/media-library/) for accessing device gallery. +- [`expo-image-picker`](https://docs.expo.dev/versions/latest/sdk/imagepicker/) to capture images to attach them in the message. +- [`expo-sharing`](https://docs.expo.dev/versions/latest/sdk/sharing/) for Attachments sharing support. +- [`expo-haptics`](https://docs.expo.dev/versions/latest/sdk/haptics/) for user haptics support. +- [`expo-clipboard`](https://docs.expo.dev/versions/latest/sdk/clipboard/) for Copy message support. +- [`expo-document-picker`](https://docs.expo.dev/versions/latest/sdk/document-picker/) to access device media files. +- [`react-native-quick-sqlite`](https://github.com/margelo/react-native-quick-sqlite) to enable Offline support in the app. + + + + +:::note +Please follow along the linked documentation of each optional dependencies so as to support them correctly in your application. +::: + +### Configuring permissions + +Some dependencies(if you are using them on your application), require you to add additional permissions to the `Info.plist` file in iOS and `AndroidManifest.xml` file in Android. Please follow the steps mentioned in the links below for corresponding dependencies: + + + + +- [`@react-native-camera-roll/camera-roll`](https://github.com/react-native-cameraroll/react-native-cameraroll?tab=readme-ov-file#permissions) for gallery/photo library access. +- [`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker?tab=readme-ov-file#step-3) for camera access. +- [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player?tab=readme-ov-file#post-installation) for microphone access for voice recording. + +An example `AndroidManifest.xml` would look like this with permissions: + +```xml + + + + + + +``` + +An example `Info.plist` would look like this with permissions: + +```xml +NSPhotoLibraryUsageDescription +$(PRODUCT_NAME) would like access to your photo gallery to share image in a message. +NSPhotoLibraryAddUsageDescription +$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message. +NSCameraUsageDescription +$(PRODUCT_NAME) would like to use your camera to share image in a message. +NSMicrophoneUsageDescription +$(PRODUCT_NAME) would like to use your microphone for voice recording. +``` + + + + +- [`expo-media-library`](https://docs.expo.dev/versions/latest/sdk/media-library/#configurable-properties) for gallery/photo library access. +- [`expo-image-picker`](https://docs.expo.dev/versions/latest/sdk/imagepicker/#configuration-in-appjsonappconfigjs) for camera access. +- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/#configuration-in-appjsonappconfigjs) for microphone access for voice recording. + +An example `app.json` config for expo would look like this to add permissions to the `Info.plist` on iOS, using the config plugins: + +```json +{ + "expo": { + "plugins": [ + [ + "expo-media-library", + { + "photosPermission": "$(PRODUCT_NAME) would like access to your photo gallery to share image in a message.", + "savePhotosPermission": "$(PRODUCT_NAME) would like to save photos to your photo gallery after downloading from a message." + } + ], + [ + "expo-image-picker", + { + "cameraPermission": "$(PRODUCT_NAME) would like to use your camera to share image in a message." + } + ], + [ + "expo-av", + { + "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording." + } + ] + ] + } +} +``` + +For Android on Expo, most of the most permissions are added automatically by libraries that you use in your app either with config plugins or with a package-level `AndroidManifest.xml`. Read more [here](https://docs.expo.dev/guides/permissions/#android). + + + + +### Additional Steps + +Some dependencies require us to make changes to our application for all functionalities to be available. + +The most important steps to get started are: + +- Add the Babel plugin for [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation#babel-plugin) to your `babel.config.js` file in your application folder: + +```js +module.exports = { + presets: [ + ... // don't add it here :) + ], + plugins: [ + ... + // highlight-next-line + 'react-native-reanimated/plugin', + ], +}; +``` + +:::caution +`react-native-reanimated/plugin` has to be listed last. +::: + +- After installation, wrap your entry point with `` or `gestureHandlerRootHOC`: + +```js +import { GestureHandlerRootView } from 'react-native-gesture-handler'; + +export default function App() { + return {/* content */}; +} +``` + +:::note +The entry point of your app exists usually either in `index.js` or `App.tsx` file. In case of navigation with Expo Router v3.x, the entry point is inside `app/_layout.js`. +::: + +Please also follow the steps mentioned in the links below for corresponding dependencies: + +- `react-native` - [additional installation steps](https://reactnative.dev/docs/image#gif-and-webp-support-on-android) +- `react-native-image-crop-picker` - [additional installation steps](https://github.com/ivpusic/react-native-image-crop-picker#step-3) +- `@react-native-camera-roll/camera-roll` - [additional installation steps](https://github.com/react-native-cameraroll/react-native-cameraroll#permissions) + +Now you should be able to run the app on simulator by running following command: + + + + + + + +```bash title="Terminal" +npx pod-install +yarn ios +``` + + + + + +```bash title="Terminal" +yarn android +``` + + + + + + + + + + +```bash title="Terminal" +yarn ios +``` + + + + + +```bash title="Terminal" +yarn android +``` + + + + + + diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/internationalization.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/internationalization.mdx new file mode 100644 index 0000000000..0f3d41b192 --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/internationalization.mdx @@ -0,0 +1,429 @@ +--- +id: translations +title: Internationalization +--- + +# Adding Internationalization (i18n) + +If you deploy your app to users who speak another language, you'll need to internationalize it. Stream’s Chat Client provides the option to translate the user-created contents of messages in addition to the UI. The React Native SDK's UI Components are available in multiple languages out-of-the-box. At the moment we support the following languages (and more will be added in the future): + +- [English (en)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/en.json) +- [Spanish (es)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/es.json) +- [French (fr)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/fr.json) +- [Hebrew (he)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/he.json) +- [Hindi (hi)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/hi.json) +- [Italian (it)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/it.json) +- [Japanese (ja)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/ja.json) +- [Korean (ko)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/ko.json) +- [Dutch (nl)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/nl.json) +- [Russian (ru)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/ru.json) +- [Turkish (tr)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/tr.json) +- [Brazilian Portuguese (pt-BR)](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/pt-BR.json) + +## Usage + +The `Streami18n` provides static translations for React Native components from the Stream Chat SDK. `Streami18n` is a class that uses a configuration of [i18next](https://www.i18next.com/) with a subset of the functionality exposed. `Streami18n` is provided by `stream-chat-react-native` and can be imported from the library. + +The only step you need to start using `Streami18n` is to create an instance of the class. + +```tsx +const streami18n = new Streami18n(); +``` + +`Streami18n` will default to English (en). If you choose to use the default English settings with Day.js you do not need to deal directly with an instance of `Streami18n`, this is taken care of for you. + +If you choose to change the language, translation, or date handling, you will need to provide your modified instance of `Streami18n` to the component library. Two components require your custom instance of `Streami18n` to properly pass your translation and time-date functions to the component library, `OverlayProvider` and `Chat`. Both components accept an instance of `Streami18n` via the prop `i18nInstance`. Providing this prop will provide your instance of `Streami18n` to all of the components via [`context`](https://react.dev/reference/react/createContext) instead of the default instance. + +```tsx +import { StreamChat }from 'stream-chat'; +import { Chat, OverlayProvider, Streami18n }from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); +const streami18n =new Streami18n(); + +exportconst App = () => ( + + + {/** App components */} + + +); +``` + +### Setting language for components + +Stream provides built in translations for some languages out-of-the-box. `Streami18n` accepts two optional parameters when being instantiated, [`options`](#options) and [`i18nextConfig`](#i18nextconfig). These parameters allow you to modify the `Streami18n` instance to your preferences. + +As an example, let's say we need to localize the UI of the application for a Dutch audience: + +```tsx +const streami18n = new Streami18n({ language: 'nl' }); // Instantiate Streami18n with Dutch strings. +``` + +Alternatively, you can also use [`setLanguage`](https://getstream.io/chat/docs/sdk/reactnative/basics/translations/#setlanguage) method on `Streami18n` class. This is useful especially if you want to build language toggle functionality within your app. + +For example, let's say an application needs to default to English but support French: + +```tsx +const streami18n = new Streami18n(); + +... +// Logic for how a user can change the language +... + +streami18n.setLanguage('fr');// The UI will change to French. +``` + +### Adding a new language + +Let's see how you can add support for additional languages in the SDK. As an example, we'll implement a custom Polish language translation: + +```tsx +const streami18n = new Streami18n(); +streami18n.registerTranslation('pl', { + 'Copy Message': 'Kopiuj wiadomość', + 'Delete Message': 'Usuń wiadomość', + '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} i {{ secondUser }} piszą...', +}); +``` + +Please take a look at all the available texts [here](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/i18n/en.json). + +### Overriding existing languages + +You can also make line item changes to the strings for existing UI components. This is useful if you want to tweak an existing language to use regional spelling variants (American English vs. UK English, for example) same process as [Adding a new language](#adding-a-new-language). As an example, we'll override the translations for Dutch language: + +```tsx +const streami18n = new Streami18n(); + +streami18n.registerTranslation('nl', { + 'Delete Message': 'Verwijder bericht', +}); +``` + +### Using device locale to set language + +[`react-native-localize`](https://github.com/zoontek/react-native-localize#-react-native-localize) package provides a toolbox for React Native app localization. You can use this package to access user preferred locale, and use it to set language for chat components: + +```tsx +import * as RNLocalize from 'react-native-localize'; +const streami18n = new Streami18n(); + +const userPreferredLocales = RNLocalize.getLocales(); + +streami18n.setLanguage(userPreferredLocales[0].languageCode); +``` + +### Overriding DateTime format + +React Native SDK uses [Day.js](https://day.js.org/en/) internally by default to format DateTime stamp. Day.js is a lightweight alternative to Moment.js with the same modern API and has [locale support](https://day.js.org/docs/en/i18n/i18n) as well. + +Day.js provides locale config for plenty of languages, you can check the whole list of locale configs [here](https://github.com/iamkun/dayjs/tree/dev/src/locale). + +You can either provide the Day.js locale config while registering language with `Streami18n` (either via constructor or `registerTranslation()`) or you can provide your own Day.js or Moment.js instance to Streami18n constructor, which will be then used internally (using the language locale) in components. + +```tsx +const i18n =new Streami18n({ + language: 'nl', + dayjsLocaleConfigForLanguage: { + months: [...], + monthsShort: [...], + calendar: { + sameDay: '...' + } + } +}); +``` + +You can add locale config for moment while registering translation via `registerTranslation` function: + +```tsx +const i18n =new Streami18n(); + +i18n.registerTranslation( + 'mr', + { + 'Nothing yet...': 'काहीही नाही ...', + '{{ firstUser }} and {{ secondUser }} are typing...': + '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ', + }, + { + months: [...], + monthsShort: [...], + calendar: { + sameDay: '...' + } + } +); +``` + +Alternatively, you can use a utility library to handle DateTime by providing your own [`Moment`](https://momentjs.com/) object: + +```tsx +import 'moment/locale/nl'; +import 'moment/locale/it'; +// or if you want to include all locales +import 'moment/min/locales'; + +import Moment from moment; + +const i18n =new Streami18n({ + language: 'nl', + DateTimeParser: Moment, +}); +``` + +Or by providing your own [Day.js](https://day.js.org/docs/en/installation/installation) object: + +```tsx +import Dayjs from 'dayjs'; + +import 'dayjs/locale/nl'; +import 'dayjs/locale/it'; +// or if you want to include all locales +import 'dayjs/min/locales'; + +const i18n = new Streami18n({ + language: 'nl', + DateTimeParser: Dayjs, +}); +``` + +If you would like to stick with English language for date-times in Stream components, you can set `disableDateTimeTranslations` to true. + +### Translating messages + +If your application has a user-base that speaks more than one language, Stream's Chat Client provides the option to automatically translate messages. For more information on using automatic machine translation for messages, see the [Chat Client Guide on Translation](https://getstream.io/chat/docs/react-native/translation/?language=javascript). + +### Timezone location + +To display date and time in different than machine's local timezone, you can provide the timezone parameter to the `Streami18n` constructor. The timezone value has to be a valid [timezone identifier string](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). If no timezone parameter is provided, then the machine's local timezone is applied. + +:::note +On our React Native SDK, the timezone is only supported through `moment-timezone` and not through the default `Dayjs`. This is because of the [following issue](https://github.com/iamkun/dayjs/issues/1377). + +So, to ensure this please pass the `moment-timezone` object to the `DateTimeParser` key of the `Streami18n` constructor. +::: + +```tsx +import { Streami18n } from 'stream-chat-react'; +import momentTimezone from 'moment-timezone'; + +const streami18n = new Streami18n({ + DateTimeParser: momentTimezone, + timezone: 'Europe/Budapest', +}); +``` + +Moment Timezone will automatically load and extend the moment module, then return the modified instance. This will also prevent multiple versions of moment being installed in a project. + +## Options + +`options` are the first optional parameter passed to `Streami18n`, it is an object with all keys being optional. + +### DateTimeParser + +Used for translating dates and times into the desired local format. Either [Day.js](https://day.js.org/) or [Moment](https://momentjs.com/) can be used. Day.js is a dependency of the repository and used by default. + +| TYPE | DEFAULT | +| ------ | ------- | ----- | +| Dayjs  |  Moment | Dayjs | + +### dayjsLocaleConfigForLanguage + +You can [customize and create](https://day.js.org/docs/en/customization/customization) new locales using Day.js. To allow accessibility to this option when using the default Day.js instance you can pass these customizations via the `dayjsLocaleConfigForLanguage` key. + +| Type | +| ------ | +| Object | + +### debug + +Enable [debug mode](https://www.i18next.com/overview/configuration-options#logging) in internal i18next instance. + +| TYPE | DEFAULT | +| ------- | ------- | +| Boolean | false | + +### disableDateTimeTranslations + +Use the default English language date-times instead of those dictated by the language set. + +| TYPE | DEFAULT | +| ------- | ------- | +| Boolean | false | + +### language + +Language code for language to be used. The following options are available: + +- English (`en`) +- Spanish (`es`) +- French (`fr`) +- Hebrew (`he`) +- Hindi (`hi`) +- Italian (`it`) +- Japanese (`ja`) +- Korean (`ko`) +- Dutch (`nl`) +- Russian (`ru`) +- Turkish (`tr`) + +| TYPE | DEFAULT | +| ------ | ------- | +| String | `en` | + +### logger + +Function to log warnings & errors from `Streami18n`. + +| TYPE | DEFAULT | +| ---------------------- | ------------ | +| (msg?: string) => void | console.warn | + +### translationsForLanguage + +Allows you to override the provided translations for given keys. + +``` +const streami18n =new Streami18n({ + language: 'nl', + translationsForLanguage: { + 'Nothing yet...': 'Nog Niet...', + '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...', + }, +}); +``` + +| Type | +| ------ | +| Object | + +## I18NextConfig + +`i18NextConfig` is the second optional parameter passed to `Streami18n`, it is an object with all keys being optional. `i18nextConfig` is used in the instantiation of the i18next instance and mostly aligns with the [i18next options](https://www.i18next.com/translation-function/essentials#overview-options). + +### debug + +Enable [debug mode](https://www.i18next.com/overview/configuration-options#logging) in internal i18next instance. This overrides the [`debug key on options`](https://getstream.io/chat/docs/sdk/reactnative/basics/translations/#debug) if provided. + +| Type | +| ------- | +| Boolean | + +### `fallbackLng` + +Fallback language setting for i18next. + +| Type | +| --------------------------------------------------------------------- | +| [`FallbackLng`](https://www.i18next.com/principles/fallback#fallback) | + +### `interpolation` + +i18next interpolation setting for integrating dynamic values into translations. + +| TYPE | DEFAULT | +| ---------------------------------------------------------------------------------- | ------------------------ | +| [Object](https://www.i18next.com/translation-function/interpolation#interpolation) | `{ escapeValue: false }` | + +### `keySeparator` + +Override character to separate keys. + +| TYPE | DEFAULT | +| ----------------- | ------- | +| String \| Boolean | false | + +### `lng` + +Override language to use. + +| Type | +| ------ | +| String | + +### `nsSeparator` + +Override character to split namespace from key. + +| TYPE | DEFAULT | +| ----------------- | ------- | +| String \| boolean | false | + +### `parseMissingKeyHandler` + +Function to handle keys missing translations for the selected language. + +| TYPE | DEFAULT | +| ------------------------- | ------------ | +| `(key: string) => string` | (key) => key | + +## Methods + +### `getAvailableLanguages` + +Returns an array of language code strings corresponding to available languages. + +``` +const availableLanguages = streami18n.getAvailableLanguages(); +``` + +### `geti18Instance` + +Returns instance of i18next used within the `Streami18n` instance. + +``` +const i18n = streami18n.geti18Instance(); +``` + +### `getTranslations` + +Returns the current translations dictionaries for all languages. + +``` +const translations = streami18n.getTranslations(); +``` + +### `getTranslators` + +Asynchronous function that returns the current translator functions. + +``` +const { t, tDateTimeParser } =await streami18n.getTranslators(); +``` + +### `registerTranslation` + +Allows you to register a custom translation, this will override a translation if one already exists for the given language code. The third parameter, which is optional, is a Day.js locale, which is structured the same as [dayjsLocaleConfigForLanguage](#dayjslocaleconfigforlanguage). + +It is suggested you look at the [`enTranslations.json file`](https://github.com/GetStream/stream-chat-react/blob/master/src/i18n/en.json) exported from `stream-chat-react-native` for a current list of used translation keys. + +``` +streami18n.registerTranslation('mr', { + 'Nothing yet...': 'काहीही नाही ...', + '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत', +}); +``` + +#### Parameters + +| NAME | TYPE | REQUIRED | +| ------------------- | ------ | -------- | +| `language` | String | ✔️ | +| `translation` | Object | ✔️ | +| `customDayjsLocale` | Object | | + +### `setLanguage` + +Asynchronous function that changes the current language and returns the new translation function. If not initialized `undefined` will be returned. If the language fails to update the current translation function will be returned. + +``` +const t = await streami18n.setLanguage('nl'); +``` + +#### Parameters + +| NAME | TYPE | REQUIRED | +| ---------- | ------ | -------- | +| `language` | String | ✔️ | diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/limitations.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/limitations.mdx new file mode 100644 index 0000000000..81a829c205 --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/limitations.mdx @@ -0,0 +1,31 @@ +--- +id: limitations +sidebar_position: 7 +title: Limitations +--- + +Stream Chat for React Native allows for a vast a amount of customization. +The theme, components, and functionality can almost all be modified or replaced. +But it is important to remember **not all use cases are supported out of the box**. + +## Customizations + +For some use cases you will have to replace our components with ones you create yourself. +Custom UI components are mostly provided as props on the `Channel` component and propagated throughout the UI via context. +Some many need to be provided to other components such as `OverlayProvider` or `MessageList`, but `Channel` is the most common entry point for customizations. + +Most components when rendered receive very few props, instead the components operate independently of props by utilizing contexts themselves. +When creating a custom component we strongly suggest you look at the source code on GitHub for the component you are replacing. +This will not only give you a better idea of what contexts we are using to achieve the current UI, but also insight into any internal logic that may be taking place in the component that you may want to maintain. + +We use custom memoization equality checks on many components to limit unnecessary re-renders, replicating these memoization checks to fit the needs of your custom component will help in maintaining performance. +This is particularly important inside of messages as many are rendered in a single message list, a change that triggers a re-render across all messages will be computationally expensive. + +## Platforms + +It is important to remember that when using React Native that there may be platform specific differences as the platform specific SDKs are being utilized. +If you are using [Expo](https://expo.io/) there may be even more differences. +We highly suggest you test on both platforms to ensure you are seeing consistent results. + +Libraries such as [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/), which we make use of, often function slightly differently on iOS and Android. +If you are creating customizations that may overlap with React Native Gesture Handler usage you should once again look at the source code on GitHub for the component you are replacing to see if you need platform specific code. diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/migrating-from-4.x-to-5.x.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/migrating-from-4.x-to-5.x.mdx new file mode 100644 index 0000000000..24d27831b5 --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/migrating-from-4.x-to-5.x.mdx @@ -0,0 +1,38 @@ +--- +id: upgrading-from-v4 +title: Migration from 4.x to 5.x +--- + +This guide highlights the changes introduced from v4 to v5. + +## Prop or Context Changes + +The following values in [`ImageGalleryContext`](https://getstream.io/chat/docs/sdk/reactnative/contexts/image-gallery-context/#value) have been renamed: + +- `image` -> `selectedMessage` +- `setImage` -> `setSelectedMessage` +- `images` -> `messages` +- `setImages` -> `setMessages` + +## 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. + +```bash +yarn remove stream-chat +``` + +- Replace [`@react-native-community/cameraroll`](https://github.com/react-native-cameraroll/react-native-cameraroll) dependency with [`@react-native-camera-roll/camera-roll`](https://www.npmjs.com/package/@react-native-camera-roll/camera-roll): + +```bash +yarn remove @react-native-community/cameraroll +yarn add @react-native-camera-roll/camera-roll +``` + +## Unique Chat Component Instance + +Until v4, you could provide a separate `Chat` component for each usage of `Channel` component or `ChannelList` component. But from v5, you must provide only one instance of the `Chat` component within your application. This component needs to be a parent for all the chat-related components such as `ChannelList`, `Channel` or `Thread`. + +## Enable Offline Support + +To enable offline support please check the [Offline Support](../basics/migrating-from-4.x-to-5.x.mdx) guide. diff --git a/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/navigation.mdx b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/navigation.mdx new file mode 100644 index 0000000000..2afba8ce58 --- /dev/null +++ b/docusaurus/reactnative_versioned_docs/version-5.x.x/basics/navigation.mdx @@ -0,0 +1,221 @@ +--- +id: stream_chat_with_navigation +title: Navigation +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Stream Chat for React Native provides many features out of the box that require positioning the components on the screen in a certain manner to get the desired UI. + +The `AttachmentPicker`, `ImageGallery`, and `MessageOverlay`, all need to be rendered in front of other components to have the desired effect. All of these elements are controlled by the `OverlayProvider`. When used together with navigation, certain steps are needed to be taken to make these components appear fluently. + +The guidance provided makes the assumption you are using [React Navigation](https://reactnavigation.org/) in your app in conjunction with [`createStackNavigator`](https://reactnavigation.org/docs/stack-navigator/). + +:::note +**If you are using another navigation solution, or utilizing [`createNativeStackNavigator`](https://reactnavigation.org/docs/native-stack-navigator/), other considerations will need to be taken depending on your navigation arrangement.** + +The `createNativeStackNavigator` uses the native APIs `UINavigationController` on iOS and `Fragment` on Android. The `OverlayProvider` needs to exist in a view that can render content in front of the chat screen. Therefore, using a `fullScreenModal` with `createNativeStackNavigator`, which uses `UIModalPresentationFullScreen` on iOS and `modal` on Android, to render your chat screen will leave the `OverlayProvider` rendered behind the chat. If you are having issues, we suggest you get in touch with support, and we can find a solution to your specific navigation arrangement. +::: + +## Navigation Container + +The [`NavigationContainer`](https://reactnavigation.org/docs/navigation-container/) manages the apps state in React Navigation. Nested navigators and screens all exist within the container. To ensure the `OverlayProvider` can render content above all of these screens, headers, tab-bars, etc. the `OverlayProvider` must be rendered around them. + +The `Chat` component should ideally surround the entire application. You can choose whatever suits your needs best, theming, connection handling, and translations are all handled out of the box in the `Chat` component; and this may be a consideration in where in the app you want this component to be rendered. + +:::note +Having it higher in the *stack* helps to ensure it is not unmounted at times when a connection is present. If `Chat` is unmounted with a connection present you may have to implement some connection handling functions yourself to ensure you reconnect when the app is, for instance, reopened from the background. The WebSocket connection closes on it's own approximately 15 seconds after the app is put into background. Not handling the connection on [`appState`](https://reactnative.dev/docs/appstate) changes will also affect **[how Stream Chat handles Push Notifications](https://getstream.io/chat/docs/sdk/reactnative/guides/push-notifications-v2/)**. +::: + +```tsx +import React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; +import { Chat, OverlayProvider } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); +const Stack = createStackNavigator<{ home: undefined }>(); + +export const App = () => + + + // highlight-next-line + + + {/** App components */})} name='home' /> + + // highlight-next-line + + + ; +``` + +## Keyboard + +The `Channel` component contains a `KeyboardCompatibleView` that, like [the standard React Native `KeyboardAvoidingView`](https://reactnative.dev/docs/keyboardavoidingview), needs a `keyboardVerticalOffset` to account for distance between the top of the user screen and the react native view. This height in most cases with React Navigation in conjunction with Stream Chat is the header height of React Navigation. This can be accessed from React Navigation using the `useHeaderHeight` hook from `@react-navigation/stack`, and given as a prop to `Channel`. + +```tsx +const headerHeight = useHeaderHeight(); + +const App = () => { + return {/* other components inside */}; +}; +``` + +## Attachment Picker + +The `AttachmentPicker` is a keyboard-esk view that allows a user to attach photos and files. Part of the construction of the `AttachmentPicker` is a bottom-sheet provided by the `OverlayProvider`. This bottom-sheet provides a grid of images in a scroll-able list that can be lifted up to make selecting images easier. The placement of the `AttachmentPicker` is dependent on two values, the `bottomInset` and the `topInset`. + +### Top Inset + +The `topInset` is used to determine how high the scroll-able bottom-sheet can go when opened. `topInset` defaults to 0 and covers the entire screen, or it can be set to the [top safe area inset](https://reactnavigation.org/docs/handling-safe-area/#use-the-hook-for-more-control) if desired. The most common choice when using React Navigation is to get the header height using the `useHeaderHeight` hook from `@react-navigation/stack` and set the top inset to the given height for a nice visual result where the picker opens to the header. + +```tsx +const headerHeight = useHeaderHeight(); +const { setTopInset } = useAttachmentPickerContext(); + +useEffect(() => { + setTopInset(headerHeight); +}, [headerHeight]); +``` + +:::note +The `topInset` can be set via props on the `OverlayProvider`, or set via the `setTopInset` function provided by the `useAttachmentPickerContext` hook. +::: + +### Bottom Inset + +The `bottomInset` is used to adjust the height of the `AttachmentPicker` menu to align properly with the bottom-sheet when open. This is the height between the bottom of the `MessageInput` container and the bottom of the screen. If you are displaying the chat screen without a tab-bar it is most likely the bottom inset is the [bottom safe area inset](https://reactnavigation.org/docs/handling-safe-area/#use-the-hook-for-more-control). If you are using a bottom tab-bar you can utilize the `useBottomTabBarHeight` hook from `@react-navigation/bottom-tabs` to get the appropriate height to use. + +```tsx +import React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { Chat, OverlayProvider } from 'stream-chat-react-native'; + +const client = StreamChat.getInstance('api_key'); +const Stack = createStackNavigator<{ home: undefined }>(); + +export const Nav = () => { + // highlight-next-line + const { bottom } = useSafeAreaInsets(); + + return ( + + // highlight-next-line + + + + {/** App components */})} name='home' /> + + + // highlight-next-line + + + ); +}; +``` + +```tsx +import React from 'react'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import { Nav } from './Nav'; + +export const App = () => ( + +