App startup time slow down

[fungilation]

This library is great and I'm using in my app. Having cross platform access to full and updated SQLite, locally is powerful.

But I have issue with app startup time now, looking for pointers on how this could be optimized.

Before installing and linking on my RN app (0.61.5), cold app start from iOS home screen, TTI to first screen, was 1.9s. With react-native-sqlite-2 added and linked, TTI jumped to 4.8s. This is without import in JS code, so inline requires vs import makes no difference. The slowdown is just in the native library being linked in Xcode and binary generated.

Any idea why the significant slowdown, even on empty database, just by having the library natively linked?

[craftzdog]

That's weird. My app uses this library and it launches mostly within 1s. It looks like your app already takes too long time for launching (> 2s is unusual). Maybe you have other issue like bundled assets or something. As you can see in the source code of the library, it is just a wrapper of sqlite. So it shouldn't be a cause of your issue.

[fungilation]

My package.json below for reference. The TTI increased from 1.9s to 4.8s is solely before and after adding react-native-sqlite-2 (typo in my first comment, I meant 1.9 not 2.9s). So ya, I don't get it either.

Also note that my TTI measurement is from tapping app icon to first screen shown and interactive.

{
  "name": "wonderswipe",
  "version": "1.6.0",
  "private": true,
  "scripts": {
    "ios": "react-native run-ios",
    "android": "react-native run-android",
    "start": "react-native start",
    "postinstall": "patch-package ; npx jetify",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@postlight/mercury-parser": "^2.1.1",
    "@react-native-community/async-storage": "^1.3.3",
    "@react-native-community/blur": "^3.3.1",
    "@react-native-community/netinfo": "^5.0.0",
    "@react-native-community/viewpager": "^3.0.0",
    "@sentry/react-native": "^1.0.5",
    "babel-plugin-idx": "^2.4.0",
    "buffer": "^5.2.1",
    "he": "^1.1.0",
    "iconv-lite": "^0.5.0",
    "idx": "^2.5.5",
    "lodash": "^4.17.2",
    "moment": "^2.19.0",
    "moment-timezone": "^0.5.10",
    "node-summary": "../node-summary",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-actionsheet": "^2.4.2",
    "react-native-autocomplete-input": "^4.1.0",
    "react-native-cached-image": "../react-native-cached-image",
    "react-native-cheerio": "^1.0.0-rc.4",
    "react-native-code-push": "^5.3",
    "react-native-cronet": "^0.4.0",
    "react-native-custom-tabs": "^0.1.7",
    "react-native-easy-toast": "^1.0.9",
    "react-native-firebase": "5.5.6",
    "react-native-fit-image": "^1.4.8",
    "react-native-highlight-words": "^1.0.1",
    "react-native-keep-awake": "^4.0.0",
    "react-native-linear-gradient": "^2.5.5",
    "react-native-localize": "^1.1.4",
    "react-native-modalbox": "^2.0.0",
    "react-native-orientation": "^3.1.3",
    "react-native-parallax-scroll-view": "../react-native-parallax-scroll-view",
    "react-native-progress": "^4.0.0",
    "react-native-rate": "^1.0.8",
    "react-native-render-html": "^4.1.2",
    "react-native-responsive-screen": "^1.2.2",
    "react-native-safari-view": "^2.0.0",
    "react-native-sha256": "^1.1.1",
    "react-native-sqlite-2": "^3.0.1",
    "react-native-status-bar-size": "^0.3.2",
    "react-native-swiper": "^1.5.14",
    "react-native-tooltip": "marcosrdz/react-native-tooltip",
    "react-native-tts": "^3.0.0",
    "react-native-vector-icons": "^6.4.2",
    "react-native-webview": "^7.0.1",
    "react-redux": "^7.0.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.1.0",
    "rn-fetch-blob": "^0.11.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.9.0",
    "babel-plugin-minify-dead-code-elimination": "^0.5.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^6.5.1",
    "eslint-config-airbnb": "^18.0.0",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^2.0.1",
    "eslint-plugin-react-native": "^3.7.0",
    "jest": "^24.9.0",
    "jetifier": "^1.4.3",
    "metro-react-native-babel-preset": "^0.56.0",
    "patch-package": "^6.1.2",
    "postinstall-postinstall": "^2.0.0",
    "prettier": "^1.18.2",
    "redux-logger": "^3.0.6"
  }
}

[craftzdog]

If you could reproduce it on an empty project, I will look into it. If not, that's your project issue.

[fungilation]

Interesting. Indeed it turns out to be my own code, not due to inclusion of sqlite-2 lib natively. Thanks for your answer.

[craftzdog]

Okay. Let me know if you solved it, as it would be helpful for other people who stumbled on the same issue.

[fungilation]

Ya. It turns out to be my code change for enabling sharedCookiesEnabled in a WebView (react-native-webview) that opens on app launch. I mistook the long white screen (extra 3s) after splash to be native lib addition (with sqlite), but it turns out just sharedCookiesEnabled in existing WebView can cause that.

[craftzdog]

Good to hear you solved it and thank you for sharing it!