I am working on React Native Application and integrated react-native-navigation package for navigation inside app, link of package
Android App got stuck and show blank screen. This happens if I am closing app using back button in case of Android app. At the end I have a listing screen, after reopen the application it shows blank screen because it's not calling Navigation.registerComponent again, it might be destroying app when closed using back button.
This is a code inside my index.js::
import { Navigation } from "react-native-navigation";
import App from './src/app';
Navigation.registerComponent("appName", () => App);
Killing the app and restarting would fix the stuck on splash screen issue. But shouldn't be stuck in the first place. Just an issue when closing through back button.
Does anyone have a fix for this? Please suggest how can I handle and call my Navigation.registerComponent once again after closing app using back button.
Environment
React Native Navigation version: 2.12.0
React Native version: 0.58
Platform(s) : Android only
To resolve this you need to make modification inside react-native-navigation package. Open NavigationActivity.java file and replace below code with new one:
Replace this code:
#Override
public void invokeDefaultOnBackPressed() {
if (!navigator.handleBack(new CommandListenerAdapter())) {
super.onBackPressed();
}
}
With this one:
#Override
public void invokeDefaultOnBackPressed() {
if (!navigator.handleBack(new CommandListenerAdapter())) {
this.moveTaskToBack(true);
//super.onBackPressed();
}
}
After saving your changes check on android device.
Related
I want to finish my splash screen in react native how can I do this I have search a lot but did not find anything I'm using this #react-navigation/native.
Try to use react-native-splash-screen
import SplashScreen from 'react-native-splash-screen'
export default class App extends Component {
componentDidMount() {
// do stuff while splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
SplashScreen.hide();
}
}
I'm trying to open an app at a specific screen, from a push notification. My understanding is that I use a "deep link" to do this. I've set up react-navigation to handle the deep link (and AndroidManifest.xml & appDelegate.m), and can open the deep link with xcrun simctl openurl booted myapp://a/1 / adb shell am start -W -a android.intent.action.VIEW -d "myapp://a/1" app.bundle.name.
But I can't get the push notification to open the app, at the deep link, when the app is closed; it only opens the app on the home screen (on both iOS and Android). How do I get the app to open at the deep link (or alternatively, to read the contents of the push notification so that I can navigate to the correct screen myself)?
library versions:
react-native 0.62.2
#react-navigation 5.5.1
react-native-fcm 16.2.4
After some debugging, I found it was actually a problem in my code handling notifications. I was checking for an ID property in the notification body, but not all notifications have one. So once I removed this, it started working. So to make it work you should have something like:
// push handler component
class PushHandler extends React.Component {
componentDidMount() {
FCM.getInitialNotification(notification => {
if (!notification) {
// the app was not opened with a notification.
return;
}
// extract route from `notification` here
this.props.navigation.navigate(route);
}
}
// ... rest of push notification handling code
}
It also didn't have anything to do with deep linking. The this.props.navigation.navigate is just the plain in-app navigation.
Our React Native project has both Segment and CodePush integrated.
Segment works fine, normally.
But there's a scenario where Segment stops working right after a CodePush update has been installed. Nothing gets flushed out and none of the events are shown in the Live Debugger list - except for events that are tracked in the native layer (eg: "Application Opened" and "Application Backgrounded" - only these show up).
So I assumed that any Segment call in the RN - Javascript layer only stops working after the app restarts the bundle (by CodePush).
The user should close and kill the app and reopen the app for it to work normally again.
Happens to both iOS and Android (when installed from the store).
And weirdly enough, I cannot recreate the issue on Android when I run a debug or release build directly to my Android phone from my machine (it just works š¤·āāļø). Same goes for iOS simulators.
Any ideas or workarounds on this?
This is how the setup looks like:
import React, { Component } from "react";
import CodePush from "react-native-code-push";
import segment from "#segment/analytics-react-native";
...
class App extends Component {
constructor(props) {
super(props);
this.setupSegment();
}
private setupSegment(): void {
segment.setup("<Segment Write Key>", {
debug: true,
trackAppLifecycleEvents: true,
ios: {
trackAdvertising: true
}
});
}
...
}
export default CodePush({
installMode: CodePush.InstallMode.IMMEDIATE,
checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
updateDialog: null
})(App);
react-native: 0.61.5
react-native-code-push: 6.1.0
#segment/analytics-react-native: 1.1.1-beta.2 (also tried 1.1.1-beta.5)
I am using the expo-cli tool to develop in react native. I am using an android simulator: Once i run "yarn start" the console asks me:
To run the app with live reloading, choose one of:
ā¢ Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
ā¢ Press a for Android emulator.
ā¢ Press e to send a link to your phone with email.
ā¢ Press s to sign in and enable more options.
I press a. The simulator loads the expo app succesfully but the text displayed is not updated. What i mean with this is that before I just had this on app.js:
export default function App() {
return (
<UtilityThemeProvider>
<Box><Text>Hello App</Text></Box>
</UtilityThemeProvider>
);
}
And indeed it was showing Hello App. But then I installed react navigation and similar dependiencies and i have this on app.js:
export default function App() {
return (
<UtilityThemeProvider>
<Navigation />
</UtilityThemeProvider>
);
}
There is no error showing. Not in the console of the simulator, nor in the console, nor in the metro bundler! But the android simulator still itĀ“s showing Hello App
HereĀ“s how i export and import the Navigator component:
index.js:
export default class Navigation extends Component{
state = {}
render(){
return <AppNavigator />
}
}
App.js:
import Navigation from './src/views/index'
Things iĀ“ve tried:
Restart the simulator device
2- Stop the server and run yarn start again
3- Make sure my IDE is still in autosave mode
Any idea what i could do? Could it be possible that iĀ“ve touched something to disable re-load?
Click on Android simulator Ctrl + M and check if you have Enable Live Reload option
I try use code:
import {BackHandler} from 'react-native';
onPress = () => {
BackHandler.exitApp()
}
BackHandler not working on Android
BackHandler not working on IOS ?
BackHandler is specifically for Android and tvOS functions and is not applicable in iOS apps. It is meant to detect hardware back button presses and iOS devices don't have a hardware back button.
It looks like you are trying to close the app on a button press, but this is not a very common pattern for iOS apps so maybe reconsider if you need it in your app. However, if you need this functionality, you can use react-native-exit-app to programmatically exit the application.
For Android, Use BackAndroid to exit the App
import React, {
BackAndroid,
} from 'react-native';
BackAndroid.exitApp();