Closed
Description
- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
Environment:
OS: Linux 4.15
Node: 8.9.4
Yarn: 1.5.1
npm: 6.4.1
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
Description
I use flat list. And until yesterday it worked. But now scroll very slow. I dont now what to do.
package.json
"dependencies": {
"@ptomasroos/react-native-idfa": "^2.1.0",
"axios": "^0.18.0",
"eventemitter3": "^3.1.0",
"moment": "^2.22.1",
"native-base": "^2.4.2",
"query-string": "^6.1.0",
"ramda.always": "^0.25.0",
"ramda.append": "^0.25.0",
"ramda.assoc": "^0.25.0",
"ramda.assocpath": "^0.25.0",
"ramda.concat": "^0.25.0",
"ramda.curry": "^0.25.0",
"ramda.evolve": "^0.25.0",
"ramda.flip": "^0.25.0",
"ramda.inc": "^0.25.0",
"ramda.merge": "^0.25.0",
"ramda.prepend": "^0.25.0",
"ramda.uniq": "^0.25.0",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-action-sheet": "^2.1.0",
"react-native-android-location-services-dialog-box": "^2.5.1",
"react-native-appsflyer": "^1.2.12",
"react-native-code-input": "^1.0.6",
"react-native-device-info": "^0.22.5",
"react-native-fbsdk": "0.8.0",
"react-native-geocoder": "^0.5.0",
"react-native-geolocation-service": "^1.1.0",
"react-native-gifted-chat": "git+https://github.com/userbq201/react-native-gifted-chat",
"react-native-google-places-autocomplete": "^1.3.6",
"react-native-image-crop-picker": "git+https://github.com/userbq201/react-native-image-crop-picker",
"react-native-maps": "^0.21.0",
"react-native-material-textfield": "^0.12.0",
"react-native-modal-translucent": "^1.1.5",
"react-native-onesignal": "^3.2.5",
"react-native-page-control": "^1.1.1",
"react-native-permissions": "^1.1.1",
"react-native-slider": "^0.11.0",
"react-native-splash-screen": "^3.0.6",
"react-native-status-bar-height": "^2.1.0",
"react-native-svg": "^6.3.1",
"react-native-swiper-flatlist": "^1.0.8",
"react-native-text-input-mask": "^0.8.0",
"react-native-triangle": "^0.0.9",
"react-native-typing-effect": "https://github.com/userbq201/react-native-typing-effect",
"react-navigation": "^1.5.11",
"react-navigation-redux-helpers": "^1.1.2",
"react-navigation-transitions": "^1.0.5",
"react-redux": "^5.0.7",
"recompose": "^0.27.0",
"redux": "^4.0.0",
"redux-symbiote": "^2.0.3",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"rn-wheel-picker": "https://github.com/userbq201/rn-wheel-picker",
"shallow-equal": "^1.0.0",
"symbiote-fetching": "^0.7.0",
"validate.js": "^0.12.0"
},
"devDependencies": {
"@atomix/eslint-config-react": "^6.4.0",
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.3",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-react-native": "4.0.0",
"deepmerge": "^2.1.0",
"eslint": "^4.19.1",
"jest": "22.4.3",
"lodash.get": "^4.4.2",
"prop-types": "^15.6.1",
"react-addons-perf": "^15.4.2",
"react-native-sentry": "^0.38.1",
"react-navigation-slide-from-right-transition": "^1.0.4",
"react-test-renderer": "16.3.1",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native"
}
}
Screen code
export const view = ({
loader,
page,
applyFetchingStatus,
navigation,
list,
onGetVacanciesWithResetState,
handleMore,
token,
applyVacancyHandler,
isEmptyForm,
refs,
showModalHandler,
}) => {
const isMainLoaderActive = (
loader === fetchStatus.loading
&& page === 0
)
const isFooterLoaderActive = (
loader === fetchStatus.loading
&& page > 0
)
return (
<ErrorBoundary>
{(applyFetchingStatus === fetchStatus.loading) && (
<Loader fullPage />
)}
<Container>
<VacancyHeader
navigate={navigation.navigate}
/>
<FlatList
onScrollToIndexFailed={noop}
ref={(c) => refs.create('flatList', c)}
data={list}
keyExtractor={({ id, rise = false }) => `${id}-${rise}`}
onScroll={showModalHandler}
refreshing={isMainLoaderActive}
onRefresh={onGetVacanciesWithResetState}
onEndReached={handleMore}
onEndReachedThreshold={0.3}
contentContainerStyle={{ paddingBottom: 20 }}
ListHeaderComponent={(
<UserLocation
navigation={navigation}
token={token}
style={{ paddingTop: 10 }}
/>
)}
ListFooterComponent={(isFooterLoaderActive && (
<Loader
style={[
styles.loader,
styles.footerLoader,
]}
/>
))}
renderItem={({ item, index }) => {
const cardProps = {
navigation,
data: item,
applyVacancy: applyVacancyHandler,
}
if (index === 2) {
return (
<React.Fragment>
{(!token || isEmptyForm) && (
<Experience
navigation={navigation}
/>
)}
<VacancyCard {...cardProps} />
</React.Fragment>
)
}
return (
<VacancyCard {...cardProps} />
)
}}
/>
</Container>
</ErrorBoundary>
)
}This problem appears if above it has view with style or it contain onResfresh prop