React Native app stuck on blank screen when running on device with remote debugging - react-native

I run my react native application on my device (iPhone 6) and it loads fine. But when I enable remote debugging, it seems to connect fine to debugger but gets stuck on a blank screen.
As soon as I turn off remote debugging, everything loads fine.
I am on react-native 0.40.0.
Please help!

There can be many reasons, in my case it was the cache that was creating problem.
Suggested Solutions:-
Clean gradlew
- To clean gradle go to android folder and open cmd in it, run 'gradlew clean' in the cmd
after cleaning gradle, re-build your app run command (run-android etc)
if the problem exist after rebuilding follow step 4 & 5
Go to App's setting and clear App's data
now clear react-native terminal's cache ( react-native start --reset-cache )
These steps will fix the problem!

I overcome this effect by doing the following:
go to the terminal and press "a" to reopen Android device or emulator
close application on mobile device and open it once again
if necessary, restart R to restart packager and clear cache in the terminal

I was facing this same issue when launching a react native module from iOS native module.
Replacing below mentioned code using BUNDLE URL
if let bundleUrl = (UIApplication.shared.delegate as? AppDelegate)?.bridge?.bundleURL {
let mockData:NSDictionary = ["names":
[
["name":"Name 1",],
["name":"Name 2"]
]
]
let rootView = RCTRootView(bundleURL: bundleUrl, moduleName: "modulename", initialProperties: mockData as [NSObject : AnyObject], launchOptions: nil)
let vc = UIViewController()
vc.view = rootView
self.present(vc, animated: true, completion: nil)
with this updated code using BRIDGE
if let bridge = (UIApplication.shared.delegate as? AppDelegate)?.bridge {
let mockData:NSDictionary = ["names":
[
["name":"Name 1",],
["name":"Name 2"]
]
]
let rootView = RCTRootView(bridge: bridge, moduleName: "modulename", initialProperties: mockData as [NSObject : AnyObject])
let vc = UIViewController()
vc.view = rootView
self.present(vc, animated: true, completion: nil)
}
resolve the issues!!

Related

react native debugger on android emulator

i create my app via react-native init and run android emulator and i am trying to debug it via react native debugger. i connect my app to the react native debugger but inside Sources tab i cant see my folders like: src, images, etc. i see all files without their folder including all node_modules files. How can i see my src folder and inside it the javascript files?
here is what i am seeing:
enter image description here
Try to use debugger. It will stop execution and it will show breakpoint from that line.
willFocusAction = () => {
debugger;
this.setState({ loading: true });
this.wsGetContestList(this.state.defaultPage, false)
}

Ionic background geolocation issue

I am working on Ionic background Geolocation App. I am facing an issue, when I close the app from the background, then background geolocation service not work. I want that if the app is removed from the background, the app background geolocation service should work.
Any Help?
You can install background geolocation plugin
$ ionic cordova plugin add cordova-plugin-mauron85-background-geolocation
$ npm install --save #ionic-native/background-geolocation
You can install background geolocation plugin
$ ionic cordova plugin add cordova-plugin-mauron85-background-geolocation
$ npm install --save #ionic-native/background-geolocation
and also add this in .ts for example,
import { BackgroundGeolocation, BackgroundGeolocationConfig, BackgroundGeolocationResponse } from '#ionic-native/background-geolocation';
constructor(private backgroundGeolocation: BackgroundGeolocation) { }
...
const config: BackgroundGeolocationConfig = {
desiredAccuracy: 10,
stationaryRadius: 20,
distanceFilter: 30,
debug: true, // enable this hear sounds for background-geolocation life-cycle.
stopOnTerminate: false, // enable this to clear background location settings when the app terminates
};
this.backgroundGeolocation.configure(config)
.subscribe((location: BackgroundGeolocationResponse) => {
console.log(location);
// IMPORTANT: You must execute the finish method here to inform the native plugin that you're finished,
// and the background-task may be completed. You must do this regardless if your HTTP request is successful or not.
// IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background.
this.backgroundGeolocation.finish(); // FOR IOS ONLY
});
// start recording location
this.backgroundGeolocation.start();
// If you wish to turn OFF background-tracking, call the #stop method.
this.backgroundGeolocation.stop();
for further reference kindly refer this link
https://ionicframework.com/docs/native/background-geolocation/

How to initilaze react-native on the view of window manager from android

I'm searching the way to implement running react-native application on both of activity and service in single package.
Running RN app on activity is usual, but can't find the right way to execute another react-native application on the service. The latter app should be run on the foreground service and view on the window manager.
My code roughly looks like:
// ReactNativeWindowService.kt
fun startNewReactWindow(
reactContext: ReactContext,
jsMainModuleName: String?,
bundleAssetName: String?,
module: String
) {
Toast.makeText(reactContext, "START()", Toast.LENGTH_SHORT).show()
val headLayout = createHeadLayout(reactContext)
headsManager.addLayout(headLayout)
launch(UI) {
reactInstanceManager = createReactInstanceManager(reactContext, jsMainModuleName, bundleAssetName)
reactRootView = ReactRootView(reactContext)
reactRootView?.startReactApplication(reactInstanceManager, module, null)
headsManager.addHeadView(bubbleLayout.apply { addView(reactRootView) })
}
}
But, this code produce:
07-10 01:05:07.662 26269-26380/Sample E/ReactNativeJS: Error while starting app: TypeError: undefined is not an object (evaluating 'NativeReactModule.startApp')
07-10 01:05:07.674 26269-26380/Sample I/ReactNativeJS: Running application "index" with appParams: {"rootTag":21}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
07-10 01:05:07.674 26269-26380/Sample E/ReactNativeJS: Application index has not been registered.
Hint: This error often happens when you're running the packager (local dev server) from a wrong folder. For example you have multiple apps and the packager is still running for the app you were working on before.
If this is the case, simply kill the old packager instance (e.g. close the packager terminal window) and start the packager in the correct app folder (e.g. cd into app folder and run 'npm start').
This error can also happen due to a require() error during initialization or failure to call AppRegistry.registerComponent.
I'm sure that code passed right parameters such as jsMainModuleName to create ReactInstanceManager. (I got same parameters as activity's params)
What do I miss in my code? or any other reference/docs/advice that would be helpful to me. Thanks in advance. :)
You have to make sure that your file MainAcitivity.java has a function
protected String getMainComponentName() {
return "your file name for example abc";
}
But in your index.android.js file you register other component
AppRegistry.registerComponent('123', () => 143);
Where it must be like this e.g.
AppRegistry.registerComponent('abc', () => abc);
Try to fix it.

react-native deep linking while app is running in the background

I have my android app (react-native based) and the deep link first time when I run it while the app is not running in the background works great, but when the app runs in the background and i click on the deep-link it doesn't even open the app ... I'm not sure even where to start with this bug I tried a few console.logs in lifecycle events but they don't even run.
please guide me where should I look for the issue and how to fix it, thanks!
The deep linking is working as expected for me even the app is in background. Please check the below specifications.
Node Version : v12.18.x OR Greater
NPM Version : v6.14.x OR Greater
react-native-cli : 2.0.1
react-native : 0.63.x OR Greater
Please check if you have added below line in your AppDelegate.m.
#import <React/RCTLinkingManager.h>
It must be added above #ifdef FB_SONARKIT_ENABLED line. Adding it below this line will cause failing of build while Archiving it for release.
Please check if you have added below code in your AppDelegate.m which is responsible for deep linking.
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
It will work for app cold boot, but it will not work if your app is in background. For this, you need to add below code in your AppDelegate.m
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id> *_Nullable))restorationHandler {
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
This should work irrespective of your AppState: active **OR** background.
This worked for me as expected! Give it a try. This is should definitely work.
Thanks in advance!
componentDidMount() {
Linking.addEventListener('url', this._handleDeepLinkingURL);
this._handleDeepLinkingURL(); /* Invoking method manually on launching app very first time */
},
componentWillUnmount() {
Linking.removeEventListener('url', this._handleDeepLinkingURL);
},
_handleDeepLinkingURL(event) {
/*
console.log(event.url);
event.url will hold the url of the app if the app launched when its running in background
event param will be undefined when the app launched from kill state or first time
*/
Linking.getInitialURL()
.then(url => {
if (url && url.indexOf("?params=") !== -1) {
const paramsString = url.substr(
url.indexOf("?params=") + 8
);
alert('paramsString is : ' + paramsString);
}
})
}

How to make application NOT redirect me when app is running and push notification comes and I am NOT tapping on it

I have an application and PUSHs work fine when the app is on background I tap on push notification and it redirects me - OK.
But here is the situation which i have to fix:
1 step: I open the app, working with it, it is active
2 step: notification comes but user is not seeing anything AND he gets redirected to another ViewController(according to push notification info) UNEXPECTEDLY.
I need the app NOT to redirect anywhere when it is active unless the push notification is actually tapped.
I found a solution!
in didReceiveRemoteNotification method add if statement:
func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any]) {
if application.applicationState == .inactive || application.applicationState == .background {
//here add you actions
}
}