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.
Related
I'm working on a project that includes a module that helps with electricity recharge, so what happens is that the user's data is already saved in the app and when they choose to recharge, the app opens up this webpage in a web view.
Currently, I'm using WebBridgeView for opening the webpage as:-
render() {
return (
<WebViewBridge
ref="webviewbridge"
onBridgeMessage={this.onBridgeMessage.bind(this)}
source={{uri: "https://currencypin.com/PrepaidMeterPaymentsV2.0/cartwiz?c=IN&p=5&pm=tm"}}/>
);
}
}
Now, what I want is that when the webpage opens, the form fields come prefilled with the custom data that I have. So that the only field that the user needs to fill on the page is the CAPTCHA.
I was following this article for achieving the same, but it actually assumes that the website is customizable. Which is not possible in my case because it belongs to a 3rd party vendor.
What are the ways to achieve this?
You have to use the injectedJavaScript prop from WebView.
First declare a jsCode variable:
const amount = 2
const jscode = `
if (document.getElementById('txtAmount') == null) {
// field not existing, deal with the error
} else {
document.getElementById('txtAmount').value = '${amount}';
}
`
Please notice the " ` " character. Used to put variables in strings.
Then use it like so:
<WebViewBridge
ref="webviewbridge"
onBridgeMessage={this.onBridgeMessage.bind(this)}
injectedJavaScript={jsCode}
I am caching a few images like:
Image.prefetch(`${remoteImageUrl}/100x100`)
Image.prefetch(`${remoteImageUrl}/800x800`)
Image.prefetch(`${remoteImageUrl}/1000x1000`)
While that is happening a component that wants to show the highest resolution version currently available may render.
if 1000 cached use 1000,
elseif 800 cached use 800,
elseif 100 cached use 100
How do I test "if 1000 is cached"?
I tried .complete this with no luck.
if (Image.prefetch(`${remoteImageUrl}/1000x1000`).complete) {}
How do you check the existence of a prefetched image in React Native?
It doesn't look like this is possible using the out of the box APIs.
First of all, Image.prefetch doesn't contain any other methods related to the prefetch cache.
Diving into the detail - on iOS, Image.prefetch calls the native RCTImageViewManager.prefetchImage method, which indirectly ends up loading the image and storing it in RCTImageCache. Since there are no bridged functions that access the image cache directly, you're somewhat out of luck.
However, you could work around it by wrapping your calls to Image.prefetch in a function that tracks which ones have completed:
// imagePrefetch.js
const prefetchedImages = {};
export function prefetchImage(url) {
return Image.prefetch(url)
.then(val => {
prefetchedImages[url] = true;
return val;
});
};
export function isPrefetched(url) {
return prefetchedImages[url] !== undefined;
}
Keep in mind that this is specifically a workaround for images you prefetch, not other images that happened to be cached from being loaded through other means.
<Image source={require(rowData.avatar)} />
error : Unknown name module ‘xxxxxx’
Why can print out the path but can't read pictures？
Try
<Image source={(rowData.avatar)} />
Images cannot use dynamically generated sources. Assuming what you're trying to do is to load an image as part of your package, your code must read:
const avatar = require('./path/to/avatar.jpg');
Only then you can use avatar as your source a follows:
rowData = {
avatar: avatar
}
<Image source={rowData.avatar} />
If you know before hands what images are going to be needed in your app, I suggest that you create an asset file in which you add all your hardcoded require, such as:
// assets.js
return {
avatar1: require('./path/to/file.jpg'),
avatar2: require('./path/to/file.jpg'),
avatar3: require('./path/to/file.jpg'),
}
And then you would construct your rowData as follows:
import avatars from './assets';
rowData = {
avatar: avatars['avatar1']
}
Where you would likely replace avatar1 with a variable containing the key pointing to the avatar you're interested in.
Here is an asset file I used for one of my projects.
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];
}
I'm building an app with titanium and I would like to save in the phone, the user's profile picture. In my login function, after the API response, I tried to do :
Ti.App.Properties.setString("user_picture_name", res.profil_picture);
var image_to_save = Ti.UI.createImageView({image:img_url}).toImage();
var picture = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, res.profil_picture); //As name, the same as the one in DB
picture.write(image_to_save);
And in the view in which I want to display the image :
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,Ti.App.Properties.getString("user_picture_name") );
var image = Ti.UI.createImageView({
image:f.read(),
width:200,
height:100,
top:20
});
main_container.add(image);
But the image doesn't appears. Could someone help me ?
Thanks a lot :)
There are 2 issues with your code:
1 - You cannot use toImage() method unless your image view is rendered on UI stack or simply on display. Rather you should use toBlob() method.
2 - Point no. 1 will also not work the way you are using because you cannot directly use toBlob() method until or unless the image from the url is completely loaded, means until it's shown on image view. To check when the image is loaded, use Ti.UI.ImageView onload event
But, there's another better approach to do such type of tasks.
Since you have the image url from your Login API response, you can use this url to fetch image from http client call like this:
function fetchImage() {
var xhr = Ti.Network.createHTTPClient({
onerror : function() {
alert('Error fetching profile image');
},
onload : function() {
// this.responseData holds the binary data fetched from url
var image_to_save = this.responseData;
//As name, the same as the one in DB
var picture = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, res.profil_picture);
picture.write(image_to_save);
Ti.App.Properties.setString("user_picture_name", res.profil_picture);
image_to_save = null;
}
});
xhr.open("GET", img_url);
xhr.send();
}
You don't need to manually cache remote images, because
Remote images are cached automatically on the iOS platform and, since
Release 3.1.0, on the Android platform.
[see docs here & credit to Fokke Zandbergen]
Just use the remote image url in your UI, at first access Titanium will download and cache it for you; next accesses to the same image url will actually be on the automatically cached version on local device (no code is best code)
Hth.