I have a listview where i want to show image on each row and I don't want to show whole 25 images at once. I just wanted to load image which come in viewport.
I am getting url in props
<Image source={{uri: this.props.media.image_url}}
style={{ width:this.props.media.width,
height: this.props.media.height}}
/>
How can I achieve this in react native.
Note: I have tried these library but none working for me. Probably the version issue that it has written for old version of react Plus some of it does not work with dynamic props
react-native-lazyload
react-lazy-load
You can use react native elements.
Add to project: npm install --save react-native-elements
Usage:
import { ActivityIndicator } from 'react-native';
import { Image } from 'react-native-elements';
// Standard Image
<Image
source={{ uri: image }}
style={{ width: 200, height: 200 }}
/>
// Image with custom placeholder content
<Image
source={{ uri: image }}
style={{ width: 200, height: 200 }}
PlaceholderContent={<ActivityIndicator />}
/>
Source: react native elements
I use this plugin. It is very comprehensive https://github.com/magicismight/react-native-lazyload
Related
using Next 13 and Tailwind, i'm trying to render the some images of products from fakestoreapi on my e-commerce page, i want this images to have the same size so i'm using this code. But the images are not resizeing correctly.
this component only has one parent div with no properties.
<Image src={image} width={200} height={200} style={{ objectFit: "contain" }} />
do you know what could be the reason ? Let me know if i need to provide more info.
thankyou in advance
Setting height of your element via style attribute should override tailwind default.
<Image src={image} width={200} height={200} style={{ objectFit: "contain", height: "200px" }} />
I am trying to display images in my Next js project with Material UI here:
<Box display="flex" alignItems="center">
<Image
src={'/images/Profile.svg'}
alt={'Thumbnail-alt'}
width={300}
height={160}
style={{ background: '#252525e6', borderRadius: '6px' }}
/>
</Box>
But all it is showing is the alt tag of the image, not displaying the actual image.
I am using Material UI 5 and Nextjs 12 for this project. Thanks
To load static images, first import the file. E.g
import ProfileSvg from "/images/Profile.svg"
Then in your image.
<Image
src={ProfileSvg}
alt={"Thumbnail-alt"}
width={300}
height={160}
style={{ background: "#252525e6", borderRadius: "6px" }}
/>
I have a checkbox with text next to it, requiring an Image (which is an icon) attached to the last word for more information. I haven't found a reliable way to do this. The only way is either breaking up the text into different chunks and wrapping the parent or absolute positioning of the icon - both of which end up positioned differently on different devices depending on size.
When I add the image inside of the text, I get a weird background image of a file icon.
When I keep it outside, It just defaults to the end of the text block:
My code snippet:
<View style={{ flexDirection: 'row' }}>
<Checkbox style={styles.checkbox} checked={agreedChecked} />
<View style={{ flexDirection: 'row', flex: 1 }}>
<Text style={[ styles.label]}>Yes, I agree to using this payment method for automatic monthly charges.</Text>
<Image source={require('../../assets/Icon_Info.png')} />
</View>
</View>
Blown up to show weird file background:
(note it does not have the background when outside the text element)
Can you simply copy & paste this code segment and try it? It works for me. If you want, I can create a repo for you.
Github Example Repo
https://github.com/WrathChaos/react-native-text-ends-with-icon-example
import React from "react";
import {
SafeAreaView,
Image,
View,
Text,
StatusBar,
TouchableOpacity
} from "react-native";
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View style={{ flexDirection: "row" }}>
{/* <Checkbox style={styles.checkbox} checked={agreedChecked} /> */}
<View style={{ flexDirection: "row", flex: 1 }}>
<Text style={{ color: "#757575" }}>
Yes, I agree to using this payment method for automatic monthly
charges.{" "}
<TouchableOpacity onPress={() => {}}>
<Image
style={{ height: 15, width: 15 }}
source={require("./assets/icon.png")}
/>
</TouchableOpacity>
</Text>
</View>
</View>
</SafeAreaView>
</>
);
};
export default App;
If anyone stumbles upon this, it was a known bug and is fixed in React Native 0.61.4!
https://github.com/facebook/react-native/pull/26653
Somehow I could not figure this out. I have tried several solutions available online, but none of them worked.
Here is the issue. I have some wide images that I wanted to stack on top of each other. The height does not matter, but I want it to have a fixed width. For some reason, the images are being cropped.
I want it to look like this. For example, if you change .meat's height to 10px, it will resize but will maintain its ratio.
http://jsfiddle.net/iggyfiddle/mtL7e2jz/
This is the image code:
{items.map((item, index) =>
<View key={index}>
<View style={styles.imageWrapper}>
{ item.image_url_large && <Image style={styles.image} resizeMode='cover' source={{ uri: item.image_url_large }} /> }
</View>
</View>
)}
It is mapping over an array of several images.
I have tried:
a simple
const styles = {
image: {
height: 100
},
};
I tried following the same pattern on the fiddle, by giving it fixed height and width according to this SO post
const styles = {
imageWrapper: {
height: 50,
width: 400
},
image: {
height: '100%'
},
};
But it still crops the top bun and tomato
I have tried some solutions described on this GH discussion but they don't seem to work.
How can I automatically resize the image from web to fixed width without it being cropped?
use resizeMode='contain' instead of cover and specify the width and height.
<Image
style={{width:300,height:300}}
source={{ uri: display_image_small }}
resizeMode='contain'>
</Image>
I am new to React-Native. With help from this forum and others, I was able to create a small App with images loading from Firebase in ListView. I have a question ... is it possible to implement features that are in iOS Photos?
What I am trying to do is, when a user touches and holds on an image in ListView, I would like to popup the image with options (Like, Favorite) in the image below. Appreciate any help.
Update:
I changed the code like this:
render() {
return (
<View style={styles.container}>
<ListView dataSource={this.state.dataSource} renderRow={this._renderItem.bind(this)} enableEmptySections={true} removeClippedSubviews={true} style={styles.listview}> </ListView>
</View>
);
}
_renderItem(item) {
return (
<ListItem item={item}/>
);
}
ListItem.js
class ListImages extends Component {
render() {
return (
<MenuContext style={{flexDirection: 'row', padding: 5}}>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger>
<Image resizeMode={Image.resizeMode.contain} style={{width: 400, height: 250}} source={{ uri: this.props.item.name }} />
</MenuTrigger>
<MenuOptions>
<View width={400} height={600} style={styles.listimagecontainer}>
<Image resizeMode={Image.resizeMode.contain} style={{width: 350, height: 500}} source={{ uri: this.props.item.name }} />
</View>
<MenuOption value={1} text='Test' />
</MenuOptions>
</Menu>
</MenuContext>
);
}
}
Images in the ListView are displaying ok. When I click on any image, new view opens up with the image. But the next image in the ListView overlays on the view hiding more than half the view. What am I doing wrong here ? I also want to display the image in full with correct aspect ratio. Appreciate any help.
UPDATE with suggested code:
<MenuContext style={{flexDirection: 'row', padding: 5}}>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger>
<Image resizeMode={Image.resizeMode.contain} style={{width: 400, height: 250}} source={{ uri: this.props.item.name }} />
</MenuTrigger>
<MenuOptions>
<MenuOption onSelect={() => alert(`Like`)} text='Like' />
<MenuOption onSelect={() => alert(`Share`)} text='Share' />
<MenuOption onSelect={() => alert(`Delete`)} text='Delete' />
</MenuOptions>
</Menu>
</MenuContext>
Here is screen shot:
What I am trying to do is, ListView displays images at 400x250. When the user clicks on the image, show a larger image of the same (say 325x500 like in iOS) and present the user with options say - like, share, delete. Appreciate any help.
It looks like you have two images, hence why you see two.
MenuTrigger is the component you want the user to click on (in your case it is the image).
MenuOptions is a "list" of the things you want to popup for example three Text: "Like" "Share" "Delete" .. etc.
But it is clear that you have the same image both under trigger and under options. What you want is something like this:
<MenuContext style={{flexDirection: 'row', padding: 5}}>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger>
<Image resizeMode={Image.resizeMode.contain} style={{width: 400, height: 250}} source={{ uri: this.props.item.name }} />
</MenuTrigger>
<MenuOptions>
<MenuOption onSelect={() => alert(`Like`)} text='Like' />
<MenuOption onSelect={() => alert(`Share`)} text='Share' />
<MenuOption onSelect={() => alert(`Delete`)} text='Delete' />
</MenuOptions>
</Menu>
</MenuContext>