varnitgoyal95/address-verification-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TP-30070 | Flash list integration

Browse Source
This commit is contained in:
Aman Chaturvedi
2023-05-24 13:26:55 +05:30
parent 45eec3c629
commit d708dc1b6d
3 changed files with 59 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
package.json
View File

@@ -41,6 +41,7 @@
"@react-navigation/native-stack": "6.9.4",
"@reduxjs/toolkit": "1.9.1",
"@sentry/browser": "7.29.0",
"@shopify/flash-list": "^1.4.3",
"@supersami/rn-foreground-service": "^2.1.0",
"appcenter": "^4.4.5",
"appcenter-analytics": "^4.4.5",
@@ -51,6 +52,7 @@
"react": "18.1.0",
"react-hook-form": "7.40.0",
"react-native": "0.70.6",
"react-native-blob-util": "0.17.3",
"react-native-call-log": "2.1.2",
"react-native-code-push": "7.1.0",
"react-native-contacts": "7.0.5",
@@ -72,11 +74,10 @@
"react-native-toast-message": "2.1.5",
"react-native-vector-icons": "9.2.0",
"react-native-version-number": "0.3.6",
"react-native-webview": "12.0.2",
"react-redux": "8.0.5",
"redux": "4.2.0",
"redux-persist": "6.0.0",
"react-native-webview": "12.0.2",
"react-native-blob-util": "0.17.3"
"redux-persist": "6.0.0"
},
"devDependencies": {
"@babel/core": "7.12.9",
@@ -100,6 +101,7 @@
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "17.0.0",
"eslint-config-prettier": "^8.8.0",
"eslint-config-prettier-react": "0.0.24",
"eslint-config-standard-with-typescript": "^34.0.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jsx-a11y": "6.6.1",
@@ -115,7 +117,6 @@
"miragejs": "0.1.47",
"prettier": "^2.8.7",
"react-test-renderer": "18.1.0",
"eslint-config-prettier-react": "0.0.24",
"typescript": "4.8.3"
},
"jest": {

48
src/screens/allCases/CasesList.tsx
View File

@@ -1,15 +1,15 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import {
Animated,
ListRenderItem,
ListRenderItemInfo,
Modal,
NativeScrollEvent,
NativeSyntheticEvent,
StyleSheet,
View,
VirtualizedList,
} from 'react-native';
import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
import { GenericStyles, SCREEN_WIDTH } from '../../../RN-UI-LIB/src/styles';
import { COLORS } from '../../../RN-UI-LIB/src/styles/colors';
import { RootState } from '../../store/store';
import { CaseTypes, ICaseItem, ICaseItemCaseDetailObj } from './interface';
@@ -35,6 +35,7 @@ import { evaluateFilterForCases } from '../../components/screens/allCases/allCas
import { debounce } from '../../components/utlis/commonFunctions';
import { getCurrentScreen } from '../../components/utlis/navigationUtlis';
import { useFocusEffect } from '@react-navigation/native';
import { FlashList } from '@shopify/flash-list';
export const getItem = (item: Array<ICaseItem>, index: number) => item[index];
@@ -200,6 +201,8 @@ const CasesList: React.FC<ICasesList> = ({ casesList = [], isVisitPlan }) => {
setShowFilterModal(!showFilterModal);
};
const listStyle = quickFiltersPresent ? styles.listWithQuickFilters : styles.list;
return (
<View style={[GenericStyles.fill, styles.container]}>
<CaseListHeader
@@ -224,21 +227,22 @@ const CasesList: React.FC<ICasesList> = ({ casesList = [], isVisitPlan }) => {
]}
></Animated.View>
) : null}
<VirtualizedList
data={filteredCasesListWithCTA}
scrollEventThrottle={16}
onScroll={handleListScroll}
contentContainerStyle={[
filteredCasesListWithCTA.length ? null : GenericStyles.fill,
quickFiltersPresent ? styles.listWithQuickFilters : styles.list,
]}
initialNumToRender={4}
renderItem={renderListItem}
keyExtractor={(item) => item.caseReferenceId}
getItemCount={(item) => item.length}
getItem={getItem}
ListEmptyComponent={listEmptyComponent}
/>
<View style={{ flex: 1 }}>
{filteredCasesListWithCTA.length ? (
<FlashList
data={filteredCasesListWithCTA}
scrollEventThrottle={16}
contentContainerStyle={listStyle}
onScroll={handleListScroll}
renderItem={renderListItem}
ListEmptyComponent={listEmptyComponent}
estimatedItemSize={200}
estimatedListSize={{ height: 300, width: SCREEN_WIDTH }}
/>
) : (
listEmptyComponent
)}
</View>
<Modal
animationType="slide"
animated
@@ -279,14 +283,12 @@ const styles = StyleSheet.create({
opacity: 0.6,
},
list: {
marginHorizontal: 12,
marginTop: HEADER_HEIGHT_MAX,
paddingBottom: HEADER_HEIGHT_MAX + 10,
paddingHorizontal: 12,
paddingTop: HEADER_HEIGHT_MAX,
},
listWithQuickFilters: {
marginHorizontal: 12,
marginTop: HEADER_HEIGHT_MAX_WITH_QUICK_FILTERS,
paddingBottom: HEADER_HEIGHT_MAX_WITH_QUICK_FILTERS + 10,
paddingHorizontal: 12,
paddingTop: HEADER_HEIGHT_MAX_WITH_QUICK_FILTERS,
},
});

31
yarn.lock
View File

@@ -1771,6 +1771,14 @@
"@sentry/types" "7.29.0"
tslib "^1.9.3"
"@shopify/flash-list@^1.4.3":
version "1.4.3"
resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-1.4.3.tgz#b7a4fe03d64f3c5ce9646859b49b9d95307f203d"
integrity sha512-jtIReAbwWzYBV0dQ6Io9wBX+pD0C4qQFMrb5/fkEvX8PYDgBl5KRYvpfr9WLLj8CV2Jsn1X0mYOsB+ysWrI/8g==
dependencies:
recyclerlistview "4.2.0"
tslib "2.4.0"
"@sideway/address@^4.1.3":
version "4.1.4"
resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -6062,7 +6070,7 @@ lodash.compact@^3.0.1:
resolved "https://registry.yarnpkg.com/lodash.compact/-/lodash.compact-3.0.1.tgz#540ce3837745975807471e16b4a2ba21e7256ca5"
integrity sha512-2ozeiPi+5eBXW1CLtzjk8XQFhQOEMwwfxblqeq6EGyTxZJ1bPATqilY0e6g2SLQpP4KuMeuioBhEnWz5Pr7ICQ==
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 sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@@ -7407,7 +7415,7 @@ prompts@^2.0.1, prompts@^2.4.0:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.7.2, prop-types@^15.8.0, prop-types@^15.8.1:
prop-types@15.8.1, prop-types@^15.7.2, prop-types@^15.8.0, 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==
@@ -7872,6 +7880,15 @@ recursive-fs@^2.1.0:
resolved "https://registry.yarnpkg.com/recursive-fs/-/recursive-fs-2.1.0.tgz#1e20cf7836b292ed81208c4817550a58ad0e15ff"
integrity sha512-oed3YruYsD52Mi16s/07eYblQOLi5dTtxpIJNdfCEJ7S5v8dDgVcycar0pRWf4IBuPMIkoctC8RTqGJzIKMNAQ==
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"
redux-persist@6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
@@ -9004,6 +9021,11 @@ tr46@~0.0.3:
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
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==
tsconfig-paths@^3.14.1:
version "3.14.1"
resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
@@ -9014,6 +9036,11 @@ tsconfig-paths@^3.14.1:
minimist "^1.2.6"
strip-bom "^3.0.0"
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, tslib@^1.9.3:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"