I would like the user to select an Album and then display the photos of it in react-native. There is the CameraRoll and it has the ability to filter by groupName, but I did not find a way of how to retrieve these groupNames. Does anybody know how to do this, or do I need to write a native plugin?
well, at least you can select a lot of items and group...
import R from 'ramda';
import { CameraRoll } from 'react-native';
let groupNames;
CameraRoll.getPhotos({
first:20000
}).then(
(result) => {
const groupNamesAr = R.map(
(item) => {
return item.node.group_name;
}
)(result.edges)
groupNames = R.countBy((i)=>i)(groupNamesAr);
}
)
Use this https://github.com/marcshilling/react-native-image-picker it will let you select an image from any album.
I don't think this is currently possible. See this issue in the official repository. You can upvote this feature request if you're looking for this to be implemented.
Simple answer is MediaLibrary.getAlbumsAsync()
Related
I am building an app with React Native.
After a user takes a photo of an invoice, I would like to be able to extract some key data from the text in the image. I know I will need an OCR of some sort. Is there an easy solution to this? I've seen react-native-text-detector. Is that my best option? Is there a best solution to this?
You can use react-native-firebase-mlkit. It has a lot more functionality than just performing OCR. It also has both on-device support and cloud based support depending on your need.
Here is the library's GitHub page.
It's a wrapper for Google's ML Kit
Heres's a simple example of how to use it:
import RNMlKit from 'react-native-firebase-mlkit';
export class textRecognition extends Component {
...
async takePicture() {
if (this.camera) {
const options = { quality: 0.5, base64: true, skipProcessing: true, forceUpOrientation: true };
const data = await this.camera.takePictureAsync(options);
// for on-device (Supports Android and iOS)
const deviceTextRecognition = await RNMlKit.deviceTextRecognition(data.uri);
console.log('Text Recognition On-Device', deviceTextRecognition);
// for cloud (At the moment supports only Android)
const cloudTextRecognition = await RNMlKit.cloudTextRecognition(data.uri);
console.log('Text Recognition Cloud', cloudTextRecognition);
}
};
...
}
In my react native app i am showing several images in <Image> tags and i load those images from local folder.
<Image source={require('./src/images/image1.jpg')} />
I want to save image when the user tapped on it.
I can get which image user tapped and pass it to the function. But i put a single image path to it.
_onPressButton(imgName) {
CameraRoll.saveToCameraRoll( './src/images/image1.jpg' , 'photo').then(function(result) {
alert(result);
}).catch(function(error) {
alert(error);
});
}
But this gives me an error in iOS emulator saying it cant find the image in the path.
When i give as,
CameraRoll.saveToCameraRoll( 'https://i.imgur.com/JnrwMpZ.jpg' , 'photo')
It works.
But i want to save these files in my src/images folder.
How can i get a path of this image file OR get this done..?
I appreciate any help regarding this.
Thanks
Here is my solution with Expo, worked in android and should work on ios too
onSave = async () => {
const asset = Asset.fromModule(require('./src/images/image1.jpg'))
if (!asset.localUri) {
await asset.downloadAsync();
}
const uri = asset.localUri;
CameraRoll.saveToCameraRoll(uri, 'photo')
}
I'm trying to pull dynamic data (form) to a google sheet.
I can't seem to find the right function.
I'm running this:
function name(){
return $('input[type="text"]').val();
}
I tried this:
function fullname(){
return $('#form-field-1-1').val();
}
No success for now.
I've attached the elements below.
Thank you [https://i.stack.imgur.com/Tt5Gk.png]
Your best choise is to use a Variable "DOM element" and capture it by ID. but if you prefer a custom JS this will do:
function(){
return document.getElementById('form-field-1-1').innerHTML;
}
Hope it helps.
Youtube 3.0 is going to kill off some useful slider code, instead I want to get it updated.
To start off, I've looked through the API and the migration tips and the deprecated functions lists, and it makes sense. However I'm not familiar enough with how this gallery was coded to easily update this to function on 3.0 quickly.
So i figured I'd ask the question on here to see if anyone can get it done sooner to save some time.
I did not code this! This was distributed under the apache license and made by Simone Gianni. It's been useful for me and many others so I want it to be updated and continue being useful for everyone.
The Original: http://jsfiddle.net/NmvA9/490/
I'm pretty sure at this point that everything is fine except for the use of getJSON which is deprecated in 3.0.
$.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
var feed = data.feed;
var videos = [];
$.each(feed.entry, function(i, entry) {
var video = {
title: entry.title.$t,
id: entry.id.$t.match('[^/]*$'),
thumbnails: entry.media$group.media$thumbnail
};
videos.push(video);
});
Thanks in advance.
Edit: Thanks to jlmcdonald for the help. You really rocketed me forward on this. You were right by the way, it was the thumbnails, or so I thought? Once resolving all the problems with the thumbnails i'm left with what seems to be blank returns for no reason. Viewable here: http://jsfiddle.net/ynAtb/10/
Not sure why, I'm assuming I'm making a valid get to the wrong place.
Thanks again.
First of all, a couple of caveats:
1) In V3 of the YouTube API, any read request will require an API key, which each developer has to get on his/her own at http://console.developers.google.com. This will make it so that, if you are redistributing the new code, it won't be truly plug and play ... devs will have to edit it to include their own API key in the relevant location.
2) You might need to slightly change any code that actually implements the thumbnails ... the thumbnail object in V3 uses different parameter names for the various types of thumbnails.
Anyway, having said that, here's how you'd translate the above code to V3:
var videos = [];
$.get('https://www.googleapis.com/youtube/v3/channels?part=snippet&forUsername='+allopts.user+'&key=', function(channeldata) {
$.get('https://www.googleapis.com/youtube/v3/search?order=date&part=id,snippet&channelId='+channeldata.items[0].id+'&key=', function(videodata) {
$.each(videodata.items, function(k,v) {
var video = {
title: v.snippet.title,
id: v.id.videoId,
thumbnails: v.snippet.thumbnails
};
videos.push(video);
});
});
});
I'm looking to do a Play Scala project where I'll do especially drag & drop.
Is jQuery UI the best and the simplest way to do that? and How could one do this? could someone give me some examples or pointers?
In Play 1.0 there is a good example on how to use jQuery UI (http://www.playframework.com/modules/jqueryui-1.0/home) but I don't found examples or documentation on Play2.0 Scala !
first of all you need to define an endpoint for your data in the controller.
Simething like this:
def autocompleteSearch(a: String) = Action {
request =>
val data = List("apple", "apple iphone", "apple ipad", "microsoft windows", "microsot office");
val filteredData = data.filter(_.startsWith(a))
Ok(Json.toJson(filteredData))
}
Then you need to add this endpoint to your routes:
GET /some-ajax controllers.Application.autocompleteSearch
Then in your .scala.html file you can write a script that will do a get you you, example:
var updateTime = function() {
$.get("#routes.Application.timeUpdate()", function(data) {
display.html(data)
})
return false
}
When you have the var you just pass it to the jQueryUI.
My examples are copied from different things and they don't really fit together :) but I hope you can grasp the general idea.
Sorry the answer is not more specific, but I'm no JavaScript master and had to fight with the jQuery once, and this is what I have left from the struggle.
Cheers!