React Native App Navigations working very very slowly - react-native

I have created a React Native App. Currently, I have just created views of the app, no redux as of now. Everything is hardcoded. I have mainly used Cards, Grid, List Views.
I am using native-base for designing purpose in my whole app. I contains SideMenu as well which I have created using Drawer of Native Base.
I am using react-native-router-flux for navigation.
I am using react native 0.52.2.
My App is working really very slowly (taking around 2-3 seconds to navigate) when I am keeping Cards, Grids, ListView on the Pages. If I remove these & just do navigation between pages using Buttons or Side Menu, the App is working fine. I have tested App in Android & iOS real devices & with release build in both the platforms.
Below is my package.json:
{
"name": "Test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.17.1",
"lodash": "^4.17.4",
"native-base": "^2.3.5",
"react": "16.2.0",
"react-native": "0.52.2",
"react-native-action-button": "^2.8.4",
"react-native-datepicker": "^1.6.0",
"react-native-easy-grid": "^0.1.17",
"react-native-modal": "^5.0.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-splash-screen": "^3.0.6",
"react-native-table-component": "^1.1.3",
"react-native-vector-icons": "^4.5.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.1.0",
"babel-preset-react-native": "4.0.0",
"jest": "22.1.4",
"react-test-renderer": "16.2.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}

Related

How to mock a function using detox in react-native

How to mock functions in react-native using detox.
I am using google sign in app and want to mock the function for google sign in
tried jest and #testinglibrary but there I am not able to get the elements by getText/getTestID for picker or other components. There is many things about testing in react-native but I am not able to find the right way to do it.
How to test a react native app where I am using google sign in and each page is fetching details about users from AWS database and displaying details for modification.
Currently i am using the following libraries
"#react-native-async-storage/async-storage": "^1.15.5",
"#react-native-google-signin/google-signin": "^7.0.0-alpha.3",
"#react-native-picker/picker": "^1.16.5",
"#react-navigation/bottom-tabs": "^6.0.4",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.0.4",
"add": "^2.0.6",
"react": "17.0.1",
"react-native": "0.64.2",
"react-native-elements": "^3.4.2",
"react-native-file-picker": "0.0.21",
"react-native-gesture-handler": "^1.10.3",
"react-native-pager-view": "^5.4.1",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.0",
"react-native-screens": "^3.5.0",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^8.1.0"
},
"devDependencies": {
"#babel/core": "^7.14.8",
"#babel/runtime": "^7.14.8",
"#react-native-community/eslint-config": "^3.0.0",
"#testing-library/react-native": "^8.0.0",
"babel-jest": "^27.0.6",
"detox": "^18.20.3",
"eslint": "^7.31.0",
"jest": "^27.0.6",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!#ngrx|(?!deck.gl)|ng-dynamic)"
]
},
"detox": {
"configurations": {
"android.emu.debug": {
"binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
"build": "cd android && gradlew clean assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
"type": "android.emulator",
"name": "Pixel_2_API_29"
}
},
"test-runner": "jest",
"testMatch": [
"<roots>/**/*.spec.js"
]
}
Have a look at the mocking guide for Detox.
Please note that you cannot apply mocking techniques familiar from the prior Jest experience, even though Detox runs on top of Jest, e.g.:
jest.mock('./src/myModule'); // NO, THIS WON'T WORK
All the mocking must be conducted with the help of Metro bundler, which powers React Native under the hood.

ReactNative Code not running on WEB (ReactCLI)

I am new to ReactNative world,
I am using ReactCLI (No Expo)
My Code running fine on Android Simulator, but don't know why it is not executing on WEB. (See attachment). I am using Windows 10.
Additionally,
I got URL (why my code not run in react-native code in web) that saying - It doesn't work. But as per the FACEBOOK guideline "React Native is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities."
So, what I am missing??
Below is my Package.JSON
"scripts": {
"android": "npx react-native run-android",
"ios": "react-native run-ios",
"start": "npx react-native start --reset-cache",
"test": "jest",
"lint": "eslint .",
"build-android": "cd ./android && ./gradlew clean && ./gradlew assembleRelease"
},
"pre-commit": [
"lint"
],
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/drawer": "^5.8.0",
"#react-navigation/native": "^5.4.3",
"#react-navigation/stack": "^5.4.0",
"axios": "^0.19.2",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-paper": "^3.10.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^2.0.3",
"react-native-screens": "^2.8.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.0",
"react-native-unimodules": "^0.9.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.3.9"
},
"devDependencies": {
"#babel/core": "^7.10.0",
"#babel/runtime": "^7.10.0",
"#react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^26.0.1",
"eslint": "^7.1.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"pre-commit": "^1.2.2",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}

unable to reduce react-native application's size

i made an app with expo but am not satisfied with it's size, i found this blog/tutoriel on how to reduce it using react-native init project , here is the link : https://medium.com/#aswinmohanme/how-i-reduced-the-size-of-my-react-native-app-by-86-27be72bba640
the blog says to "Install all dependencies of the Expo project except Expo specific libraries." , but since i made the app with expo i used expo-av and expo-linear-gradient,it gave me this error
error: bundling failed: Error: Unable to resolve module #unimodules/core from
node_modules/expo-av/build/ExponentAV.js`: #unimodules/core could not be found within the project.
this error was fixed after i downloaded expo into the directory, it gave me a white screen but the build was succesfull.
when i removed the expo related libaries, it gave an error (ofcourse..).
NOTE : this isn't the first time that android studio emulator gives the white screen :( , so what am i doing wrong !!
here is the current package.json , i didn't change anything else in the project directory exept from adding the js files and the assets folder.
{
"name": "fixemulatorBug",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"expo-av": "5.0.2",
"expo-linear-gradient": "~5.0.1",
"react": "16.9.0",
"react-dom": "16.8.3",
"react-native": "0.61.3",
"react-native-drawer": "2.2.2",
"react-native-elements": "1.2.1",
"react-native-gesture-handler": "^1.5.0",
"react-native-reanimated": "^1.4.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.11.7",
"react-navigation": "4.0.10",
"react-navigation-drawer": "2.2.2",
"react-navigation-stack": "^1.9.4"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/runtime": "^7.6.3",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.6.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.57.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}

React native version mismatch after upgrading to 0.61.1 in brand new project

I am upgrading my React Native app from 0.59 to 0,61. What I did was to generate a brand new project from ground up with react-native init emps_fe6 and yarn add each module in package.json. Also copy the components and App.js over to the new project. Here is my new package.json file:
{
"name": "emps_fe6",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.6.2",
"moment": "^2.24.0",
"react": "16.9.0",
"react-native": "0.61.1",
"react-native-cli": "^2.0.1",
"react-native-confirmation-code-field": "^3.9.0",
"react-native-device-info": "^3.1.4",
"react-native-elements": "^1.2.3",
"react-native-gesture-handler": "^1.4.1",
"react-native-gifted-chat": "^0.10.1",
"react-native-keychain": "^4.0.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal": "^11.4.0",
"react-native-modal-datetime-picker": "^7.6.0",
"react-native-segmented-control-tab": "^3.4.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"socket.io-client": "2.1.1"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Then start on Android emulator with react-native run-android. It throws out the error of version mismatch:
I don't quite understand what causes the error, as there is no reference to version 0.59.9 in components and App.js copied. The project is started from brand new and each module is yarn add individually. Only thing from previous version is the components and App.js.
Maybe you had metro bundler running with a previous version of React Native which caused this issue. So, what I typically do when I face this problem is to start the bundler like npm start --reset-cache. Make sure to stop any metro bundler running.
If problem persist try restarting your machine.

undefined is not a function (evaluating '_react2.default.createContext((0, _getTheme2.default)())')

Im trying to run this React native app and after installing its dependencies (npm install) and running the app with react-native run-android I am getting this error:
After googling this error I found this: Solution attempt
Which says that I should upgrade the material-ui library.
After updating to the version 1.30.1 of the library I get the same error.
Here is my package.json:
{
"name": "name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^0.0.11",
"moment": "^2.20.1",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-drawer-layout-polyfill": "^2.0.0",
"react-native-fbsdk": "^0.7.0",
"react-native-gesture-handler": "^1.0.0-alpha.41",
"react-native-image-picker": "^0.26.7",
"react-native-image-resizer": "^1.0.0",
"react-native-maps": "^0.17.1",
"react-native-material-dropdown": "^0.7.1",
"react-native-material-ui": "^1.30.1",
"react-native-modal-datetime-picker": "^5.1.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-star-rating": "^1.0.8",
"react-native-tab-view": "0.0.70",
"react-native-vector-icons": "^4.5.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-persist": "4.8.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.1.0",
"babel-preset-react-native": "4.0.0",
"jest": "22.1.4",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./fuentes/"
]
}
}
What can I do to fix this error?
To fix this I updated my React and React Native versions to the latest available.