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();
Related
I am creating an APP using managed expo react native.
And want to implement Toast alerts, react-native provides Toast only for Android not for IOS.
I googled it and found the couple of modules which works on Android and ios but they required some config change in Native code. But as I said I am working on Managed expo app. So, I don't have access for that.
Now let me know how I can implement Toast on this?
Thanks.
As toast is a native feature in android, for ios try snakbar.
import {
ToastAndroid,
Platform
} from "react-native";
import Snackbar from 'react-native-snackbar';
notify = (message) => {
if (Platform.OS != 'android') {
Snackbar.show({
text: message,
duration: Snackbar.LENGTH_SHORT,
});
} else {
ToastAndroid.show(message, ToastAndroid.SHORT);
}
}
** If you are on expo
https://snack.expo.io/#mainak/snackbar
You can use third-party library native-base available for both react-native-cli and expo
[Native-Base] https://docs.nativebase.io/docs/GetStarted.html
[Toast Component] https://docs.nativebase.io/Components.html#toast-def-headref
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 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.
I want to know how I can make a keyboard aware scrollview without using the popular library, because that is currently giving me a bug when using "controlled" TextInputs within the KeyboardAwareScrollView
Has anyone managed to pull this off? Perhaps with the KeyboardAvoidingView?
The solution has to work on both iOS and Android
You can make use of KeyboardAvoidingView component. Import it from the 'react-native' along with all other components you need and keep your UI within that component.
for example,
import {KeyboardAvoidingView} from 'react-native'
export default class App extends React.Component{
render(){
return(
<KeyboardAvoidingView behavior="padding">
Your UI
</KeyboardAvoidingView>
);
}
}
Don't forget to add the prop behaviour="padding". It worked for me on android device. I don't have an iPhone to test it, but hope it would work.
Take a loot at this this link for further information. Hope this helped.
I'm coming from Ionic 2 where I write my code once, and it runs everywhere.
According to this page https://facebook.github.io/react-native/docs/platform-specific-code.html "When building a cross-platform app, you'll want to re-use as much code as possible."
How can I "reuse" code across iOS and Android in ReactNative? In the starter app I see two files: index.ios.js and index.android.js. Is there something like index.js that I can use for sharing across platforms?
It seems like there should be one file for shareable code, since that web page mentioned above also shows how you can use the Platform module to check what OS you are on.
I realize that sometimes you need different behavior on different platforms, but, assuming that my app is simple enough, and my code ends up exactly the same on both platforms, do I have to copy/paste from one to the other? How can I pull same-functionality into it’s own file to be shared on both platforms?
What am I missing?
Thanks!
Here's what you can do. Create a file say main.js that will act as your root page.
main.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
Now on your index.android.js and index.ios.js import that main file and register your Main component as root using AppRegistry.
index.android.js and index.ios.js
import React from 'react';
import {
AppRegistry
} from 'react-native';
import Main from './main';
AppRegistry.registerComponent('DemoApp', () => Main);
if you run react-native run-android and react-native run-ios the Main component will be rendered for both the platforms.
All of the Components with No IOS and Android suffix works for both platforms. Like Navigator works for both ios and android but NavigatorIOS works only for ios. So you'll have to make sure that you're using the cross platform components.
If you need to use platform specific components, then you can use platform detection login to do so:
import { Platform } from 'react-native';
if(Platform.OS === 'ios').....
or
if(Platform.OS === 'android')...