How to open a web browser in expo rather than using the expo browser.I want open the browser in inside the app.
you can use the following library react-native-inappbrowser
follow the installation from the github page
import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn'
...
async openLink() {
try {
const url = 'https://www.google.com'
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.open(url, {
// iOS Properties
dismissButtonStyle: 'cancel',
preferredBarTintColor: '#453AA4',
preferredControlTintColor: 'white',
readerMode: false,
animated: true,
modalPresentationStyle: 'overFullScreen',
modalTransitionStyle: 'partialCurl',
modalEnabled: true,
// Android Properties
showTitle: true,
toolbarColor: '#6200EE',
secondaryToolbarColor: 'black',
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: false,
// Specify full animation resource identifier(package:anim/name)
// or only resource name(in case of animation bundled with app).
animations: {
startEnter: 'slide_in_right',
startExit: 'slide_out_left',
endEnter: 'slide_in_left',
endExit: 'slide_out_right'
},
headers: {
'my-custom-header': 'my custom header value'
},
waitForRedirectDelay: 0
})
Alert.alert(JSON.stringify(result))
}
else Linking.openURL(url)
} catch (error) {
Alert.alert(error.message)
}
}
...
you can check the example app here
for expo it becomes little bit complicated please check the related tutorial by Medium
if you want reading mode in ios please refer this link
reader-mode-webview-component-for-react-native
The expo-web-browser package opens an in app browser.
This worked for me with expo. I tried react-native-inappbrowser-reborn first, but isAvailable() was throwing an error.
import * as WebBrowser from 'expo-web-browser'
...
WebBrowser.openBrowserAsync(url, {showTitle: true})
Related
I am trying to download a pdf generated through an own api that worked normally for me until yesterday, since then it has stopped working without any modification. Reviewing in developer mode through the metro everything seems to work correctly without any problems (I download the pdf normally), but when deploying the application in the playstore it closes unexpectedly, leaving me without knowing why this happens.
First I was using the React Native Fetch Blob, then I used React Native Blob Util hoping it would solve the problem but it keeps happening. Do you guys have any ideas for why does this happen?
The PDF file download this function:
const generarReciboPdf = async (datosDeuda:FormularioScreenParams,formaPago:ReactText,nroCheque?:string) =>{
const{config,fs} = ReactNativeBlobUtil
if (formaPago === 4 && (nroCheque == ""|| undefined)) {
return console.log('debe llenar todos los campos');
}
const { DownloadDir } = fs.dirs;
const token = await AsyncStorage.getItem('token');
let datosDeudaCompleto= {
...datosDeuda,
forma_pago:formaPago,
nro_cheque:nroCheque
}
let url = 'https://sys.arco.com.py/api/appRecibos/generarReciboPdf/'+JSON.stringify(datosDeudaCompleto)
// return console.log(url);
const options = {
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true, // true will use native manager and be shown on notification bar.
notification: true,
mime:'application/pdf',
path: `${DownloadDir}/recibo_${datosDeuda.mes_deuda.replace(/ /g, "")}_${datosDeuda.razon_social.replace(/ /g, "")}.pdf`,
description: 'Downloading.',
},
};
config(options).fetch('GET', url,{Authorization :'Bearer '+token}).then((res) => {
console.log('se imprimio correctamte el pdf');
setErrorPdf(1)
}).catch((error)=>{
console.log(error);
setErrorPdf(-1);
});
}
Also, this error appears in Play Console: "PlayConsole Error Image".
PlayConsole Error Image
The expo-linking React Native package has a hook named useURL that isn't working for me when the app is in the background. From the docs it Returns the initial URL followed by any subsequent changes to the URL. The problem I'm having with my managed expo app is that the hook doesn't work when the app is already open in the background. Here is the hook:
export default function App() {
const isLoadingComplete = useCachedResources();
const url = Linking.useURL();
useEffect(() => {
Alert.alert(url ? url.substring(20) : 'null');
}, [url]);
if (!isLoadingComplete) {
return null;
} else {
return (
...
);
}
}
If I open the URL exp://exp.host/#myprofile/myproject?a=bwhen the app is closed, I get an Alert as expected. If the app is in the background, the Alert doesn't go off. I've tested on an iOS emulator and a physical Android. Any solutions? Note that similar problems happen with Linking.addEventListener().
I'm trying to create a Windows applications using Electron and Vue. I want to send the application to the Tray and show an icon to maximize it again when clicked. It works fine in DEV but when I build the app, the Tray icon is not working.
The app it's executing, but when minimized the tray is not showing and there is not option to open it again (need to kill the process).
This is the code I'm trying to use:
app.on("ready", async () => {
if (isDevelopment && !process.env.IS_TEST) {
try {
await installExtension(VUEJS_DEVTOOLS);
} catch (e) {
console.error("Vue Devtools failed to install:", e.toString());
}
}
createWindow();
createTray()
});
const createTray = () => {
const tray = new Tray(resolve(process.resourcesPath, '\\resources\\homeico.ico'))
const contextMenu = Menu.buildFromTemplate([
{
label: 'Show App', click: function () {
app.show()
}
},
{
label: 'Quit', click: function () {
app.isQuiting = true
app.quit()
}
}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
tray.on('click', () => {
console.log('clicked')
})
}
And in my vue.config.js:
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
builderOptions: {
"extraResources": [
{
"from": "extraResources",
"to": "resources",
"filter": [
"**/*"
]
}
]
}
},
},
The resolve(process.resourcesPath, '\resources\homeico.ico') line is pointing to a existing file, I'm printing this route in the App and I can open it in my Windows Explorer, but when I want to show the Image in the app, I can see next error in the DevTools:
Not allowed to load local resource: file:///C:/Users/mysUser/AppData/Local/Programs/business-config-tool/resources/resources/homeico.ico
The path is accesible, but not in the App.
What's the correct way to configure the path to the icon? there is another path I can configure for assets? I also tried with __dirname and other icon formats (ico, png..)
Thank you.
I ran into the same issue. I searched for a solution for hours, and I finally found one.
This solution is made for app using electron-vue (I personally used this Vue Cli electron plugin). And I tested it on Windows only.
The Tray must be initialised with an icon Path, wich needs be different wether you are running a built version of your app (yarn electron:build), or serving your app (yarn electron:serve).
I am using a function that I called isServeMode, wich basically tells me if I am using the serve mode or the buid mode. Here is what the function looks like :
// utils.js file
const isServeMode = () => {
return process.env.WEBPACK_DEV_SERVER_URL
}
You don't need to create this function, but it might be usefull somewhere else in your app so I suggest you to put it in a file that you can import from anywhere in your app. In my case, I created a utils.js file where I write those functions.
Then, put your tray icon in the public folder, it can not work if you put the icon in the src/assets folder, since we have to access it from the Node environnement and not from Vue. In my case, I put my icon in public/tray/icon.png.
Finally, we can use the electron Tray with Electron vue like this
import { Tray } from "electron"
import path from "path"
import { isServeMode } from "./utils" // Path depends on where you wrote your function
// Some Electron code...
let tray
createTray = () => {
const iconPath = isServeMode()
? path.join(__dirname, "/bundled/tray/icon.png")
: path.join(__dirname, "/tray/icon.png")
tray = new Tray(iconPath)
}
I will soon release a new version of my Unlighter app, wich is an electron-vue app that will include a Tray example. Feel free to take a look at this "real world app example" if you're interested.
Description
I am using React-Native-Image-Picker to Select and Upload Files from my App, The issue i am facing that It is working in Android but in ios react-native-image-picker dialog automically closes after launching, therefore i cannot select files for upload.
All the required permissions by ios for file upload have also been given.
How to repeat issue and example
import ImagePicker from 'react-native-image-picker';
import RNFetchBlob from 'react-native-fetch-blob';
var options = {
title: 'Select Image',
quality : 0.25,
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.showImagePicker(options, response => {
console.log('Response = ', response);
RNFetchBlob.fs.stat(response.path)
.then((stats) => {
if (stats.size <= 5000000) {
let source = response;
let checkboxStates = {...this.state.checkboxStates};
checkboxStates['image'] = true;
this.setState({ imagePath: source, imageVisible: true, totalUploadSize: this.state.totalUploadSize + stats.size });
this.setState({checkboxStates});
}
else{
toastMessage('Image should be less than 5 MB');
}
}).catch((err) => {});
});
Additional Information
React Native version: 0.61.5
Platform: IOS
Development Operating System: Mac OS Mojave 10.14.2
Dev tools: Xcode 10.14.2
Device : IPad Pro (IOS 9)
for someone who experience this, in my case this is cause of close of modal of choose option of image upload the open image picker immediately. try to close in given time then open image library or close modal after image picker launched like this :
ImagePicker.launchCamera(imageOptions, async (response) => {
setModalPicker(false)
This happens when the modal that has the option buttons for selecting either from camera or gallery is closed. You can close the modal after selecting an image.
ImagePicker.launchImageLibrary(options, (response) => {
//close the modal here
})
I am trying to detect if a user takes a screenshot while using a smartphone app that I have built. I am building my project with React Native.
I have been told that I can possibly prevent screenshots for Android but not for iOS. but can I still detect whether a user attempts to take a screenshot so that I can at least send a warning via Alert?
Thanks in advance
I tried react-native-screenshot-detector but it did not work
you can use this package it supports android&ios screenshot detecting react-native-detector
import {
addScreenshotListener,
removeScreenshotListener,
} from 'react-native-detector';
// ...
React.useEffect(() => {
const userDidScreenshot = () => {
console.log('User took screenshot');
};
const listener = addScreenshotListener(userDidScreenshot);
return () => {
removeScreenshotListener(listener);
};
}, []);
There is no package for it currently.