On my app's first screen, I have a touchable image that actually send route params to the second screen, which look like this :
<TouchableHighlight onPress={() => navigation.navigate("EcranDetails",{album_id:1,album_name:"David Bowie",album_date:1967,album_img:"david_bowie"})}>
<Image style={styles.album} source={require('../../assets/images/albums/david_bowie.jpg')} />
</TouchableHighlight>
And on my second screen, I would like to have this (image's url string from params inside the require):
<Image style={styles.album} source={require('../../assets/images/albums/david_bowie.jpg')} />
But this code doesn't work and I can't find anything related to params in require :
<Image style={styles.album} source={require('../../assets/images/albums/',{JSON.stringify(album_img)},'.jpg')} />
Any idea why it doesn't work and how I could fix that? Thanks a lot if you can help.
Solution found.
I've been told that we can't do dynamic require in React Native so I have to write the whole require into the route param to send, and it the receiver screen, in the image's source I just have to write the param name I've sent.
Example :
Sender screen
<TouchableHighlight onPress={() => navigation.navigate("EcranDetails",
{album_id:1,album_name:"David Bowie",album_date:1967,album_img:require("../../assets/images/albums/david_bowie.jpg")})}>
<Image style={styles.album} source={require('../../assets/images/albums/david_bowie.jpg')} />
</TouchableHighlight>
Receiver screen
const { album_id, album_name, album_date, album_img } = route.params;
<Image style={styles.album} source={album_img} />
All works fine now. HOWEVER, if for some reason it's bad practice or deprecated in any way, I'd love to know why.
Related
Hi so I am having the issue where after navigating to a different screen. My items.map does not seem to be executing...
The console.log() within the array.map is working it will execute after on mount of the screen it just is not returning the component inside of it until the screen is updated either by saving in visual studio or touching the screen because I have a pan responder implemented...
The below snippet of code draws a line for me a on players finger drag and the goal is to have them match them with different tabs that will appear but that is beside the point...
return (
<View style={{ flex: 1 }} {...panResponder.panHandlers}>
<Text>Hello World</Text>
<Svg>
{items.map((item) => {
console.log("IS THIS WORKING??");
return (
<MatchingDisplay
key={item.id}
listItems={item}
randItems={item}
numOptions={numOptions}
/>
);
})}
<Line
x1={startX}
y1={startY}
x2={endX}
y2={endY}
strokeWidth="5"
stroke="black"
/>
</Svg>
</View>
);
Is there a way to manually update the screen when the navigation first takes place or am I missing something in my code that I just can't seem to see.
I have already done something like this on two other screens and do not understand why now it is not working...
I should also add the device I am testing on is an Android device.
Any and all help is appreciated
I am displaying images in my react native app.
Here is how I am displaying the image:
<Image style={styles.image} source={{ uri: this.props.img }}
My image is not displayed, but when I put the url directly into the image I works fine
What is happening
You don't have to put this in elements, please remove it before props and use directly as below
<Image style={styles.image} source={{ uri: props.img }}
Make sure, if there is an image in your props that you've passed. console.log that prop.
Also, add this keyword only when you're using the class approach.
As can be seen from this snack, I embedded 2 identical animated gifs back to back.
The first one that loops for ever functions as expected.
But the second, the non-looping animated gif is lost when the application is sent to background and retrieved back to foreground.
Is there anything that can be done to avoid this?
import testAniGif from '../assets/test.gif';
import testAniGif2 from '../assets/test2.gif';
export default function AssetExample() {
return (
<View>
<Image style={styles.logo} source={testAniGif} />
<Image style={styles.logo} source={testAniGif2} />
</View>
);
}
I think you just need to implement proper syntax for Image attribute
<Image style={styles.logo} source={require(testAniGif)} />
<Image style={styles.logo} source={require(testAniGif2)} />
Have a look Image syntax https://reactnative.dev/docs/image
For better understanding you can follow this answer too : https://stackoverflow.com/a/40717686/3840093
I have a problem with onLayout in Image:
I have a function to display the dimension.
measureView(event) {
console.log(event.nativeEvent.layout.width);
console.log(event.nativeEvent.layout.height);
}
This Works and shows me the dimension of the TouchableWithoutFeedback
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}
onLayout={(event) => this.measureView(event)}>
<Image style={styles.image}
source={require("./../assets/images/photo_1.jpg")}/>
</TouchableWithoutFeedback>
But With the onLayout in the Image, i got nothing, just undefined.
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}>
<Image style={styles.image}
source={require("./../assets/images/photo_1.jpg")}
onLayout={(event) => this.measureView(event)}/>
</TouchableWithoutFeedback>
Do you have an Idea why?
Thanks!
I had this problem recently as well. It looks like the <Image /> component mounts before the actual image gets loaded into the container. You probably want to instead use the onLoad property of <Image />. Once you do that you can pretty much proceed as normal...
<Image
onLoad={event => { console.log(event.nativeEvent.source); }}
source={require("./../assets/images/photo_1.jpg")}
style={styles.image}
/>
// Would log { height: 123, url: 'somestring', width: 123 }
Keep in mind that may or may not only work for static resources. I'm not 100% that network images provide a size through that function.
Good luck! :)
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}} />