How to export React native code for windows platform - reactjs

I am having react native code which is running on both iOS & Android. Also I have used some dependencies like image picker or other but now I have to run that application in windows phone also so for this I followed this link for set up a dummy application in windows machine
https://shift.infinite.red/getting-started-with-react-native-development-for-windows-ba23a4be90b6
It was successfully done. There was no problem but when I am running for my existing React native application. It is throwing errors related to dependencies which were supported in both iOS & Android.
No issue my existing code is working fine in windows but those third paty libraries are not supported in windows.
As of now I have used this library to hide white screen in React for both Android & iOS https://github.com/crazycodeboy/react-native-splash-screen
My problem is that it is throwing error when using this library code for windows application else perfectly working in android & ios.(all third party libraries used in the existing react native code are not supporting in windows)
How can I run react native existing code for Windows Phone with all third party libraries.

Related

React native web support

I have project in react native and it was build in iOS and android successfully. I have not used react native cli for that project. Now I have to give support for web. So when I run the app all functionality should work in web same as in iOS and android. I have follow tutorial for that
https://javascript.plainenglish.io/how-to-integrate-react-native-web-existing-react-native-apps-8e4964ad2f0b
But when I run in the web it getting blank page.
I have tried many ways but it getting blank page. It is possible to run the app in web without using expo?
Please help.
if you don't want to use expo, i suggest you to use this react-native-web

How we can debug React-Native application?

I am using google chrome for debugging the react native app but in the source code tab, I am not able to see .js files.
For debugging I am using physical device.
Any body know about the solution?
Is there any better method to debug the react native app?
To debug a react-native app there is a react native debugger. It’s available on iOS and Windows as well. However, on Windows you have to download it manually from github. After you installed and started the debugger you can connect to it from the app emulator from the developer menu (command + d on iOS command + m in case of android emulator, on Windows you can use ctrl + m).
https://github.com/jhen0409/react-native-debugger
Curently, there's no react native debugger which can show you the .js files but you can debug the UI by this library:
[https://github.com/facebook/react-devtools][1]
You can also config your IDE to jump to the source code by clicking on the error message by edditing your .bashrc
If you're working on Visual Studio Code and want to debug your React Native app just like all other IDEs, then you can take help from React Native Tools extension provided by Microsoft.
You can read all steps in detail in my this answer.

How to debug a react native mobile app using chrome inspect

The chrome inspect device doesnot list out the mobile application developed using react native.
I tried the react native chrome extensions but it didnt worked for me.
chrome://inspect/#devices
Is there any steps to that has to followed to inspect the react native apps?
You should active Remote JS Debugging from Developer Menu. to access Developer menu:
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on Mac OS and Ctrl+M on Windows and Linux. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).
I would recommend using React Native Debugger, which gives you a Chrome inspector but it is built specifically with features for React Native.
https://github.com/jhen0409/react-native-debugger

How to generate mnemonics in React Native?

I want to generate mnemonics in React Native. I have cloned this project. I imported bip39 but I am getting this error in mobile/simulator. Works fine in debug mode in Chrome browser.
library Error: Secure random number generation is not supported by this browser
I installed bip39 react native library. But when I use that module app is not opening and gets stuck in the splash screen. I tried to use other libraries like bit core bip39, but every lib has the same problem.
How can I create mnemonics in React Native using the above repository which I cloned React Native web3 boiler plate?
I generated the memonic using #medardm/react-native-bip39 on React Native project.
Working with web3 in react-native i faced this issue a few. You are probably using the bip39 node.js package. The output you get means that is using a browser library that is not present in react-native(it is probably added as dependency in node). What you should use is bip39 for react native, here is a link to it.

How to debug react native apps in visual studio code?

I am using visual studio code IDE to develop react native app and am not using expo library.
Before that I was working on the android studio, debugging in that is straightforward and simple.
Now for react-native, I wanted to know how to debug my app using visual studio code IDE?
If you want to debug the app in VS Code itself, like in other IDEs. Then on approach can be to follow the following steps:
Install React Native Tools Extension (provided by Microsoft) to VS Code.
This is a nice add on to VS Code's capabilities for React Native.
Then go to Debug option from left menu and click on Add Configuration.
If it initially says No Configuration then you can click on Add Configuration and then choose React Native option.
Now if already have Launch configuration added, then you can click on Add Configuration button then you will see more options related to React Native.
You can add configurations for React Native: Attach to Packager, React Native: Debug to Android, React Native: Debug to iOS in your launch.json file. It is present in .vscode folder.
Then add your breakpoints in code. Now suppose you already have your app running on emulator then you can choose option Attach to Packager.
Then on emulator or device open developer options (Ctrl + M for Windows + Android) and click on Debug JS Remotely.
Now your breakpoints should be working. Similarly if your app wasn't working already then you can go for Debug Android or Debug iOS accordingly.
Step1: Open app Setting in your mobile by shaking your mobile or by typing this command in your machine if your running android.
adb shell input keyevent 82
Step2: Select Debug JS Remotely which is the second option.
Step3: In your Browser type Url http://localhost:8081/debugger-ui/
Step4: Again Open App Setting by shaking or running the command shown in step 1 and select Reload option which is first option
Now You can get all console logs in the browser and also you can debug your app remotely by putting breakpoints and analyze the values step by step.

Resources