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
Related
I'm trying to develop React Native Expo app on Zebra Scanner OS android. I want to listen pressed F Keys or any physical keyboard events on main screen without text input. So far I tried couple of npm package but they didn't solve my problem.
And keyboard expo doc only works for 'keyboardDidShow' and 'keyboardDidHide'
Does anyone know how to handle keyevents on React Native Expo ?
https://github.com/chronsyn/react-native-keyevent-expo-config-plugin
This code didn't work.
import KeyEvent from 'react-native-keyevent';
useEffect(() => {
KeyEvent.onKeyDownListener((keyEvent) => {
console.log(`onKeyDown keyCode: ${keyEvent.keyCode}`);
console.log(`Action: ${keyEvent.action}`);
console.log(`Key: ${keyEvent.pressedKey}`);
});
KeyEvent.onKeyMultipleListener((keyEvent) => {
console.log(`onKeyDown keyCode: ${keyEvent.keyCode}`);
console.log(`Action: ${keyEvent.action}`);
console.log(`Key: ${keyEvent.pressedKey}`);
});
});
I am trying to use a in app browser in react native using expo and came across the react-native-inappbrowser-reborn package and I tried to use the given code example but always get this error when I alert it:
My code:
async function handleLink(link) {
try {
const url = link;
if (await InAppBrowser.isAvailable()) {
} else Linking.openURL(url);
} catch (error) {
alert(error.message)
}
}
I was wondering if any of you know this error or if there is a working alternative?
This solution from expo works well for me:
import * as WebBrowser from 'expo-web-browser';
const openLink = WebBrowser.openBrowserAsync('https://google.com')
// JSX...
Here are the docs for expo-web-browser
There is a solution which i found few weeks ago
here: How To Add A In-App Browser In React-Native
I use this code to get user permission in android
async componentWillMount() {
await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
}
How to use this for ios?
This library used only with android , Use Third party library Like :
https://github.com/yonahforst/react-native-permissions
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();
I want to open ios setting app from my app. the settings destination is [ settings => notification => myapp ]. to turn on & turn off push notification.
There are some documents about how to link to settings, but I don't know how to open deep link. (notification => myapp).
How can I do this?
You can deep-link referencing the settings's index like so:
Linking.openURL('app-settings:')
Above method only for IOS
Since React Native 0.60 to open App settings use:
import { Linking } from 'react-native';
Linking.openSettings();
Open the app’s custom settings, if it has any.
Works for Android and iOS
Use Linking.openURL. For example, below is how to check and open Health app on iOS
import { Linking } from 'react-native'
async goToSettings() {
const healthAppUrl = 'x-apple-health://'
const canOpenHealthApp = await Linking.canOpenURL(healthAppUrl)
if (canOpenHealthApp) {
Linking.openURL(healthAppUrl)
} else {
Linking.openURL('app-settings:')
}
}
for iOS 14, this is how i open location service settings
Linking.openURL('App-Prefs:Privacy&path=LOCATION')
tested in react native 0.63.4
To access specific settings screens, try this:
Linking.openURL("App-Prefs:root=WIFI");
Linking to app-settings only opens the settings for the
Reference: iOS Launching Settings -> Restrictions URL Scheme (note that prefs changed to App-Prefs in iOS 6)
Try this one for Open Specific System URL - Linking.openURL('App-Prefs:{3}')
try this
Linking.openURL('app-settings://notification/myapp')