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>
Related
Following is my code
<TouchableOpacity style={{backgroundColor: 'pink', height: 100, width: 100}} activeOpacity={0.5} onPress={() => console.log('On Press'}>
<Image source={} style={{height: 50, width: 50, borderRadius: 25} imageType ={'profilePhoto'}/> />
</TouchableOpacity>
TouchableOpacity's size is bigger than theImage. If I touch outside of Image then onPress is working. But If I touch over the Image then onPress is not firing.
This is happening only in iOS. Working as expected in Android. I am using RN0.63
Am I missing anything here?
It seems that you are using an unofficial Image component. Any nested Touchable or other gesture component in it will affect your click results.
Try to use the official Image component. Or read the docs of the component you are using. It may has its own onPress event.
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 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
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>
I am showing list of images in react native.Since some images are not showed I figured out that images those are not having http:// as prefix are not showing up. What should we do in this case ?
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
For the above case it is displaying. But not for the below case
<Image
style={{width: 50, height: 50}}
source={{uri: 'facebook.github.io/react/img/logo_og.png'}}
/>
Assuming that you are using a url to fetch an image then the syntax is
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
But if you want to use an image from the local directory then use:
<Image
style={{width: 50, height: 50}}
source={require('./img/favicon.png')}
/>
Refer this doc for more info.
Tip: I would request you to share more insight , maybe show a snippet of your code so that the answers can be more helpful.