fix: add estimated height to list (#6)

babel.config.js

@@ -5,6 +5,7 @@ module.exports = function (api) {
     plugins: [
       '@babel/plugin-transform-flow-strip-types',
       '@babel/plugin-proposal-unicode-property-regex',
+      ['react-native-reanimated/plugin'],
     ],
   }
 }

package.json

@@ -76,7 +76,7 @@
     "react-native-iphone-x-helper": "1.3.1",
     "react-native-lightbox-v2": "0.9.0",
     "react-native-parsed-text": "0.0.22",
-    "react-native-reanimated": "~2.14.4",
+    "react-native-reanimated": "2.17.0",
     "react-native-typing-animation": "0.1.7",
     "use-memo-one": "1.1.3",
     "uuid": "3.4.0"
@@ -111,4 +111,4 @@
       "pre-commit": "yarn lint:fix && yarn prettier && yarn tsc"
     }
   }
-}
+}

src/GiftedChat.tsx

@@ -456,6 +456,7 @@ function GiftedChat<TMessage extends IMessage = IMessage>(
           messages={state.messages}
           forwardRef={messageContainerRef}
           isTyping={isTyping}
+          listContainerHeight={state.messagesContainerHeight as number}
         />
         {_renderChatFooter()}
       </Reanimated.View>

src/MessageContainer.tsx

@@ -12,6 +12,7 @@ import {
   StyleProp,
   ViewStyle,
   Platform,
+  Dimensions,
 } from 'react-native'
 
 import { LoadEarlier, LoadEarlierProps } from './LoadEarlier'
@@ -64,8 +65,7 @@ const styles = StyleSheet.create({
   },
 })
 
-const DEFAULT_ESTIMATED_ITEM_SIZE = 150
-
+const screenWidth = Dimensions.get('screen').height
 export interface MessageContainerProps<TMessage extends IMessage> {
   messages?: TMessage[]
   isTyping?: boolean
@@ -89,6 +89,7 @@ export interface MessageContainerProps<TMessage extends IMessage> {
   onQuickReply?(replies: Reply[]): void
   infiniteScroll?: boolean
   isLoadingEarlier?: boolean
+  listContainerHeight: number
 }
 
 interface State {
@@ -118,6 +119,7 @@ export default class MessageContainer<
     scrollToBottomStyle: {},
     infiniteScroll: false,
     isLoadingEarlier: false,
+    listContainerHeight: 0,
   }
 
   static propTypes = {
@@ -139,6 +141,7 @@ export default class MessageContainer<
     alignTop: PropTypes.bool,
     scrollToBottomStyle: StylePropType,
     infiniteScroll: PropTypes.bool,
+    listContainerHeight: PropTypes.number,
   }
 
   state = {
@@ -338,7 +341,6 @@ export default class MessageContainer<
         }
       >
         <FlashList
-          estimatedItemSize={DEFAULT_ESTIMATED_ITEM_SIZE}
           ref={this.props.forwardRef}
           extraData={[this.props.extraData, this.props.isTyping]}
           keyExtractor={this.keyExtractor}
@@ -359,6 +361,10 @@ export default class MessageContainer<
           onLayout={this.onLayoutList}
           onEndReached={this.onEndReached}
           onEndReachedThreshold={0.1}
+          estimatedListSize={{
+            height: Math.floor(this.props.listContainerHeight),
+            width: screenWidth,
+          }}
           {...this.props.listViewProps}
         />
         {this.state.showScrollBottom && this.props.scrollToBottom

yarn.lock

@@ -8315,14 +8315,13 @@ [email protected]:
   dependencies:
     prop-types "^15.7.x"
 
-react-native-reanimated@~2.14.4:
-  version "2.14.4"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz#3fa3da4e7b99f5dfb28f86bcf24d9d1024d38836"
-  integrity sha512-DquSbl7P8j4SAmc+kRdd75Ianm8G+IYQ9T4AQ6lrpLVeDkhZmjWI0wkutKWnp6L7c5XNVUrFDUf69dwETLCItQ==
+react-native-reanimated@2.17.0:
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.17.0.tgz#eae2308235961cdd79810e01dfdd7e88b1ae5b5c"
+  integrity sha512-bVy+FUEaHXq4i+aPPqzGeor1rG4scgVNBbBz21ohvC7iMpB9IIgvGsmy1FAoodZhZ5sa3EPF67Rcec76F1PXlQ==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"
-    convert-source-map "^1.7.0"
     invariant "^2.2.4"
     lodash.isequal "^4.5.0"
     setimmediate "^1.0.5"