FletList scroll with 5 fps

[dmitryshelomanov]

• 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

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The "⏪Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[dmitryshelomanov]

latest release not helped

[dmitryshelomanov]

fb sdk bug