Expo Image Picker vs RN-image picker - expo

I am quite new to RN . I know this question is being repeated but I didn't quite get ans I was looking for there .
So my current project uses
expo for web and react-native cli for the android set up .
I want to add an image-picker to the project.
I see two options at my side .
RN-image-picker
expo-image-picker
I have some issues and some questions !!
Is RN-native-image picker comaptible with web ??
I think its not ,there are two resons I think that ,this lib uses Nativemodules, which
won't be bundled for web and its giving undefined error for NativeModules when I run with
web while it works fine on android .
Should I use expo-image-picker when I am creating a android build with react-native cli ??
The build doesn't give errors and it shouldn't ,but when I click on upload image ,app
crashes after I select image.I read the docs and github for the issue.Many people pointed
out its ram allocation issue,which can be sorted with disbaling "Dont keep activities" in
developer's option,which I haven't tried yet .
Also on web ,the following code snippet returns base64 as uri,is it default behaviour ??
I am using this code snippet for expo-image-picker,which ends up crashing app when I build app with rn cli,but doesn't seem to cause issues with expocli build.But I want to use expo for web and rn for android.
Also on web ,the following code snippet returns base64 as uri,is it default behaviour ??
const pickImage = async () => {
try{
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
base64:false
})
if(!result.isCancelled)return result.uri ;
}catch(err){
console.log(err) ;
}
}
So what should I do in this case,use expo-image-picker as it seems to be compatible with all platforms/both ?
Any kind of input would be helpful !!

I'm not a fan of Expo, and I don't have experience with that but I try to answer to your question that can be.
Is RN-native-image picker comaptible with web ??
You have right, the library supports only mobile devices.
Should I use expo-image-picker when I am creating an android build with react-native cli ??
From expo documentation, I read that but I know also that sometimes the rn-cli and expo has some package differences, and this answer proves that.
Expo never locks you in, you can "eject" at any time and your project will just be a typical native project with the React Native and Expo SDK packages that your app is using installed and configured.
I don't know what the exception, and maybe the solution that you put in your answer work well, but maybe is possible to have some dependency mismecc? Such as a none object on the Web app? or something like that.
Also on web ,the following code snippet returns base64 as uri,is it default behaviour ??
This looks like be an bug and this issue on github maybe can confirm my idea

Related

ember-electron application start (code hierarchy)

I'm trying to move a very old 2.x ember-electron application to new electron with ember-electron and got application window with blank screen and error in console:
(node:9061) electron: Failed to load URL: serve://dist/ with error: ERR_FILE_NOT_FOUND
The calling file ../new-ember-electron/electron-app/src/index.js has lines from old applications:
const emberAppLocation = 'serve://dist';
mainWindow.loadURL(emberAppLocation);
File ../new-ember-electron/app/router.js has:
this.route('index', { path: '/' }, function() {}
Files ../new-ember-electron/app/routes/index.js, ../new-ember-electron/app/controllers/index.js and ../new-ember-electron/app/templates/index.hbs also exist.
So, it's unclear what exactly is not found and how to find a more detailed error (application developer console doesn't have errors). But if to change the mentioned 2 lines in ../new-ember-electron/electron-app/src/index.js to:
const emberAppLocation = '../app/index.html';
mainWindow.loadFile(emberAppLocation);
then application shows content of the correct file, despite nothing working in it, even <LinkTo>...</LinkTo> is not treated as a link.
Would you please help me to understand how an ember-electron application should be structured and which way is called for the recent versions?
Used versions: node - 16.14.0, electron: 17.0.1, ember-cli: 3.28.5, ember-electron: 3.1.0, OS: darwin x64.
Thank you.
Thank you, jacobq, I've looked at your example and used emberAppUrl to start from ember-dist/index.html file. After few more changes related to require/requireNode (fixed with webPreferences options in mainWindow) the app rendered index.html file. But a problem with app location happens again right on {{ content-for "body" }} in index.html: "Uncaught Error: Cannot find module 'app-name/app'" where app-name is the application name set up as 'name' in /package.json and as 'modulePrefix' in config/environment.js. The error itself comes from /node-modules/ember-cli/lib/utilities/ember-app-utils.js, 'contentFor' function called with 'app-boot'. The ember-cli itself constructs the /app-name/app path. So, the question now is what exactly ember-cli expects to find during the boot with the new structure? Or maybe some config variable should be added to let know Ember about the /app-name/app location?
Edited:
jacobq, yes, the only difference in index.html is application name: "testapp". RootURL is set in ../testapp/config/environment.js:
podModulePrefix: 'testapp/pods',
environment,
modulePrefix: 'testapp',
rootURL: process.env.EMBER_CLI_ELECTRON ? '' : '/',
locationType: process.env.EMBER_CLI_ELECTRON ? 'hash' : 'auto',
The full error:
It happens when testapp.js file is called from index.html, on code included from ember-cli:
if (!runningTests) {
require("testapp/app")["default"].create({"LOG_TRANSITIONS":true,"LOG_TRANSITIONS_INTERNAL":true});
}
First thing I'd like to plug is joining the #topic-desktop channel on the Ember.js community Discord server: https://discord.com/channels/480462759797063690/488735754139336714
(it's often easier to work things out by chatting there as there's lower latency than typically found with forum post/reply platforms)
Secondly, there are lots of breaking (but good) changes between ember-electron 2.x and 3.x, so I'd encourage you to work through the upgrade guide here: https://ember-electron.js.org/docs/guides/upgrading
That said, I suspect that the problem you're seeing is related to the change from serve:// to file://. Have a look at the demo app I just spun up here:
https://github.com/jacobq/ember-electron-demo
You can see the new emberAppURL here:
https://github.com/jacobq/ember-electron-demo/blob/cf7c5dee2cd975f8c67ed1dfc61eb717461f5b7d/electron-app/src/index.js#L13
Basically, ember-electron v3.x puts the usual dist output from ember build into <project_root>/electron-app/ember-dist/ now.
FWIW, I'm actually stuck on 3.0.0-beta.2 in my application because I am using IndexedDB and don't have migration code to deal with origin-related issues of switching to file:// scheme. I don't recommend that you use that version, but you could try it if you wanted to see if that changes the error you're encountering (because that beta still uses electron-protocol-serve).

Unable to save video anymore with Expo on iOS

I have an Expo App (iOS/Android) that allow the user to record short videos (and pictures) and share them (among other things). It worked fine on both OSes for a while, but recently it stopped working on iOS (Android still working fine). Picture taking works fine on both devices.
Here is the code that used to work when trying to save said video :
const recordPromise = this.camera.recordAsync({
maxDuration: 5,
quality: Camera.Constants.VideoQuality["720p"],
});
const videoData = await recordPromise;
let asset = await MediaLibrary.createAssetAsync(videoData.uri);
The following error is raised on createAssetAsync() :
[Unhandled promise rejection: Error: Asset couldn't be saved to photo library]
Recording itself seems to be fine (uri has been anonymized) :
Object {
"uri": "file:///var/mobile/Containers/Data/Application/00000000-0000-0000-0000-000000000000/Library/Caches/ExponentExperienceData/%2540app%252Fapp/Camera/0F46F276-DCBE-4999-A3E0-0E10955467AF.mov",
}
Permissions are requested in componentDidMount and had been granted :
const permissionCamera = await Camera.requestPermissionsAsync();
const permissionLibrary = await MediaLibrary.requestPermissionsAsync();
const permissionMicro = await Camera.requestMicrophonePermissionsAsync();
When checking the permissions for Expo Go in the settings, they are properly allowed.
MediaLibrary.getPermissionsAsync(); returns :
{
"accessPrivileges": "all",
"canAskAgain": true,
"expires": "never",
"granted": true,
"status": "granted",
}
Same code worked perfectly a couple weeks ago, and is still working fine on Android. I thought that it was an Apple-related change, but found nothing in the documentation or internet.
Expo CLI version is 4.10.1, SDK 42, iOS is 14.8 but the issue has been witnessed on multiple different devices.
Expo Go is up to date, I even uninstalled Expo Go and reinstalled it just in case. Didn't tried that failing version in testflight (some account stuff that needs to be handled with Apple before we can publish anything again), but I need this to work again in expo go anyway.
Nothing in that file has been changed for almost 120 days.
I made a bare app that reproduce the same issue. Code can be found here : https://github.com/sebastien-f/expo-test-video
Issue is create by camera.recordAsync() that stops almost as soon as it starts. Only happens when the quality prop is used. For now, I've removed the parameter and opened an issue on Github : https://github.com/expo/expo/issues/14432

AWS Amplify federated google login work properly on browser but dont work on Android

The issues are when I am trying to run federated authentication with the help of amplify auth method on the browser it works fine, but when I try to run it on my mobile.
It throws error No user found when I try to use Auth.currentSession() but the same work on the browser.
tried to search about this type of issue but I found related to ionic-cordova-google-plugin not related to AWS Amplify Federated Login Issue.
Updating the question after closing the question with less debugging information without asking for any information.
This is issues raised in git hub with respect to my problem.
Issue No. 5351 amplify js it's still in open state.
https://github.com/aws-amplify/amplify-js/issues/5351
Another issue 3537 which is still in Open
These two issues has the same scenario like me, I hope its enough debugging information, if more required mention comment instead of closing without notification, it's bullying for a beginner not helping
I fixed the above problem by referring a comment or wrapped around fix.
Link that will take to that comment directly link to comment.
First read the above comment as it will give you overall idea of what exactly the issue is instead of directly jumping to the solution.
Once you read the comment you will be little unclear with respect to implementation as he has use capacitor and not every one are using capacitor.
In my implementation I ignore this part as I am not using capacitor.
App.addListener('appUrlOpen')
Now lets go to main step where we are fixing this issue, I am using deep links to redirect to my application
this.platform.ready().then(() => {
this.deeplinks
.route({
"/success.html": "success",
"/logout.html": "logout",
})
.subscribe(
(match: any) => {
const fragment = JSON.stringify(match).split('"fragment":"')[1];
// this link can be your any link based on your requirement,
// what I am doing it I am passing all the data which I get in my fragments.
// fragments consists of id_token, stage, code,response type.
// These need to be passed to Ionic in order for Amplify to run its magic.
document.location.href = `http://192.168.1.162:8100/#${fragment}`;
},
(nomatch) => {
console.log("Got a deeplink that didn't match", nomatch);
}
);
});
I got this idea by referring the issue in which the developer mentioned of sending code and state along with application deep linking URL.

xcode 8 PHPhotoLibrary.requestAuthorization causing crash

My app keeps crashing when running in the simulator everytime I try to request authorization for the photo library. I am using the following code in my appDelegate in didFinishLaunchingWithOptions:
if PHPhotoLibrary.authorizationStatus() != PHAuthorizationStatus.authorized {
PHPhotoLibrary.requestAuthorization({ (status: PHAuthorizationStatus) in
})
}
Using xcode 8 beta with swift 3.0.
In my testing, iOS 10 doesn't like to output useful error messages unless you're running on an actual device. In this particular case, you probably haven't provided the key NSPhotoLibraryUsageDescription in your Info.plist file, and that value must be provided before requesting authorization.
Have to allow access to photos on device. Add below key and string to your info.plist. The autocomplete in the property list view is "Privacy - Photo Library Usage Description". Or just open your info.plist in source code view and add the following:
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photos.</string>

CaptureError.CAPTURE_INTERNAL_ERR on Android trying to use capture.captureImage

I am trying to write a hybrid app for Android using VS 2013 update 3 and the multi-device hybrid app extension (Cordova v3.5.0). Everything is working well except the Media Capture plugin. I am calling navigator.device.capture.captureImage(MediaCaptureSuccess, MediaCaptureError, { limit: 3 }) which opens up the camera app. I can take a picture but when I click Ok on the device, my error callback is executed with CaptureError.CAPTURE_INTERNAL_ERR with no other information. I have tried switching to org.apache.cordova.media-capture#0.3.4 (currently using 0.3.1) but when I try to compile, I get a plugman error when it tries to retrieve it. I have searched the debug output for clues and the only thing that I found was the following line "Unknown permission android.permission.RECORD_VIDEO in package..." but that seems to be a valid user permission. When I look at capture.java generated by the build, I can see that this error is returned if there is an IOException occurs.
Does anyone have any suggestions on how to fix this or what to check next?
Try this plugin
Config:
<vs:feature>org.apache.cordova.camera#0.3.0</vs:feature>
JS:
navigator.camera.getPicture(onSuccess, onFail, {
quality: 30,
destinationType: Camera.DestinationType.FILE_URI,
saveToPhotoAlbum: true
});