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.
Related
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.
I have a FlatList that renders a bunch of images but they fade in as I'm scrolling instead of being already rendered. I thought that the windowSize prop of FlatList makes it so that some stuff is already rendered outside the view port.
<FlatList
windowSize={8}
numColumns={columns}
maxToRenderPerBatch={4}
data={cardObjects}
renderItem={itemRender}
keyExtractor={keyExtractor}
/>
The Image component looks like:
<Image
source={{
uri: props.uri,
}}
style={{width: '100%', aspectRatio: ASPECT_RATIO}}
/>
I want the images to be already rendered such that when you scroll down it's already there.
Currently it behaves like this: https://www.youtube.com/watch?v=UFFmrAHwAQk
Flatlist renders only items that are on screen.
You can pre-render by using these 2 props
initialNumToRender={20}
maxToRenderPerBatch={20}
One more optimization when it comes to rendering images in list react-native-fast-image as recommended in official docs in react-native
Trying to display an image within a WebView in ReactNative (Using Expo). Doing this to allow image zooming.
Using webview with source={{ uri: this.state.imageUrl }} which is an s3 bucket image location. ie-- ending in .jpg
I have set mixedContentMode to 'always' as is suggested by people with similar problems, along with setting javascriptEnabled and domStorage to true, setting style to flex:1 etc etc.
My android is displaying a white page only, but iOS displays the image just fine, so url is not the problem.
I know RN advertises Webview as being soon to be deprecated and to use react-native-webview. But as we use Expo this isn't an option as linking is required to use react-native-webview which cannot be done with expo.
Is there something I have missed with s3 buckets or has anyone else had a similar issue they have managed to solve this issue? Not sure what else to try, have used the trick with google drive prefix elsewhere in the app for displaying PDFs in the webview but that doesnt work in this case. And using mixedContentMode hasn't solved anything.
<WebView
source={{ uri: this.props.map.source }}
startInLoadingState
javaScriptEnabled
style={{ flex: 1}}
scalesPageToFit
javaScriptEnabled
domStorageEnabled
originWhitelist={['*']}
mixedContentMode='always'
/>
and example of the image url is 'https://example-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:example/public/image-hd-1.jpg'
just showing the format.. above url will not work
In the end I just used the WebView and inserted my own html with an img tag that references the exact same image url. This seems to work just fine and gets around what ever issue was occurring with referencing the image directly.
Would still like to know if anyone has gotten around this without having to perform different renders for different operating systems.
Did you try to wrap it in view? Because in my one of an old project I solved it like this
<View style={{flex:1}}>
<View style={{height:'100%',width:'100%'}}>
<WebView
source={{ uri: 'https://github.com/facebook/react-native' }}
scalesPageToFit={true}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
originWhitelist={['*']}
mixedContentMode='always'
/>
</View>
</View>
Here is the Snack Link
I would like to disable only the copy and cut options in a WebView with a contenteditable div. Users should still be able to select, lookup, paste and etc. How should I do this for a React Native app?
If there are no other touchables(buttons etc) in your webview then you can do this. I was able to disable zooming, text selection and other pointer events on the React Native side, by wrapping WebView in a View and setting a few props:
<View pointerEvents="none">
<WebView
source={{ uri: webviewUrl }}
scrollEnabled={false}
/>
</View>
I need to customize my WebView in React Native with header and footer. but WebView does not load URL when put inside View. How can I achieve this functionality?
<View style={styles.mainSection}>
<WebView
source={{uri: this.props.mediaItem.source}}
style={{marginTop: 20}}
/>
</View>
I think your problem is related to the size of the WebView component. Try to put flex: 1 into your WebView style.