chubillkelvin / react-native-autoscroll-flatlist

An enhanced React Native <FlatList> component to provide auto-scrolling functionality.
MIT License
60 stars 10 forks source link

Not working with RN 0.66? #22

Open artstylee opened 2 years ago

artstylee commented 2 years ago

"react-native": "0.66.4",

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: motonative@0.0.1
npm ERR! Found: react-native@0.66.4
npm ERR! node_modules/react-native
npm ERR!   react-native@"0.66.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"0.64.2" from react-native-autoscroll-flatlist@1.11.0
npm ERR! node_modules/react-native-autoscroll-flatlist
npm ERR!   react-native-autoscroll-flatlist@"*" from the root project

and is it possible to add pagination on scroll top ?

chubillkelvin commented 2 years ago

Hi @artstylee the package has only been tested up to 0.64.2.

With the issue you indicated, let me work on the upgrade for the project!

Meanwhile, could you elaborate a little on what do you mean by pagination?

Correct me if I'm wrong, but I would suppose using the FlatList component's intention is to implement infinite scroll-like experience. This usually does not go together with pagination.

artstylee commented 2 years ago

ye i mean infinite scroll... you can see it in chats like telegram or discord, when you reach the top of the flatlist, the old messages must be load

chubillkelvin commented 2 years ago

@artstylee since this project extends from the official FlatList component, you should be able to implement infinite scroll normally.

I do not plan to implement this functionality into this project because there can be many different ways one can implement infinite scroll and there is no way I can easily accommodate all of them.

With that said, here is a repo I made earlier this year which might be a helpful reference for you to implement such functionality.

If you actually found a constraint from this library that stops you from implementing this feature, please do let me know. Thanks!

chubillkelvin commented 2 years ago

@artstylee I have just tried creating a brand-new app with react-native init using RN 0.66.

The app seems to work fine for me and I cannot reproduce the error you stated:

Screenshot 2021-12-22 at 9 00 05 PM

Maybe you should try removing the node_modules folder and try doing npm install or yarn install again?

If that does not work for you, can you please provide me with a minimum reproducible example so I can look into this issue?

Thank you!

artstylee commented 2 years ago

reinstalled node_modules
still got the error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: motonative@0.0.1
npm ERR! Found: react-native@0.66.4
npm ERR! node_modules/react-native
npm ERR!   react-native@"0.66.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"0.64.2" from react-native-autoscroll-flatlist@1.11.0
npm ERR! node_modules/react-native-autoscroll-flatlist
npm ERR!   react-native-autoscroll-flatlist@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\x4r7\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\x4r7\AppData\Local\npm-cache\_logs\2021-12-22T16_20_31_736Z-debug.log

eresolve-report.txt

# npm resolution error report

2021-12-22T16:20:31.727Z

While resolving: motonative@0.0.1
Found: react-native@0.66.4
node_modules/react-native
  react-native@"0.66.4" from the root project

Could not resolve dependency:
peer react-native@"0.64.2" from react-native-autoscroll-flatlist@1.11.0
node_modules/react-native-autoscroll-flatlist
  react-native-autoscroll-flatlist@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "react-native",
    "version": "0.66.4",
    "whileInstalling": {
      "name": "motonative",
      "version": "0.0.1",
      "path": "D:\\docs\\proj\\react-express-jwt-full\\motoNative"
    },
    "location": "node_modules/react-native",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "react-native",
        "spec": "0.66.4",
        "from": {
          "location": "D:\\docs\\proj\\react-express-jwt-full\\motoNative"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "react-native",
    "spec": "0.66.4",
    "from": {
      "location": "D:\\docs\\proj\\react-express-jwt-full\\motoNative"
    }
  },
  "edge": {
    "type": "peer",
    "name": "react-native",
    "spec": "0.64.2",
    "error": "INVALID",
    "from": {
      "name": "react-native-autoscroll-flatlist",
      "version": "1.11.0",
      "whileInstalling": {
        "name": "motonative",
        "version": "0.0.1",
        "path": "D:\\docs\\proj\\react-express-jwt-full\\motoNative"
      },
      "location": "node_modules/react-native-autoscroll-flatlist",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "react-native-autoscroll-flatlist",
          "spec": "*",
          "from": {
            "location": "D:\\docs\\proj\\react-express-jwt-full\\motoNative"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

=/ i can try to force it but that doesnt look like normal installation

package.json

  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.14",
    "@react-native-cookies/cookies": "^6.0.11",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-flipper": "^0.125.0",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.3.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "rn-flipper-async-storage-advanced": "^1.0.4",
    "socket.io-client": "^4.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
chubillkelvin commented 2 years ago

@artstylee on a closer look, this seems to be an error due to new npm behavior. You can read more here.

In short, you can fix the error by doing npm install --legacy-peer-deps.

What does it do?

Hope this helps!

chubillkelvin commented 2 years ago

@artstylee I have published v1.11.1 which has the peerDependencies updated. I hope this solves the problem for you.

If not, I would recommend you try the --legacy-peer-deps solution in the meantime.

artstylee commented 2 years ago

@artstylee I have published v1.11.1 which has the peerDependencies updated. I hope this solves the problem for you.

If not, I would recommend you try the --legacy-peer-deps solution in the meantime.

the package from npm still fires an error so i just did npm install --save react-native-autoscroll-flatlist --legacy-peer-deps thanks