kylefang/react-native-chat-ui
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-chat-ui.git synced 2026-01-12 22:50:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: use flashlist

Browse Source
This commit is contained in:
Kyle Fang
2023-03-11 16:45:07 +08:00
parent 115871e058
commit ea5e2394e8
3 changed files with 52 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -48,6 +48,7 @@
"@babel/core": "^7.15.8",
"@babel/runtime": "^7.15.4",
"@react-native-community/eslint-config": "^3.0.1",
"@shopify/flash-list": "^1.4.1",
"@testing-library/react-native": "^8.0.0",
"@types/jest": "^27.0.2",
"@types/react-native": "^0.66.0",
@@ -68,7 +69,8 @@
},
"peerDependencies": {
"react": "*",
"react-native": "*"
"react-native": "*",
"@shopify/flash-list": "*"
},
"jest": {
"collectCoverage": true,

13
src/components/Chat/Chat.tsx
View File

@@ -36,6 +36,7 @@ import { Input, InputAdditionalProps, InputTopLevelProps } from '../Input'
import { Message, MessageTopLevelProps } from '../Message'
import ImageView from './ImageView'
import styles from './styles'
import { FlashList } from "@shopify/flash-list";
// Untestable
/* istanbul ignore next */
@@ -149,7 +150,7 @@ export const Chat = ({
const { onLayout, size } = useComponentSize()
const animationRef = React.useRef(false)
const list = React.useRef<FlatList<MessageType.DerivedAny>>(null)
const list = React.useRef<FlashList<MessageType.DerivedAny>>(null)
const insets = useSafeAreaInsets()
const [isImageViewVisible, setIsImageViewVisible] = React.useState(false)
const [isNextPageLoading, setNextPageLoading] = React.useState(false)
@@ -355,7 +356,7 @@ export const Chat = ({
const renderScrollable = React.useCallback(
(panHandlers: GestureResponderHandlers) => (
<FlatList
<FlashList
automaticallyAdjustContentInsets={false}
contentContainerStyle={[
flatListContentContainer,
@@ -364,13 +365,13 @@ export const Chat = ({
justifyContent: chatMessages.length !== 0 ? undefined : 'center',
paddingTop: insets.bottom,
},
]}
initialNumToRender={10}
] as any}
// initialNumToRender={10}
ListEmptyComponent={renderListEmptyComponent}
ListFooterComponent={renderListFooterComponent}
ListHeaderComponent={<View />}
ListHeaderComponentStyle={header}
maxToRenderPerBatch={6}
// maxToRenderPerBatch={6}
onEndReachedThreshold={0.75}
style={flatList}
showsVerticalScrollIndicator={false}
@@ -379,7 +380,7 @@ export const Chat = ({
inverted
keyboardDismissMode='interactive'
keyExtractor={keyExtractor}
onEndReached={handleEndReached}
onEndReached={handleEndReached as any}
ref={list}
renderItem={renderItem}
{...panHandlers}

48
yarn.lock
View File

@@ -1260,6 +1260,14 @@
resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
"@shopify/flash-list@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-1.4.1.tgz#145ae2527ecec008789401db5f20cdfbbc495523"
integrity sha512-yM5dlhqolO/R8FKomqCrSYz0Cc82vJDikxhbu1CXXGp3rPvo/ceP9jJyKueW96SXHsn/87fcSq2BjztWjlp74Q==
dependencies:
recyclerlistview "4.2.0"
tslib "2.4.0"
"@sideway/address@^4.1.0":
version "4.1.2"
resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
@@ -4605,7 +4613,7 @@ lodash.clonedeep@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
lodash.debounce@^4.0.8:
lodash.debounce@4.0.8, lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
@@ -5583,6 +5591,15 @@ prompts@^2.0.1, prompts@^2.4.0:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.13.1"
prop-types@^15.7.2, prop-types@^15.7.x:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -5633,7 +5650,7 @@ react-devtools-core@^4.13.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-is@^16.8.1:
react-is@^16.13.1, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -5765,6 +5782,15 @@ recast@^0.20.3:
source-map "~0.6.1"
tslib "^2.0.1"
recyclerlistview@4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-4.2.0.tgz#a140149aaa470c9787a1426452651934240d69ef"
integrity sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==
dependencies:
lodash.debounce "4.0.8"
prop-types "15.8.1"
ts-object-utils "0.0.5"
regenerate-unicode-properties@^9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
@@ -6573,11 +6599,21 @@ tr46@^2.1.0:
dependencies:
punycode "^2.1.1"
ts-object-utils@0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/ts-object-utils/-/ts-object-utils-0.0.5.tgz#95361cdecd7e52167cfc5e634c76345e90a26077"
integrity sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA==
"tslib@1 || 2", tslib@^2.0.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
tslib@2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
tslib@^1.8.1:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -6650,10 +6686,10 @@ typedarray-to-buffer@^3.1.5:
dependencies:
is-typedarray "^1.0.0"
typescript@^4.4.4:
version "4.4.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
typescript@^4.9.5:
version "4.9.5"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
uglify-es@^3.1.9:
version "3.3.9"