Skip to content

Upgrade helper

Jump to bottom
Vishal Narkhede edited this page Jan 19, 2021 · 7 revisions

Upgrade from 0.x.x to 2.x.x

Dependency changes:

Image picker

react-native-get-random-values

Expo dependency

  • Expo 39 is now the lowest supported version from 2.x.x

Typescript

This library has been moved to full typescript. Please check Typescript doc for details. This change from a maintained definition file gives more accurate types but also has resulted in many type names changing. The 2.x.x type definitions should be used as the source of truth for the correct type names and typings.

Keyboard changes

  • Changes to Keyboard functionality: Internally we use KeyboardCompatibleView component to sync Channel height according to keyboard state. As part of 1.3.x we updated have the implementation for KeyboardCompatibleView. Updated KeyboardCompatibleView's implentation is mostly same as KeyboardAvoidingView, with few additional fixes for app state (background | foreground). And thus, following props on Channel component won't be supported anymore:

    • keyboardDismissAnimationDuration
    • keyboardOpenAnimationDuration

    Following new props have been introduced on Channel component. They are the same props accepted by KeyboardAvoidingView of react-native.

    • keyboardBehavior ['height' | 'position' | 'padding']
    • keyboardVerticalOffset

this reference removal

  • All the components were moved from class based components to functional components, gradually as part of 1.x.x. This caused some breaking changes on ChannelList component's custom event handlers. ChannelList component has its own default logic for handling different types of events. Although these default event handlers can still be overridden by providing custom prop functions to the ChannelList component. Custom logic can be provided for the following events.

    • onAddedToChannel overrides notification.added_to_channel default

    • onChannelDeleted overrides channel.deleted default

    • onChannelHidden overrides channel.hidden default

    • onChannelTruncated overrides channel.truncated default

    • onChannelUpdated overrides channel.updated default

    • onMessageNew overrides notification.message_new default

    • onRemovedFromChannel overrides notification.removed_from_channel default

      These props were already present in 0.x.x as well. Breaking change is on the parameters of these event handlers. In 0.x.x, these event handlers used to have this as its first argument, which was reference ChannelList component (class based).

      From 1.3.x, these handlers will accept following params:

    • 1st argument: setChannels reference to the useState hook that sets the channels in the React Native FlatList

    • 2nd argument: event object returned by the StreamChat instance

  • Similar breaking change was introduced in MessageSimple component as well. For example, if you wish to override the SDK's standard long press behavior on a message, the onLongPress or onPress function passed in to MessageSimple no longer takes the this component reference as it's first argument. The message and the event object become the first and second arguments, respectively.

Context changes

  • If you are using withChannelContext function inside your app, then you may want to pay attention for context related changes. We have split the ChannelContext into three separate contexts to further modularize the code and reduce renders as items in context change. The following contexts now contain the following values, previously all held within the ChannelContext:

    • ChannelContext:

      channel, disabled, EmptyStateIndicator, error, eventHistory, lastRead, loading, LoadingIndicator, markRead, members, read, setLastRead, typing, watcherCount, watchers

    • MessagesContext:

      Attachment, clearEditingState, editing, editMessage, emojiData, hasMore, loadingMore, loadMore, Message, messages, removeMessage, retrySendMessage, sendMessage, setEditingState, updateMessage

    • ThreadContext:

      closeThread, loadMoreThread, openThread, thread, threadHasMore, threadLoadingMore, threadMessages

renderText Function

  • The renderText function utilized in the MessageTextContainer component now accepts a single object containing markdownRules, markdownStyles, and message. Previously each value was a separate function parameter
  • Markdown use simple-markdown to tokenize the entire text within a message object
  • That tokenized text is then passed through rendering markdownRules and given associated markdownStyles
  • Override any or all of the rendering rules by passing in your own markdownRules
  • Override any or all of the styles for markdown renders by passing in your own markdownStyles which have typescript definitions shown here

Theming

  • The style prop to override the theme on components has been removed. By default the theme is provided via the style prop on the Chat component. To modify the theme at the component level the component should be wrapped in an additional ThemeProvider, which should be supplied the modifications via the prop style. These theme modifications will be merged with parent themes including Chat for encompassed child components. This change applies to modifying style on sent vs. received messages, a common use case for theme overrides. For this case it is suggested that the default Chat theme have the styling for the more common message type, often received messages for group chats, and the other message type(s) be wrapped in their own theme providers.
if (isMyMessage(message)) {
  return (
    <ThemeProvider style={sentMessageStyles}>
      <MessageSimple {...props} />
    </ThemeProvider>
  );
} else {
  return (
    <MessageSimple {...props} />
  );
}

Miscellaneous prop changes

The shift to context hooks, removal of Higher Order Components, and addition of TypeScript in 2.x.x results in many props changing. The types should be used as the source of truth for the correct props.

Channel

  • added additionalKeyboardAvoidingViewProps prop to allow custom keyboard props
  • removed client as it is now provided via context

ChannelListMessenger

  • remove setActiveChannel prop

ChannelPreviewMessenger

  • renamed the latestMessage prop to latestMessagePreview. This name change is more semantic to what the prop does and reduces confusion with the lastMessage prop

FileIploadPreview

  • dropped support for the fileUploadPreview.dismissText theme value
  • added support for fileUploadPreview.dismiss, fileUploadPreview.dismissImage, and fileUploadPreview.imageContainer theme values

MessageList

  • Dropped support for the MessageList component's onMessageTouch prop. Please use the onPress prop on the MessageSimple component to perform an action on touch of a message.

  • Dropped support for the following MessageList props:

    • dateSeparator (use DateSeparator instead)
    • headerComponent (use HeaderComponent instead)

  • The MessageSystem prop goes on MessageList now and not other components that previously shared the MessageUIComponentProps type.

MessageSimple

  • Dropped support for the Message component's readOnly prop. Please use the disabled value from the ChannelContext instead.

MessageContent

  • removed retrySendMessage prop in favor of retrySendMessage within MessagesContext

MessageInput

  • remove parent prop to parent_id as it needs to be just an id string instead of the entire parent object
  • add setInputRef prop to actually allow forwarding of the TextInput ref controls

MessageSystem

  • add formatDate prop to allow custom date formatting

Thread

  • remove thread and threadMessages as these are now supplied via context

Upgrade from 1.2.x to 1.3.x:

  • 1.3.x replaced native dependency support for react-native-image-picker in favor of react-native-image-crop-picker for multi-image selection capabilities

Upgrade from 0.1.x to 0.2.x:

  • 0.2.x added support for react native 0.60. Dependencies like react-native-image-picker, react-native-document-picker and netinfo have been taken out of hard dependencies and moved to peer dependencies and thus will have to be installed manually on consumer end (Reference)

  • React Native 0.60 came with auto-linking functionality that means if some native libraries are linked manually before the upgrade, they will have to be unlinked, so that React Native can auto-link them (Reference)

    react-native unlink react-native-image-picker
react-native unlink react-native-document-picker
react-native unlink @react-native-community/netinfo

  • React Native 0.60 has been migrated over to AndroidX. In the current context, dependencies such as react-native-document-picker and (if you are using react-navigation) react-native-gesture-handler, react-native-reanimated don't have AndroidX support. But an excellent tool named jetifier is quite useful to patch these dependencies with AndroidX support.

  • CocoaPods are not part of React Native's iOS project (ref). Thus make sure to install all the pod dependencies.

    cd ios && pod install && cd ..
Clone this wiki locally