CRNS-11: Adding support for additional props to flatlist in MessageList and ChannelList

Author: vishalnarkhede

CHANGELOG.md

@@ -7,11 +7,13 @@
 - Changes to add compatibility for Expo 36. Adding [netinfo](https://github.com/react-native-community/react-native-netinfo) as peer dependency - https://github.com/GetStream/stream-chat-react-native/issues/97
 - Disabling the longpress on image viewer (in Attachment) - https://github.com/GetStream/stream-chat-react-native/issues/100 to avoid freezing of UI.
 - Fixing broken threads issue
+- Support for `additionalFlatListProps` prop in `MessageList` and `ChannelList` component
 
 #### stream-chat-react-native (Native package)
 
 - Disabling the longpress on image viewer (in Attachment) - https://github.com/GetStream/stream-chat-react-native/issues/100 to avoid freezing of UI.
 - Fixing broken threads issue
+- Support for `additionalFlatListProps` prop in `MessageList` and `ChannelList` component
 
 ## [0.4.0] 2019-12-16
 

src/components/ChannelList.js

@@ -119,6 +119,21 @@ const ChannelList = withChatContext(
        * If true, channels won't be dynamically sorted by most recent message.
        */
       lockChannelOrder: PropTypes.bool,
+      /**
+       * Besides existing (default) UX behaviour of underlying flatlist of ChannelList component, if you want
+       * to attach some additional props to un derlying flatlist, you can add it to following prop.
+       *
+       * You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props
+       *
+       * e.g.
+       * ```
+       * <ChannelList
+       *  filters={filters}
+       *  sort={sort}
+       *  additionalFlatListProps={{ bounces: true }} />
+       * ```
+       */
+      additionalFlatListProps: PropTypes.object,
     };
 
     static defaultProps = {
@@ -133,6 +148,7 @@ const ChannelList = withChatContext(
       // https://github.com/facebook/react-native/blob/a7a7970e543959e9db5281914d5f132beb01db8d/Libraries/Lists/VirtualizedList.js#L466
       loadMoreThreshold: 2,
       lockChannelOrder: false,
+      additionalFlatListProps: {},
       logger: () => {},
     };
 

src/components/ChannelListMessenger.js

@@ -51,6 +51,20 @@ const ChannelListMessenger = withChatContext(
       error: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
       /** If channels are being queries. LoadingIndicator will be displayed if true */
       loadingChannels: PropTypes.bool,
+      /**
+       * Besides existing (default) UX behaviour of underlying flatlist of ChannelListMessenger component, if you want
+       * to attach some additional props to un derlying flatlist, you can add it to following prop.
+       *
+       * You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props
+       *
+       * e.g.
+       * ```
+       * <ChannelListMessenger
+       *  channels={channels}
+       *  additionalFlatListProps={{ bounces: true }} />
+       * ```
+       */
+      additionalFlatListProps: PropTypes.object,
     };
 
     static defaultProps = {
@@ -60,6 +74,7 @@ const ChannelListMessenger = withChatContext(
       EmptyStateIndicator,
       // https://github.com/facebook/react-native/blob/a7a7970e543959e9db5281914d5f132beb01db8d/Libraries/Lists/VirtualizedList.js#L466
       loadMoreThreshold: 2,
+      additionalFlatListProps: {},
     };
 
     renderLoading = () => {
@@ -92,6 +107,7 @@ const ChannelListMessenger = withChatContext(
           />
         )}
         keyExtractor={(item) => item.cid}
+        {...this.props.additionalFlatListProps}
       />
     );
 

src/components/MessageList.js

@@ -199,6 +199,19 @@ const MessageList = withChannelContext(
        * Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js
        */
       actionSheetStyles: PropTypes.object,
+      /**
+       * Besides existing (default) UX behaviour of underlying flatlist of MessageList component, if you want
+       * to attach some additional props to un derlying flatlist, you can add it to following prop.
+       *
+       * You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props
+       *
+       * e.g.
+       * ```
+       * <MessageList
+       *  additionalFlatListProps={{ bounces: true, keyboardDismissMode: true }} />
+       * ```
+       */
+      additionalFlatListProps: PropTypes.object,
     };
 
     static defaultProps = {
@@ -208,6 +221,7 @@ const MessageList = withChannelContext(
       // https://github.com/facebook/react-native/blob/a7a7970e543959e9db5281914d5f132beb01db8d/Libraries/Lists/VirtualizedList.js#L466
       loadMoreThreshold: 2,
       messageGrouping: true,
+      additionalFlatListProps: {},
       dismissKeyboardOnMessageTouch: true,
       TypingIndicator,
     };
@@ -600,6 +614,7 @@ const MessageList = withChannelContext(
                 minIndexForVisible: 1,
                 autoscrollToTopThreshold: 10,
               }}
+              {...this.props.additionalFlatListProps}
             />
             {this.props.TypingIndicator && showTypingIndicator && (
               <TypingIndicatorContainer>