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
Related
I tried with customCallout from react-native-maps library but it is not working on iOS simulator.
in my issue what I was implementing the react-native-map library and i want to display the image in my custom-callout view (custom callout is annotation view in map library which show popup after clicking the marker) but if i put the image tag in that view image is not displaying.
<Callout alphaHitTest tooltip>
<CustomCallout>
<View style={{ flexDirection: "row" }}>
<Icon name="map-marker" size={30} />
<Text style={{ width: "50%" }}>
{this.state.currentAddress} //coordinates
</Text>
<Text>
<Image
source={require("./../assets/images/profile.png")}
/>
</Text>
</View>
</CustomCallout>
</Callout>
I have an image that should always take 100% of the parent size. The width should adjust accordingly to maintain the aspect ratio of the image. The width can be smaller or larger than the parent. The height must be equal to the parent size.
<View style={{height: 220}}>
<Image source={{uri: 'myuri.jpg'}} style={{height: '100%, ...?}} />
</View>
I only find solutions where the width is fixed and the height adjusts dynamically. I want it the other way round.
import { Dimensions } from 'react-native';
You can get the application window's width and height using the following code:
<View style={{height: Dimensions.get("window").height}}>
<Image source={{uri: 'myuri.jpg'}}
style={{
height: Dimensions.get("window").height*0.5,
width: Dimensions.get("window").width
}}
/>
</View>
Using this way you can proportion the size you want.
You can also review the document here.
Dimensions
Try this
<View style={{height: 220}}>
<Image source={{uri: 'myuri.jpg'}} style={{height: '100%, width: 'auto'}} />
</View>
Also resizeMode: 'contain' can helps you a lot.
Reference that might helps you: https://reactnative.dev/docs/image#resizemode
I've managed to load an image from the web into my app but have an issue...
I have some local data about food. each food item has a food title, and a url to a picture online.
This is the Image component that lives inside my foodComponent.
<Image style={styles.cardImg} source={{uri:image}} />
image is a string to a url that is passed as a prop to this foodComponent.
Again it works but my problem is that the image takes time to load.
How could I only render the foodItem component once it has received/loaded an image?
I know about promises but I don't see how I could use it in this scenario.
here is my entire foodItem component:
export default function FoodItemTouchable(props){
return(
<View style={styles.container}>
<View style={styles.card}>
<View style={styles.cardHeader}>
<Text style={styles.text}>{props.item.title}</Text>
</View>
<Break/>
<CardImage image={props.item.url}/>
</View>
</View>
)
}
function Break() {
return(
<View style={{alignItems:'center'}}>
<View style={styles.break}>
</View>
</View>
)
}
function CardImage({image}){
return(
<View style={{padding:10,width:'100%'}}>
<Image
style={styles.cardImg}
source={{uri:image}}
/>
</View>
)
}
CardImage is where the image gets rendered.
the rest of the Components render first but the CardImage is delayed because it's loading the image.
If I could somehow load the image into a variable in the main Component,
and then there do a check, is image===null ? return null
so that the component renders only when the image is ready.
Have you tried like this?
{
props.item.url
&&
<CardImage image={props.item.url}/>
}
I am using react-native + mobx + nativebase. I am iterating over an array of objects. I am using NativeBase Card component. I have problem with the UI going out of place. See below:
Note "Hamburgers" looks funky. I figured out this is caused by the length of the word "Hamburgers". When I shorten it to "Burgers", it looks fine. See below:
This is the code. Note: recipeStore.categories is an array of object.
{ recipeStore.categories.map((category, index) => {
return (
<View key={index} style={{width: '33.3%', height: 300, padding: 20}}>
<Card>
<CardItem cardBody>
<Image
style={{width: '100%', height: 200}}
source={{uri: category.image}}
/>
</CardItem>
<CardItem button onPress={() => navigate('RecipeDetailScreen', { recipe: category.recipes[0] })}>
<Left>
<Ionicons name={category.icon} style={{fontSize: 25}}/>
</Left>
<Right>
<Text>{ category.name }</Text>
</Right>
</CardItem>
</Card>
</View>
I will need to anticipate for even longer word in the future as well. If I get a menu that is longer, I don't mind having it to overflow to next line. Something like below:
How can I make my card to handle overflow of long words?
Haven't replicated exactly what you have but the following could work.
In the <CardItem footer> the <Left> and <Right> will by default take up equal space.
Use the flex property to allow <Right> to be wider than <Left>
<CardItem footer style={{flex:4}}>
<Left style={{flex:1}}>
<Ionicons name="ios-microphone"/>
</Left>
<Right style={{flex:3}}>
<Text>Hamburgerrrrsssssssss</Text>
</Right>
</CardItem>
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>