i am using react-native-camera in my app.
What i want is to be able to select photos and videos from gallery.
<View>
<Text onpress={}>Library</Text>
</View>
If i click on library My phone's library should open containing all images and videos in my phone
You have to use a different package: React-Native-Image-Picker.
React-Native-Camera is for recording pictures/videos.
I got the solution. Actually its not possible with react native camera.
So i switched back to ImagePicker and set mediaType:'mixed'(only for ios).
However i had to add a change in ImagePickerManager.m. I added
|| [[self.options objectForKey:#"mediaType"] isEqualToString:#"mixed"]
in the if condition which previously looked like
if ([[self.options objectForKey:#"mediaType"] isEqualToString:#"video"])
and it did the trick
Sorry i had to add below code in place of else block of above if
if ([[self.options objectForKey:#"mediaType"] isEqualToString:#"video"]) {
self.picker.mediaTypes = #[(NSString *)kUTTypeMovie];
} else if ([[self.options objectForKey:#"mediaType"] isEqualToString:#"mixed"]) {
self.picker.mediaTypes = #[(NSString *)kUTTypeMovie, (NSString *)kUTTypeImage];
} else {
self.picker.mediaTypes = #[(NSString *)kUTTypeImage];
}
Related
From some research, I've figured out that expo libraries like takePicturesAsync() are able to take a picture and save it to the app's cache. However, the default state for libraries like these is to save the whole image. Is there any way for me to save a specific part of the image (e.g. the 2500 pixels at the center of the screen)?
Thanks!
You can use the onPictureSaved event to grab & manipulate the image.
takePicture = () => {
if (this.camera) {
this.camera.takePictureAsync({ onPictureSaved: this.onPictureSaved });
}
};
onPictureSaved = photo => {
console.log(photo);
}
I want to make links navigate to a different screen in my messaging app. Is there a way to make TouchableOpacity inline?
Here is a quick workaround, this is not highly optimized but should work in most cases
function createTextLinks(text) {
let texts = text.split(' ');
let comps = texts.map((link) => {
let linking = link.match(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
if(linking) return <TouchableOpacity onPress={() => Linking.openURL(linking)}>{linking}</TouchableOpacity>
return link
});
//insert space again
comps = comps.map(comp=>[comp," "]);
return comps.flat()
}
Now you can use it like following
<Text>
{
createTextLinks_(
"If you find this interesting, email us at https://www.saachitech.com or contact us at http://stackoverflow.com and we will help you out! "
)}
</Text>
Note
React Native Text have a data detector property which convert a link to hyperlink but it’s only available on Android. Here is the link https://reactnative.dev/docs/text#datadetectortype
I would like to know if is it possible to redirect to the Youtube app when I press a tab in a DrawerNavigator ?
For example if I have a DrawerNavigator with an item Our Youtube Channel, if I click on it, it will open the youtube App on a specific channel ? Does a specific library exists ?
Thanks !
Try for linking library
and use this code
Linking
.openURL( 'vnd.youtube://user/channel/' + channel_id )
.catch( ... )
For example:
<TouchableOpacity
onPress={() => {
Linking.openURL( 'vnd.youtube://user/channel/' + channel_id );
}}
>
<Text>Youtube channel</Text>
</TouchableOpacity>
This solution is based on the concept of openlink or deeplink.
I use this code to open youtube channel
Linking.canOpenURL('vnd.youtube://channel/' + channelId).then(supported => {
if (supported) {
return Linking.openURL('vnd.youtube://channel/' + channelId);
} else {
return Linking.openURL('https://www.youtube.com/channel/' + channelId);
}
});
I have an another question about youtube. I want to show a playlist when I click on a TouchableOpacity but this time it's in the view. Does it works like deepLinking or ?
In concrete, I have a few images on top, and when i click on one of the image it will show me the playlist that is assigned to this image and a videoPlayer.
Thanks
If you want to open a playlist you can try for
youtube://www.youtube.com/playlist?list=PLgD9br3bze22iMSimpPeQ85CIqLswcklR
or
'vnd.youtube://playlist/list/' + playlist_id
You can use this link to redirect any Youtube channel => vnd.youtube://c/xyzchannel in Linkin.openUrl() from react-native.
For Example:
<TouchableOpacity onPress={()=>Linking.openURL('vnd.youtube://c/TariqMasoodOfficial')}>
<Image
source={require('../../assets/youtube1.jpg')}
style={styles.footerImage}
/>
</TouchableOpacity>
I used youtube Image in TouchableOpacity to click. You can write your channel name right after 'c/' in a link.
I try to share multiple photos with other apps(telegram, Instagram,...)in react-native, but I don't know how to share more than one image at on call. any suggestion can be helpful,
thank you
I use this lib to share more than one image to another apps.react-native-share.
This is a simple way to do this on react native.
shareImage(images) {
const shareOptions = {
title: 'Share file',
urls:images,
};
return Share.open(shareOptions);
};
_renderShareIt(base64Items){
let selectedImages=[]
base64Items.map((images)=>{
// push selected images on an array
});
if(selectedImages.length > 0){
this.shareImage(selectedImages)
}else{
// show an alert, no image selected
}
}
hopefully it was useful :)
I have list of image in project's assets. I call api to get image name.
Then I use that name to show image:
if (name !== null) {
<Image source = {require('../assets/listImage/' + name)}/>
} else {
<Image source = {require('../assets/listImage/abc.png')}/>
}
But app crash because of name is null. It crash even before first screen run (this code is in my 3rd screen in navigation)
UPDATE: full code: https://drive.google.com/open?id=1SlvJ7KRrhmewDxEBgJQ_QD47LUk6sDDb
React-native doesn't support this kind of dynamically image loading.
What i mean is require('../assets/listImage/' + name)} in here name is dyanimcally added while running this application. But as far as i know it is not supported.
You can use below kind of image loading instead of this
if (name !== null) {
switch(name) {
case example1:
<Image source = {require('../assets/listImage/image1')}/>
break;
case example2:
<Image source = {require('../assets/listImage/image2')}/>
break;
...........
}
And especially this name should be switch compatible otherwise use if the condition for it as well. Basically, I need to sat don't dynamically load image while running. Use this kind of code for it
Navigate to this React Native - Image Require Module using Dynamic Names and see answers. You can find another method that can use to load the image. Then select method what u want.