When open the gallery I see only 6 default images for emulator, how add custom?
ImagePicker.openPicker({
multiple: true,
mediaType: 'photo',
forceJpg: true,
}).then((images) =>
setImagesMeta((prevState) => {
return [...images, ...prevState]
})
)
On iOS Simulator you can add images via drag & drop
For android you can use adb push
Related
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);
};
I'm creating react native app on googleplay im using react native pushNotification and react-native-sound
everything is work proper till the last update when I upload bundle on googleplay notification sound play with the sound that I use in one of react navigation page old AAB work fine but after updating this issue appears
when I clear data in android , notification sound works fine without any conflict
notification config is in App.js every thing is code proper and responsive
notification
PushNotification.localNotificationSchedule({
id: notificationId,
title: lang.notificationRemaind,
message: reminder.name, // (required)
date: new Date(Date.now() + diffSeconds),
allowWhileIdle: true,
repeatType: 'week',
channelId: 'Reminder',
priority: 'max',
soundName: 'remind',
});
sound
try {
// play the file tone.mp3
SoundPlayer.playSoundFile('firework', 'mp3')
} catch (e) {
console.log(`cannot play the sound file`, e)
}
In my case, I did not use the library for notification sound.
Android:
step1: Add my_sound.mp3 file android/app/src/main/res/raw/my_sound.mp3
step2:
PushNotification.localNotificationSchedule({
title: lang.notificationRemaind,
message: reminder.name,
playSound: 'true'
soundName: 'my_sound.mp3',
});}
step3: for local notification add playSound and SoundName in channel.
PushNotification.createChannel(
{
channelId: 'Test',
channelName: 'test-channel',
soundName: 'my_sound.mp3'
}
)
IOS:Add my_sound.mp3 file in xcode as pod level.
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"
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
})
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})