React-Native-Image-Picker Dialog automatically closes after launching in IOS - react-native

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
})

Related

react-native-share wouldn't open anything in real ios device but app doesn't freeze

I'm trying to implement sharing a pdf feature using react-native-share. When I click 'share' button, there should be a pop-up with different sharing options but nothing pops up when I connect to my real ios device and test it. The app doesn't freeze or anything. Weird thing is everything works as expected when I test it on ios simulator.
Here's my code snippet
const sharePdf = async () => {
const shareOptions = {
url: `file://${reportUri}`,
type: 'application/pdf',
failOnCancel: true,
};
await Share.open(shareOptions);
};

React Native Fetch Blob/React Native Blob Util Fail in Production but not in Developer time

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

Is there any way to show 'download completed' notification using react-native?

Currently I'm dealing with file downloading function of react-native app.
What I'm wondering is how can I show 'Download completed' notification as shown in the image right after the file has downloaded at notification center.
RN Version : 0.61.5
according to https://github.com/cjdell/react-native-fs-test/blob/master/index.common.js
const ret = RNFS.downloadFile({ fromUrl: url, toFile: downloadDest });
ret.promise.then(res => {
// Show Your Notification
}).catch(err => {});
for notification you can use https://github.com/zo0r/react-native-push-notification, this is an example:
RNFS.downloadFile({
fromUrl,
toFile,
}).promise.then((res) => {
PushNotification.localNotification(details)
});
You can use RNFetchBlob package to download any file from the internet and configure the options to show notification, set notification : true, to get the status of download whether complete or ongoing, (only Android), if you keep it false you need to add one more permission in the manifest, i.e DOWNLOAD_WITHOUT_NOTIFICATION
let options = {
fileCache: true,
addAndroidDownloads : {
useDownloadManager : true,
notification : false,
path: PictureDir + "/image_"+Math.floor(date.getTime() + date.getSeconds() / 2)+".png",
description : 'Image'
}
}
config(options).fetch('GET', url)
I used RNFetchBlob to download image/pdf. This helped me to show download notification.
RNFetchBlob.android.addCompleteDownload({
title: "QR Code Image",
description: 'Download complete',
mime: 'image/png',
path: path,
showNotification: true,
})
for me its image file so mime type is "image/png" for pdf its "application/pdf"

How to detect screenshots with React Native (both Android and iOS)

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.

How to add a in-app browser in React Native (Expo)

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})