I have used RNCamera in my project but I don't know where is it saved in the cache. How can I preview the image and delete the image. The app is taking a lot of cache memory in my android phone.
From the documentation
uri: (string) the path to the image saved on your app's cache directory.
takePicture = async() => {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
console.log(data.uri);//print uri for image saved
}
};
You can check images in the gallery if not you predefined file location.
Please check takePicture = async function() from following source which returns data.uri and you have full control to move your file and the display images as well as you can delete.
https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md
Related
I am writing test cases for ImageBackground and Image component in React native but the test cases is getting failed as I am using local assets. It is unable to fetch the location of the assets folder I guess. Can someone help me out with this issue?
test('renders Background image', () => {
const { getByTestId } = render(LandingScreen);
expect(getByTestId('logo').toBeInTheDocument);
})
test('Logo must have src = "/logo.svg" and alt = "Logo"', () => {
render(LandingPage);
const logo = screen.getByRole('logo');
expect(logo).toHaveAttribute('source', '../../../assets/logo.png');
});
it(" Product introduction check background Image present or not", () => {
const logoImg = LandingScreen.root.findByProps({
testID: "logo",
}).props;
expect(logoImg).toBeDefined();
});
it('should display a local image when given a valid image file path', () => {
// Render the Image component with the provided image file
const imageComponent = shallow(<Image source={require("../../assets/authBg.png")} />);
expect(imageComponent.find('logo').prop('src')).toEqual(logo);
})
I have tried these code for test cases but getting error this kind of error below are attached Screenshots
[enter image description here](https://i.stack.imgur.com/UX1mg.png)
In this post, React Native Expo: Trouble Saving an Expo ImagePicker image to a local folder, a user asked about saving a user-selected image to a local file on the users device. However, I want to save a image to the expo apps main directory. Below is the code I have that uses expo's image picker. The code allows the user to pick an image from their device. I just need help writing the selected image to the app's directory. Thanks for the help!
const [image, setImage] = useState(null);
const pickImage = async () => {
// No permissions request is necessary for launching the image library
result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
base64: true,
});
console.log(result);
if (!result.canceled) {
setImage(result.assets[0].uri);
}
var inputPath = result.assets[0].uri;
Use FileSystem.readAsStringAsync to read the image data and then FileSystem.writeAsStringAsync to write the data to FileSystem.documentDirectory i.e. application directory.
I can't find how one would get (using expo packages) the local uri like file:///storage/emulated/0/DCIM/Camera/... from user picking an image from their media library without having to re-save/duplicate the image.
This gives me a paginated structure of user's photos and contains the uri I'd expect:
await MediaLibrary.getAssetsAsync({
mediaType: [
'photo',
],
});
However that does not open the media library, what does is:
await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePickerExpo.MediaTypeOptions.Images,
presentationStyle: 0,
});
However uri here is something like file:///data/user/0/host.exp.exponent/cache/... which looks to me like an uri to a temporary cache, not the permanent uri to the local file.
Is there a way how to get the permanent media library uri from the image picker?
(Without having to basically create your own gallery and picker using the getAssetsAsync() ?
This is my code! so help you!
if (Platform.OS === 'ios') {
const info = await MediaLibrary.getAssetInfoAsync(item.id)
const uri_local = info.localUri;
item.uri = uri_local;
console.log("test image: ", info)
}
else if (Platform.OS === 'android')
{
}
I am using React Native Share library, a good one,
I just need little help,
It is sharing multiple images with same caption,
i just want to share multiple images with separate message (caption) to each image,
suppose, if there is 5 images, then caption to 5 images is different not same.
In current situation, it share 5 images with same message (caption)
Here is my code
var imgs=["base64IMAGE1...///","base64IMAGE2..///","base64IMAGE3..///"];
let shareImage = {
title:"title",
message:"this is message need to send separate to each image",
urls:abcc,
subject: "Image"
};
Share.open(shareImage).catch(err => console.log(err));
I have attached current situation screenshots..
image 1 on whatsapp
image 2 on whatsapp
all sent with same caption, i just to send multiple images with separate messages
ThankYou.
I've created working example to share multiple or single images using react-native-share
CheckOut ExpoSnack Here
added comments before every method what it'll do and what needs to be replaced.
// multiple images share example
const shareMultipleImages = async () => {
const shareOptions = {
title: 'Share multiple files example',
// here replace base64 data with your local filepath
// base64 with mimeType or path to local file
urls: [base64ImagesData.image1, base64ImagesData.image2],
failOnCancel: false,
};
// If you want, you can use a try catch, to parse
// the share response. If the user cancels, etc.
try {
const ShareResponse = await Share.open(shareOptions);
setResult(JSON.stringify(ShareResponse, null, 2));
} catch (error) {
console.log('Error =>', error);
setResult('error: '.concat(getErrorString(error)));
}
};
you can add local file path in shareMultipleImage method like this
urls: Array of base64 string you want to share. base64 with mimeType or path to local file (Array[string])
React Native Share Docs
const shareOptions = {
title: 'Share multiple files example',
urls: ["file..///","file..///","file..///"],
failOnCancel: false,
};
I use react-native-camera for capturing images and saving them in cameraRoll (CaptureTarget) for iOS devices, on capture I get image path in the following form
"assets-library://asset/asset.JPG?id=8B55D3E5-11CE-439A-8FC6-D55EB1A88D7E&ext=JPG"
How to use this path to display the image in Image component (from react-native)?
Previously I was using disk as CaptureTarget option, and I was able to show that image url Image component but now the requirements are to save image in camera roll?
I have used RNFetchBlob to get base64 from "assets-library://.." url, my capture function is
this.camera.capture()
.then((data) => {
// console.log(data);
RNFetchBlob.fs.readFile(data.path, 'base64')
.then((base64data) => {
let base64Image = `data:image/jpeg;base64,${base64data}`;
this.props.addImagesToUntagged(data.path);
})
})
after that i give user some in-app functionality on this base64 data and finally when I need to send this to s3 server, I use axios & RNFetchBlob to send this data.following code gives me signed url for s3
axios.get(ENDPOINT_TO_GET_SIGNED_URL, {params:{'file-name': file.name,'file-type': file.type,"content-type": 'evidence'}})
.then(function (result) {
// console.log(result);
returnUrl = result.data.url;
var signedUrl = result.data.signedRequest;
return uploadFile(file,signedUrl)
})
and in my uploadFile function i upload images through following code
RNFetchBlob.fetch('PUT', signedUrl,
{'Content-Type' : file.type},
RNFetchBlob.wrap(file.uri)
)
.then(resolve)