search

wix / react-native-ui-lib

UI Components Library for React Native
https://wix.github.io/react-native-ui-lib/
MIT License
6.44k stars 706 forks source link

Official Demo doesn't work #2199

Open cw1997 opened 2 years ago

cw1997 commented 2 years ago

Description

Related to

Steps to reproduce

Expected behavior

It can work normally

Actual behavior

Expo reports 'This Snack was written in an older Expo version that is not longer supported. We have upgraded the Expo version to 46.0.0. You might need to do some manual changes to make the Snack work correctly.' image

More Info

Code snippet

Screenshots/Video

Environment

Affected platforms

stereobooster commented 1 year ago

Don't want to create separate issue. Web demo doesn't work either

npm run start:web

> react-native-ui-lib@7.0.0 start:web
> npm --prefix webDemo run start

> web-demo-app@0.1.0 start
> webpack-dev-server --config ./webpack.config.js

sh: webpack-dev-server: command not found

I thought I need to npm install in webDemo, but it gives following error:

cd webDemo
npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: web-demo-app@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"18.2.0" from react-native@0.72.4
npm ERR! node_modules/react-native
npm ERR!   peer react-native@">=0.59" from @react-native-community/netinfo@9.4.1
npm ERR!   node_modules/@react-native-community/netinfo
npm ERR!     @react-native-community/netinfo@"^9.3.0" 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.

then I tried

npm i --legacy-peer-deps
cd ..

then I got this error

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);

then

export NODE_OPTIONS=--openssl-legacy-provider
npm run start:web

which runs, but with errors


ERROR in ../node_modules/@shopify/flash-list/dist/MasonryFlashList.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/@shopify/flash-list/dist'
 @ ../node_modules/@shopify/flash-list/dist/MasonryFlashList.js 6:21-44
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts

ERROR in ../node_modules/@shopify/flash-list/dist/AnimatedFlashList.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/@shopify/flash-list/dist'
 @ ../node_modules/@shopify/flash-list/dist/AnimatedFlashList.js 4:21-44
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts

ERROR in ../node_modules/@shopify/flash-list/dist/FlashList.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/@shopify/flash-list/dist'
 @ ../node_modules/@shopify/flash-list/dist/FlashList.js 5:21-44
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts

ERROR in ../node_modules/@shopify/flash-list/dist/native/auto-layout/AutoLayoutViewNativeComponent.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/@shopify/flash-list/dist/native/auto-layout'
 @ ../node_modules/@shopify/flash-list/dist/native/auto-layout/AutoLayoutViewNativeComponent.js 3:21-44
 @ ../node_modules/@shopify/flash-list/dist/native/auto-layout/AutoLayoutView.js
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts

ERROR in ../node_modules/@shopify/flash-list/dist/native/config/PlatformHelper.web.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/@shopify/flash-list/dist/native/config'
 @ ../node_modules/@shopify/flash-list/dist/native/config/PlatformHelper.web.js 4:21-44
 @ ../node_modules/@shopify/flash-list/dist/FlashList.js
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts

ERROR in ../node_modules/recyclerlistview/dist/reactnative/core/StickyContainer.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/recyclerlistview/dist/reactnative/core'
 @ ../node_modules/recyclerlistview/dist/reactnative/core/StickyContainer.js 32:21-44
 @ ../node_modules/recyclerlistview/sticky/index.js
 @ ../node_modules/@shopify/flash-list/dist/FlashList.js
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts

ERROR in ../node_modules/recyclerlistview/dist/reactnative/core/RecyclerListView.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/recyclerlistview/dist/reactnative/core'
 @ ../node_modules/recyclerlistview/dist/reactnative/core/RecyclerListView.js 64:21-44
 @ ../node_modules/recyclerlistview/dist/reactnative/index.js
 @ ../node_modules/@shopify/flash-list/dist/FlashList.js
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts

ERROR in ../node_modules/recyclerlistview/dist/reactnative/core/sticky/StickyObject.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/recyclerlistview/dist/reactnative/core/sticky'
 @ ../node_modules/recyclerlistview/dist/reactnative/core/sticky/StickyObject.js 20:21-44
 @ ../node_modules/recyclerlistview/dist/reactnative/core/sticky/StickyFooter.js
 @ ../node_modules/recyclerlistview/dist/reactnative/core/StickyContainer.js
 @ ../node_modules/recyclerlistview/sticky/index.js
 @ ../node_modules/@shopify/flash-list/dist/FlashList.js
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts

ERROR in ../node_modules/recyclerlistview/dist/reactnative/platform/reactnative/scrollcomponent/ScrollComponent.js
Module not found: Error: Can't resolve 'react-native' in '/react-native-ui-lib/node_modules/recyclerlistview/dist/reactnative/platform/reactnative/scrollcomponent'
 @ ../node_modules/recyclerlistview/dist/reactnative/platform/reactnative/scrollcomponent/ScrollComponent.js 28:21-44
 @ ../node_modules/recyclerlistview/dist/reactnative/core/RecyclerListView.js
 @ ../node_modules/recyclerlistview/dist/reactnative/index.js
 @ ../node_modules/@shopify/flash-list/dist/FlashList.js
 @ ../node_modules/@shopify/flash-list/dist/index.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/FlashListPackage.js
 @ ./node_modules/react-native-ui-lib/src/optionalDependencies/index.web.js
 @ ./node_modules/react-native-ui-lib/src/services/HapticService.js
 @ ./node_modules/react-native-ui-lib/src/index.js
 @ ./src/App.tsx
 @ ./src/index.ts