Official Demo doesn't work

[cw1997]

Description

Related to

• Components
• Demo
• Docs
• Typings

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.'

More Info

Code snippet

Screenshots/Video

Environment

• React Native:
• React Native UI Lib:

Affected platforms

• Android
• iOS
• Web

[stereobooster]

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