I'm trying to import local images in my react native app, by using the "require" keyword, but everytime I use require I get a 500 response code from the development server.
<Image key={value + "1"} source={require("./giantdoubble.png")} style={{height: 100, width: 100}}/>
<TouchableOpacity onPress={() => alert(value)} key={value} style={styles.card} >
<Text>xD</Text>
</TouchableOpacity>
For some reason my PNG file used PNG with all caps, which made it unrecognizable by the code. Converting it to a png with lower case characters resolved the issue.
Related
I have to show a placeholder image before more images arrive following a network request. How can I transform the url (ex: https: //upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png) into base64? is there a react native library that shows a placeholder image and then transforms it into base64? if there is no library showing a placeholder image, how can I transform a url (eg: https: //upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png) into base64? I've tried using RNFetchBlob but from what I've read around it's not supported by expo.
<View style={ styles.container_image}>
{this.state.image && <Image
source={'how get url placeholder and then transform it into base64??' } style={{ width: 200, height: 200 }} />}
</View>
currently react native doesnt support any fallback / placeholder image.
What you can do is , you download a placeholder image, and display that till the time your api returns an image.
For example
const ImageComp = () => {
if(netWorkLoading){
return <Image source={require('../ your local image')} />
}
return <Image source={{uri:response.url}} />
}
Hope it helps. feel free for doubts
I am trying to display a base64 image from my api but get a white space in place of the image, its work fine on android - any ideas?
<Image
source={{ uri: Images.slider.slider1 }}
PlaceholderContent={<ActivityIndicator />}
style={{width: 100, height: 100}}
/>
Images.slider.slider1:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAFbCAIAAAChzFnkAAAAAXNSR0IArs4c6QAAIABJREFUeJx8vVuyLEmuKwZ6ZPW5pvlPST8y03Skc/tUOvRBAGTkrtZq611rZUb4gw8QpHt41P/5f/3fIC9574V/qqp/IUmAharTnx8CIADUAemL9QsB/QFcgH0BWFWFes6pQqFI9n8Bog5Q3dc551R1U9X9FwAUCuhuusnuDn1joQrFH
this is a known issue in react native 0.62 ,
kindly check this link Github RN .
What basically was done in the PR was :
For anyone else that comes across this just change the version of Flipper in the podfile to
versions['Flipper'] ||= '~> 0.37.0'
do let me know in case of any concerns
I'd like to use an iOS launch image as a background image in my React app, but I can't figure out how to reference it. I've tried a few things similar to the following:
<Image source={{uri: "LaunchImage"}} />
But I'm getting this error:
Module `LaunchImage` does not exist in the Haste module map`.
Any ideas?
Please include an image in your project src folder and please call image path using require() like this
<Image source={{uri: require('../Images/LaunchImage.png')}} />
here LaunchImage.png is its file name and 'Images' is the folder name
Try using Image Background tag e.g
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
I'm playing with react native and starting to build my first app.
I render 3 images to the screen.
One is displayed while the other 2 are not.
The urls are 100% valid and opened properly when pasting the address in browser.
The Image component is created in a a loop so all of them are identical besides the uri.
What can be the problem?
<View style={[styles.flex1, styles.imageRow, {backgroundColor: 'orange'}]}>
{images.map((d, i) => (
<View key={i} style={[styles.flex1, {borderWidth: 2, borderColor: 'black'}]}>
<TouchableOpacity onPress={() => navigate('Image', {uri: d, coachName})}>
<Image source={{uri: d}} style={{height: 100, width: 100}}></Image>
</TouchableOpacity>
</View>))}
</View>
working image url:
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/borochov1.jpg?alt=media&token=13f09af6-e8a9-42bc-bf8f-dee58891cca7
not working:
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/coaches%2Fliran1.jpg?alt=media&token=28738b27-dcdb-4c55-8af0-93413b6c6ea6
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/coaches%2Fliran2.jpg?alt=media&token=301f176f-5f94-422b-a80e-ec059d091059
reducing the images size solved the issue.
Given below code, react native complains
Requiring unknown module "../../images/Foo.png".If you are sure the module is there, try restarting the packager or running "npm install".
But the same code works fine if I hardcode the image source path in require call.
Code not working: has a method call to determine icon name. Notice the require('../../images/'+imageIconNameFor(prediction.type) line.
const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}>
<View style={styles.predictionItem}>
<Image style={styles.predictionIcon} source={require('../../images/'+imageIconNameFor(prediction.type))}></Image>
</View>
</TouchableHighlight>
);
function imageIconNameFor(predictionType) {
return "Foo.png";
}
Code working: Instead of calling a method to determine icon name, if I hardcode the icon name in require call, it works fine. Notice the require('../../images/Foo.png') line.
const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}>
<View style={styles.predictionItem}>
<Image style={styles.predictionIcon} source={require('../../images/Foo.png')}></Image>
</View>
</TouchableHighlight>
);
function imageIconNameFor(predictionType) {
return "Foo.png";
}
Why is there a different behavior when I concatenate strings to build image source?
Why require('../../images/'+imageIconNameFor(prediction.type) fails to render image but require('../../images/Foo.png') works fine? Note that method call was not a problem. Error message contains the complete path of the image computed using the method call. In spite of the complete path, react native complained about missing module with require.
React native version is 0.37.0. I tested this on ios-simulator.
Unfortunately, this is how react-native packager works, the image name in require has to be known statically. Here is example from official docs:
// GOOD
<Image source={require('./my-icon.png')} />
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
make sure give some style like this
<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
style={{width: 400, height: 400}} />