olofd / react-native-photos-framework Goto Github PK
View Code? Open in Web Editor NEWA modern and comprehensive CameraRoll/iCloud-library-API for React Native 📸 📹
License: MIT License
A modern and comprehensive CameraRoll/iCloud-library-API for React Native 📸 📹
License: MIT License
What is the point in using the cache when displaying single images / few images?
I think it should it be set to NO
.
There could be a point of using the cache and having allowsCachingHighQualityImages=YES
, for a some view where images are prepared and cached beforehand.
Maybe having NO
as default and an method to change it (globally, since it is shared)?
very interesting stuff :)
just wanted to know if you plan on support Android too?
Thanks
❌ ld: symbol(s) not found for architecture arm64
❌ clang: error: linker command failed with exit code 1 (use -v to see invocation)
[21:05:27]: Exit status: 65
Hi there! If I save a .gif to iCloud, getAssets
indeed returns a valid photos://
uri and a gif
mimeType, which is great... but passing this uri into the Image component doesn't actually render a moving gif. I have confirmed that a network-based gif does render correctly. Is there something that needs to be modified in the image loader? Is there a workaround? Thanks!!
I'm using RN 0.45.1 and the import ReactPropTypes from 'react/lib/ReactPropTypes'
in src/index.js fails. It results in "Module does not exist in the module map..."
The PropTypes
module is not used on src/index.js
so you can safely comment it out. If PropTypes
are needed you can use import ReactPropTypes from 'prop-types'
.
Hey! I'd love to use this for picking and showing videos, but I'm currently stuck.
I can use the API to get a list of video assets, but trying to use react-native-video (master or your fork) crashes my app.
Any help or tips would be amazing!! :)
P.S. I tried to get the example app in this repo running, but failed to do so
"dependencies": {
"react": "~15.4.0",
"react-native": "0.41.2",
"react-native-photos-framework": "^0.1.1",
"react-native-video": "git://github.com/olofd/react-native-video.git#react-native-photos-framework",
...
}
import RNPhotosFramework from 'react-native-photos-framework'
import Video from 'react-native-video'
...
async componentDidMount() {
const status = await RNPhotosFramework.requestAuthorization()
if (status.isAuthorized) {
const {assets} = await RNPhotosFramework.getAssets({
startIndex: 0,
endIndex: 1,
includeMetadata: true,
fetchOptions : {
mediaTypes: ['video'],
sourceTypes: ['userLibrary', 'cloudShared', 'itunesSynced'],
}
})
this.setState({videos: assets})
}
}
...
render() {
...
{this.state.videos.map((video, i) => {
console.log(video.video) // THIS IS UNDEFINED
// return <Image key={i} source={{uri: video.uri}} style={{width : 100, height : 100}}></Image> // THIS WORKS
return <Video //THIS CRASHES
source={{uri: video.uri}}
key={i}
resizeMode='cover'
muted={false}
/>
})}
Here's the crash:
When trying to install I'm getting this error during postinstall
Xcode v10.0
react-native v0.57.1
$ npm i --save react-native-photos-framework
> [email protected] postinstall /Users/tommy/Git/noisolation/FamilyFrame/node_modules/react-native-photos-framework
> node install.js
module.js:549
throw err;
^
Error: Cannot find module 'plist'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/tommy/Git/noisolation/FamilyFrame/node_modules/react-native-photos-framework/local-cli/link/ios/copyAssets.js:5:21)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
install the latest version 1.0.3
RN 0.43.3
xcode 8.2.1 8C1002
I have got this error
/.../node_modules/react-native-photos-framework/ios/RNPhotosFramework/RCTConvert+RNPhotosFramework.m:103:77: Use of undeclared identifier 'PHAssetCollectionSubtypeSmartAlbumLivePhotos'; did you mean 'PHAssetCollectionSubtypeSmartAlbumVideos'?
/.../node_modules/react-native-photos-framework/ios/RNPhotosFramework/RCTConvert+RNPhotosFramework.m:103:77: Use of undeclared identifier 'PHAssetCollectionSubtypeSmartAlbumLivePhotos'; did you mean 'PHAssetCollectionSubtypeSmartAlbumVideos'?
Hi,
I try to upload 400 Pictures to the camera roll and after 5 seconds i got the following errors and the app crashed:
RNPhotosFramework.createAssets({
images : images,
album : album,
includeMetadata : false
}).then((res) => {
console.log('done');
}).catch((err) => {
console.log(error);
});
[812:43385] Error: Timeout waiting for response from assetsd in -[PHChangeRequestHelper _generateUUIDIfNecessary:]
[812:43385] [PhotoKit] Timeout waiting for response from assetsd in -[PHChangeRequestHelper _generateUUIDIfNecessary:] (retries 3)
[812:43001] Got memory pressure notification (critical)
Message from debugger: Terminated due to memory issue
The pics are very big and the first 5 pics are uploaded to the camera roll.
Is there anything i can do to avoid that or improve the memory?
Many thanks!
As we are reaching 1.0 (https://github.com/olofd/react-native-photos-framework/milestone/1).
I'm wondering if you, the users of this library, have any input on what we should focus on going forward and if there are any big holes, gaps, in the API that you would like to be implemented?
Feel free to ask questions and propose new ideas in this thread.
After @justinsherwood and mine implementation of reversed indices we did not do an exception of this reversing when using a sortDescriptor
. This should be done so that the assets always come in the correct order.
I'm seeing hidden photos showing up as blank instead of rendering. Is this some sort of permissions issue?
I am trying to access system 'Screenshot' album (ios 10.3.3.) with the the RNPhotosFramework.getAlbumsByTitle(). It seams I can only acess albums under 'My Albums' heading. How can I acess 'Screenshots'?
Thank you for this awesome library. I am running into an issue deleting an asset from a smart album. I am trying to delete an image from the Screenshots album to be exact. I am getting back this error as a Promise rejection when calling:
album.removeAsset(myAsset)
I am getting back this error:
Error: The operation couldn’t be completed. (Cocoa error -1.)
at createErrorFromErrorData (NativeModules.js:116)
at NativeModules.js:79
at MessageQueue.__invokeCallback (MessageQueue.js:290)
at MessageQueue.js:127
at guard (MessageQueue.js:46)
at MessageQueue.invokeCallbackAndReturnFlushedQueue (MessageQueue.js:126)
at debuggerWorker.js:71
I googled Cocoa error -1, but I am not sure I found anything helpful.
Any help would be appreciated. Thanks again!
I tried using this library today however the asset does not return the MimeType. And neither is it in the extension. I need the mimeType to upload it without using the in-built ajaxHelper.
The latest version on npm is still 1.0.8 and the fix for RN 0.48 is not yet applied.
Hi
I am trying to get access to the video file that is associated with a live photo. How do I go about this? I've been trying to get a uri for the video file with no success.
Thanks in advance
On a fresh project:
RNPhotosFramework.getAssets({
includeMetaData: true,
startIndex: 0,
endIndex: 100,
fetchOptions : {
mediaTypes: ['image'],
sourceTypes: ['userLibrary'],
sortDescriptors : [
{
key: 'creationDate',
ascending: true,
}
],
}
}).then((data) => {
console.log('FETCHED DATA:',data);
}, (e) => {
console.log('ERROR:',e);
})
Array of ImageAssets are returned, but no creationDate or modificationDate.
NSLog of params in getAssets on iOS native code(RNPFManager.m):
{
assetDisplayStartToEnd = 1;
endIndex = 100;
fetchOptions = {
mediaTypes = (
image
);
sortDescriptors = (
{
ascending = 1;
key = creationDate;
}
);
sourceTypes = (
userLibrary
);
};
includeMetaData = 1;
startIndex = 0;
}
..but all the following RCTConvert calls seems to resolve to null, including this:
BOOL includeMetadata = [RCTConvert BOOL:params[@"includeMetadata"]];
My Objective C skills are limited so didn't manage to solve this. Hopefully my javascript call above is correct.
Tested on React Native 0.41.0 (and 0.43.1) using react-native-photos-framework 1.0.1
After installing lib, I faced with the problem after runing android app, in result I have this error Could not find react-native-photos-framework’s native module. It seems it’s not linked correctly in your xcode-project.
. How to resolve this issue? I want to use this lib only for ios, but for android - default CameraRoll from RN. Thanks for any help.
p.s. IOS works fine
I got an error trying to use this function from the readme but it seems to not exist. I searched the Repo and was able to find the get by title but not getAlbumByLocalIdentifier. On another note this Repo looks wonderful as the native CameraRoll is a no go. I was building a native solution but after seeing this I am willing to try to help with this. Looks great. Getting ready to test some more.
The docs state that prepareForSizeDisplay
takes Rect(width, height)
but that's not a thing in JavaScript.
I tried supplying an Object instead but that also doesn't work.
Can the docs be updated with the correct information, because currently prepareForSizeDisplay
doesn't seem to be usable.
Hi! Is there any (efficient) way of fetching X number of randomly chosen photos using this API?
Thanks for a great library!
In our use case we first present photo thumbnails in a collection (user can keep scrolling to see all theirs photos), user picks one to preview and then send it. We want to make sure the max resolution image gets sent at that point.
After checking around in this library/RN and apple docs, I think I have understood the following:
targetSize
to get from photos. In our case, since the thumbnails are small they get downloaded quickly while scrolling down, even without using the caching option. When going into preview a larger version version of the image gets downloaded, nice!deliveryMode
(which is default), will download a smaller than full resolution image, depending on the Image view component size.resizeMode=PHImageRequestOptionsResizeModeNone
and targetSize= PHImageManagerMaximumSize
which RCTImageLoaderRNPhotosFramework sets if size
is CGSizeZero
, but that is only the case for Image using capInsets
(?? according to reloadImage in RCTImageView.m)Could we add an option to withOptions
to support this?
after installing and linking I get this error
Undefined symbols for architecture x86_64:
"OBJC_CLASS$_RCTSRWebSocket", referenced from:
objc-class-ref in libReact.a(RCTInspectorPackagerConnection.o)
"OBJC_CLASS$_RCTReconnectingWebSocket", referenced from:
objc-class-ref in libReact.a(RCTPackagerConnection.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
how do we support reading asset-library://
uri and display that into a Image
element
Does this work for android as well?
can we do react-native install react-native-photos-framework
to do the whole thing?
As discussed in #28, we should add PHAssetMediaSubtypePhotoDepthEffect to the available subTypes.
If RCTImageLoader
is called like this:
If https://github.com/facebook/react-native/blob/master/Libraries/Image/RCTImageLoader.h#L78
then partialLoadHandler
will be nil
, resulting in a crash here:
https://github.com/olofd/react-native-photos-framework/blob/master/ios/RNPhotosFramework/RNPFImageLoader.m#L116
Hi there, I am encountering this issue during installation. After a bit of research I came across this issue for a different react-native project which seems like it might be relevant here: invertase/react-native-firebase#386
Looks like EventEmitter.js was removed from the EventEmitter library as of RN 0.48.
My versions:
"react-native": "0.48.3",
"react-native-photos-framework": "^1.0.8",
platform: iOS
Failed at the [email protected] postinstall script 'node install.js'
I am on OSX, using homebrew nvm:
❯ node --version
v7.9.0
I had an existing RN project using 0.43.3 and RNPhotosFramework worked fine. I updated to the latest (0.45.1) and now I cannot build my project unless I comment out line 3 on PHChangeObserver.m
shown below.
I also created a new 0.45.1 project and it builds fine up until I add react-native-photos-framework
and link it. Here are some screenshots of the issues -
This happens to 0.35% of users in my application. I obtained these statistics using AppSee.
Error information:
iPhone 6s
iOS 11.3 Wi-Fi
Terminating app due to an uncaught exception 'RCTFatalException: Exception '*** -[__NSDictionaryM setObject:forKey:]: object cannot be nil (key: title)' was thrown while invoking getAlbumsMany on target RNPFManager with params ( ( { assetCount = exact; fetchOptions = { includeAllBurstAssets = 0; includeHiddenAssets = 0; sortDescriptors = ( { ascending = 1; key = title; } ); }; previewAssets = 1; subType = any; trackChanges = 0; trackInsertsAndDeletes = 0; type = smartAlbum; }, { assetCount = exact; fetchOptions = { includeAllBurstAssets = 0; includeHiddenAssets = 0; sortDescriptors = ( { ascending = 1; key = title; } ); }; previewAssets = 1; subType = any; trackChanges = 0; trackInsertsAndDeletes = 0; type = album; } ), 8570, 8571 ) callstack: ( 0 CoreFoundation 0x0000000184d7eda4 <redacted> + 252 1 libobjc.A.dylib 0x0000000183f385ec objc_exception_throw + 56 2 CoreFoundation 0x0000000184d17750 _CFArgv + 0 3 CoreFoundation 0x0000000184c4cc6c <redacted> + 948 4 Finery 0x0000000104d89954 Finery + 563540 5 Finery 0x0000000104d890f0 Finery + 561392 6 Finery 0x0000000104d88c80 Finery + 560256 7 Finery 0x0000000104d887d4 Finery + 559060 8 Finery 0x0000000104d97a84 Finery + 621188 9 CoreFoundation 0x0000000184d86580 <redacted> + 144 10 CoreFoundation 0x0000000184c65748 <redacted> + 284 11 CoreFoundation 0x0000000184c6a56c <redacted> + 60 12 Finery 0x0000000104f60614 _ZN14RNWebGLContext27jsTypedArrayFreeDeallocatorEPvS0_ + 1601380 13 Finery 0x0000000104fa1450 RCTFBQuickPerformanceLoggerConfigureHooks + 109428 14 Finery 0x0000000104fa11b0 RCTFBQuickPerformanceLoggerConfigureHooks + 108756 15 libdispatch.dylib 0x0000000184670b24 <redacted> + 24 16 libdispatch.dylib 0x0000000184670ae4 <redacted> + 16 17 libdispatch.dylib 0x000000018467aa38 <redacted> + 608 18 libdispatch.dylib 0x000000018467b380 <redacted> + 336 19 libdispatch.dylib 0x000000018467bd4c <redacted> + 340 20 libdispatch.dylib 0x000000018468411c <redacted> + 668 21 libsystem_pthread.dylib 0x00000001849a3e70 _pthread_wqthread + 860 22 libsystem_pthread.dylib 0x00000001849a3b08 start_wqthread + 4 )', reason: 'Exception '*** -[__NSDictionaryM setObject:forKey:]: object cannot be nil (...'
Base in this issue i'm pointing directly to this commit:
"react-native-photos-framework": "https://github.com/olofd/react-native-photos-framework.git#adaa91d8bd13e93cb18c5884d9fde27228a44ebb",
Environment:
OS: macOS Sierra 10.12.6
Node: 8.9.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.1 AI-173.4819257
Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0
Hi, I've noticed that sometimes, the size of my images affects if they're rendered at all. For example, giving an image {width: 100, height: 100}
works fine, but {width: 75, height: 100}
does not work. It renders a JPG placeholder instead. How can I go about fixing this? I noticed the prepareForSizeDisplay
param but I am not sure if it will help or how to format it.
Thanks!
My install kept failing with this error on [email protected]:
/Users/chris.rowley/rn-project/node_modules/react-native-photos-framework/install.js:23
if (!plist.NSPhotoLibraryUsageDescription) {
^
TypeError: Cannot read property 'NSPhotoLibraryUsageDescription' of null
at Object.<anonymous> (/Users/chris.rowley/rn-project/node_modules/react-native-photos-framework/install.js:23:15)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:427:7)
at startup (bootstrap_node.js:151:9)
at bootstrap_node.js:542:3
I've done some digging, and the issue seems to be that findProject
in react-native-photos-framework/local-cli/core/config/ios/findProject.js
takes the first *.pbxproj
file it finds... In my case, that was
ios/build/Build/Products/Debug-iphonesimulator/rn-project/LinkingIOS/RCTLinking.xcodeproj
which has no INFOPLIST_FILE
field... Removing the ios/build
dir fixes the issue, but it'd be great if findProject
could be more specific in the file it picks up?
This is not a GUI-component, it's an API
Any plans to make it available as an API?
I have been using "react-native-image-resizer" in my project and after I added "react-native-photos-framwork' it won't link because of duplicated symbols.
It looks like you have included most of the ImageResizer code in your project. I have tried to comment out the resizer code and import like this #import <RCTImageResizer/RCTImageResizer.h>
but it seems there is a mismatch in the APIs.
What is the the bes way to move forward? What do you recommend?
When using "deliverMode": "opportunistic"
it doesn't seem to load a high quality photo after the low res/quality one anymore. Using latest version with React Native 0.49.5.
I'm trying to save a video into a specific album, I use similar structure for the images and that works but the videos do not get saved into a album. This is on ios. I get the uri and the album but
if(Platform.OS === 'ios') {
this.camera
.capture({ mode: Camera.constants.CaptureMode.video })
.then(
(data) => {
const album = this.state.albumUsed;
return RNPhotosFramework.createAssets({
album: album,
videos: [{
uri: data.path
}],
})
.then(() => console.log('Video taken and saved in a album'))})
.catch((err) => console.log('Video taken error log:' + err));
this.setState({
isRecording: true,
});
In the createasset code below
createAssets(params, onProgress) {
const images = params.images;
const videos = params.videos !== undefined ? params.videos.map(videoPropsResolver) : params.videos;
let media = [];
if (images && images.length) {
media = media.concat(images.map(image => ({
type: 'image',
source: image
})));
}
if (videos && videos.length) {
media = media.concat(videos.map(video => ({
type: 'video',
source: video
})));
}
const {
args,
unsubscribe
} = this.withUniqueEventListener('onCreateAssetsProgress', {
media: media,
albumLocalIdentifier: params.album ?
params.album.localIdentifier : undefined,
includeMetadata: params.includeMetadata
}, onProgress);
return RNPFManager
.createAssets(args)
.then((result) => {
unsubscribe && this.nativeEventEmitter.removeListener(unsubscribe);
return result
.assets
.map(this.createJsAsset);
});
}
I get the media as
isAsset : true
isNetwork:false
type:undefined
uri:"assets-library://asset/asset.mov?id=A226D7D9-07FD-4583-B651-DA2EFBD585C4&ext=mov"
and videos as
isAsset:true
isNetwork:false
type:undefined
uri:"assets-library://asset/asset.mov?id=A226D7D9-07FD-4583-B651-DA2EFBD585C4&ext=mov"
then when runnnig result become com up with assets as empty
result
:
assets:Array(0)
length:0
Am I not using this correctly or should I rather be using RCTCameraRollRNPhotosFrameworkManager.createVideoAsset(videoWithUriProp); and then album.addAssetToAlbum(asset).then((status) => {}); ?
Add the requestImageForAsset function of the UIImage component to allow your plugin to access the jpg version of heic images. HEIC is really making developers cry.
I'm trying to list assets in my project in the same way the native photo app displays assets. (Most recent assets first including assets that have been modified)
When I sort assets by creationDate, edited photos do not appear at the top of the list. For example, a photo edited and exported using Adobe Lightroom for iOS appears next to the original photo instead at the top of the list since the createdDate remains the same. I would expect this newly created edited photo to be displayed at the top of my list, but it is still listed next to the original photo since the creationDate property did not change.
I've tried sorting by modificationDate, but this also leaves me with unexpected results since activities like favoriting or un-favoriting a photo changes the modificationDate and moves that asset to the top of the list, which doesn't happen in the native Photos app and is an unexpected behavior for sorting photos.
Just curious to know if you were aware of this issue and if you can think of a fix. This stackoverflow question discusses this issue and provides a possible solution by removing the sortDescriptors to achieve the same sorting as the native Photos app. I tried implementing this solution, which sort of worked, but the assets were sorted oldest to newest instead of my desired functionality of newest to oldest. Can you think of a way to implement this functinoality?
Cheers!
Hi there,
I always have this problem when compiling project. Can you help me on this?
My project is using older RN 0.35, is it some the problem?
Thanks.
I could not find an implementation of removeAssetFromAlbum
, but I found removeAsset
.
If you have an ImageAsset
and call the delete
function on it you'll receive unreocgnized selector sent to instance
.
This is due to the problem with following code -
src/asset.js
-
delete() {
//return NativeApi.deleteAssets([this.localIdentifier]); // WRONG
return NativeApi.deleteAssets([this]); // RIGHT
}
src/index.js
deleteAssets(assets) {
return RNPFManager.deleteAssets(assets.map(asset => asset.localIdentifier));
}
If you call RNPhotosFramework.deleteAssets
manually with an array of ImageAssets it will work but not if you call the delete
function on an individual ImageAsset. I modified src/asset.js
to the above and both calls work correctly. I can submit a PR if you would like.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.