creativetimofficial / ct-argon-pro-react-native

Premium React Native App Template with Argon Design
https://www.creative-tim.com/product/argon-pro-react-native
9 stars 7 forks source link

Having issues just launching the package #9

Open KCAmplify opened 2 years ago

KCAmplify commented 2 years ago

Prerequisites

Please answer the following questions for yourself before submitting an issue.

Expected Behavior

Please describe the behavior you are expecting: I should be able to launch the pro reactive native project as downloaded.

Current Behavior

What is the current behavior? It keeps coming up with errors. The pro version will need to be updated like the basic version as the pro version is behind the basic version (expo version 40 vs 42). Then, it seems like lots of dependencies are missing as I keep getting dependency issue. Then, there are some exceptions that's being thrown, which I cannot resolve.

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

  1. It seems like the pro version is behind the basic version. For example, package.json indicates expo version is 40 for pro version whereas the free version is 42: https://github.com/creativetimofficial/argon-react-native/blob/master/package.json. This results in us not being able to use the latest expo and having to manually download and install expo 2.18.7 to run version 40.
  2. First issue: expo-linear-gradient does not exist (so I go ahead and install expo-linear-gradient)
  3. Second issue: expo-file-system does not exist (so install expo-file-system)
  4. Third issue: @unimodules/react-native-adapter does not exist (so install @unimodules/react-native-adapter)
  5. Fourth issue: expo-modules-core does not exist (so install expo-modules-core)
  6. Then component exception. Giving up after this. Last failure log corresponds to this issue.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. Download the latest pro argon package from the website.
  2. Follow steps in https://demos.creative-tim.com/argon-pro-react-native/docs/#/install, i.e. npm install -g expo-cli and npm install then expo start. Before the last step, install expo version 2.18.7, otherwise, latest expo complains that it cannot run version 40 dependency. (request: update the dependency)
  3. You will start seeing all the errors after that. I try to resolve these issues, but they keep coming up with issues.

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Failure Logs

Please include any relevant log snippets or files here.

This error is located at: in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39) at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException at node_modules\react-native\Libraries\Core\ReactFiberErrorDialog.js:43:2 in showErrorDialog at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15257:32 in logCapturedError at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15361:20 in logError at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16597:12 in update.callback at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7106:2 in callCallback at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7127:20 in commitUpdateQueue at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15801:25 in commitLifeCycles at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18483:29 in commitRootImpl at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18317:17 in commitRoot at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1 at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20527:14 in updateContainer at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21068:17 in render at node_modules\react-native\Libraries\ReactNative\renderApplication.js:54:4 in renderApplication at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:213:4 in runApplication at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in guard$argument_0 at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error is located at: in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39) at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError at node_modules\expo\node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0 at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at node_modules\regenerator-runtime\runtime.js:294:29 in invoke at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at node_modules\regenerator-runtime\runtime.js:155:27 in invoke at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0 at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in guard$argument_0 at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue

KCAmplify commented 2 years ago

Could someone help me with this issue? I have premium support and it's been almost a week.

KCAmplify commented 2 years ago

Is anyone monitoring this or is there no such thing as premium support?

masarbi commented 2 years ago

I want a refund as I can see there are no support to help this huge problem.

rarestoma commented 2 years ago

Hi @KCAmplify, @masarbi,

Thank you for working with our products and sorry for our late response.

Can you please replace the package.json with the following content:

{
  "name": "argon-pro-react-native",
  "version": "1.6.0",
  "description": "Argon Pro React Native, based on Argon Design System. Coded by Creative Tim",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/creativetimofficial/argon-pro-react-native.git"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.5.1",
    "@react-navigation/compat": "^5.1.25",
    "@react-navigation/drawer": "5.12.4",
    "@react-navigation/native": "5.9.3",
    "@react-navigation/stack": "5.14.3",
    "expo": "42.0.0",
    "expo-app-loading": "^1.0.1",
    "expo-asset": "~8.2.1",
    "expo-font": "9.2.1",
    "expo-modules-core": "^0.6.4",
    "galio-framework": "^0.7.1",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-modal-dropdown": "git+https://github.com/siemiatj/react-native-modal-dropdown.git",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "~2.15.2",
    "expo-linear-gradient": "~9.2.0",
    "react-native-safe-area-context": "3.2.0"
  },
  "devDependencies": {
    "babel-preset-expo": "8.3.0"
  },
  "keywords": [
    "argon react native",
    "argon design system",
    "argon app react native",
    "argon iOS",
    "react native iOS",
    "creative tim",
    "argon Android",
    "react native ui kit",
    "react native expo",
    "freebie",
    "react native argon design",
    "react native galio",
    "galio argon pro",
    "galio react native free app",
    "argon expo react native",
    "react native ui template"
  ],
  "author": "Creative Tim <hello@creative-tim.com> (https://www.creative-tim.com/)",
  "bugs": {
    "url": "https://github.com/creativetimofficial/ct-argon-pro-react-native/issues"
  },
  "homepage": "https://demos.creative-tim.com/argon-pro-react-native"
}

Now the application should work properly.

Please let me know if it works.

Thank you, Rares

jenschr commented 2 years ago

According to the Change log, the files were updated 2022-04-26, but what is downloadable from the creativetim website does not reflect the changes. The downloadable file argon-pro-react-native-v1.7.0.zip fails on "npm install". The fix above does indees make the project run, but it also downgrades a ton of packages so the project has 15 vulnerabilities (5 moderate, 10 high). This is not really a good solution...

jenschr commented 2 years ago

Correction. This config produces the error "This project uses SDK 42.0.0 . but this version of Expo Go only supports the following SDKs: 45.0.0, 44.0.0, 43.0.0. To load the proejct, it must be updated to a supported SDK version or an older version of Expo Go must be used."

After 40 minutes of fiddling, I can finally get it up and running on the emulator, but it crashes on a live device since this will always use a more recent version of Expo on the phone itself. It does run, but really shabby on my i9 MBP with 16gb RAM that has practically just the browser running apart from VSCode. This can't be right? As I'm using the app, there's also lots of error being output that causes the app to reload (and thus making it unusable again, see below).

I honesly think this isn't worth the money. I'll ask for a refund like the previous user.

You started loading the font "open-sans-bold", but used it before it finished loading. You need to wait for Font.loadAsync to complete before using the font.
at node_modules/expo-font/build/Font.js:24:16 in processFontFamily
at node_modules/react/cjs/react.development.js:471:2 in Component.prototype.setState
at App.js:92:6 in _handleFinishLoading
at node_modules/expo-app-loading/build/AppLoading.js:41:12 in startLoadingAppResourcesAsync

Drawer Navigator: 'drawerContentOptions' is deprecated. Migrate the options to 'screenOptions' instead.

Place the following in 'screenOptions' in your code to keep current behavior:

{}

See https://reactnavigation.org/docs/drawer-navigator#options for more details.
at http://10.0.0.24:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:166381:37 in warnOnce
at node_modules/@react-navigation/drawer/src/navigators/createDrawerNavigator.tsx:66:4 in DrawerNavigator

Found screens with the same name nested inside one another. Check:

App > Home, App > Home > Home

This can cause confusing behavior during navigation. Consider using unique names for each screen instead.
at node_modules/@react-navigation/core/src/BaseNavigationContainer.tsx:363:14 in React.useEffect$argument_0
at node_modules/react/cjs/react.development.js:471:2 in Component.prototype.setState