I'm trying to create a header with an image so I write this:
<View style={{
flex: 1,
backgroundColor: "#FFFFFF",
padding: 20
}}
>
<View style={{ flex: 3 }}>
<Image
source={this.images.header}
style={{
flex: 1,
alignSelf: "flex-end", // HERE
resizeMode: "contain",
marginTop: -20,
marginLeft: -20
}}
/>
</View>
</View>
The weird part is alignSelf: "flex-end" - this align the image at the left side! As far as I know, it must be alignSelf: "flex-start" to align left.
Am I wrong?
PS: I use marginTop: -20 and marginLeft: -20 to stick the image to borders of the device (because of padding: 20 the container)
Any idea?
Thank in advance!
I think it is because the Image cover the whole space but the image data is resized so that you think it is only in a part of the view. Try removing flex: 1and set the widthand heightproperly or at leaset one of both.
Related
I am mapping an array. in table. I create table just using view and text. but now when there is lots of value. then that UI is not showing properly. as showin in image
here is my code of table
<ScrollView horizontal={true}>
<View style={{ flexDirection: "column", width: width / 3.1 }}>
<View
style={{
height: 50,
justifyContent: "center",
backgroundColor: "#C0C3C3",
elevation: 5,
marginTop: "2%",
}}
>
<Text style={{ alignSelf: "center" }}>Date</Text>
</View>
{mediDataP.map((item, i) => (
<View
key={i}
style={{
height: 50,
justifyContent: "center",
backgroundColor: "#EEF1F1",
elevation: 5,
marginTop: "2%",
}}
>
<Text style={{ alignSelf: "center" }}>{item.date}</Text>
</View>
))}
</View>
<View style={{ flexDirection: "column", width: width / 3.9 }}>
<View
style={{
height: 50,
justifyContent: "center",
backgroundColor: "#C0C3C3",
elevation: 5,
marginTop: "2%",
}}
>
<Text style={{ alignSelf: "center" }}>Time</Text>
</View>
{mediDataP.map((item, i) => (
<View
key={i}
style={{
height: 50,
justifyContent: "center",
backgroundColor: "#EEF1F1",
elevation: 5,
marginTop: "2%",
}}
>
<Text style={{ alignSelf: "center" }}>{item.time}</Text>
</View>
))}
</View>
</ScrollView>
please ignore it = I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly. I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly. I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly. I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly. I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly.
I don't really know what the real behavior behind but i just found that on using % value of marginTop, it's has an effect depending of your component width, like with the compent which have your item.time for example; if you increase the size of the width, the size that the "2%" take increase too.
I'm using libraries: "react-native-svg": "12.1.0" & "react-native-svg-transformer": "0.14.3"
import FooIcon from '../assets/images/icons/fooIcon.svg';
<View style={{ flex: 1, paddingTop: 8 }}>
<FooIcon></FooIcon>
<View style={{ position: 'absolute', top: 35, bottom: 0, left: 14, right: 0 }} >
<Text>foo</Text>
</View>
</View>
How can I have "foo" text centered over the FooIcon. The solution above does not center the text which is important because "foo" text length can change and it has to be in center in every case.
this chunk of code should do the work for you
<View
style={{
justifyContent: 'center',
alignItems: 'center'
}}
>
<SVG /> //your svg image component goes here
<Text
style={{
position: 'absolute'
}}
>
Test
</Text>
</View>
I would recommend not to use an absolute position if the content size can change dynamically. I would build this with just using flex-box:
...
<View style={styles.itemContainer}>
<Text>Foo</Text>
<View style={styles.iconMock} />
</View>
...
const styles = StyleSheet.create({
itemContainer: {
alignItems: "center",
//this has default flex: 0, which means the container will always have the size the children take.
//we then tell it to centre all the children (items) which gives the needed effect.
},
iconMock: {
backgroundColor: "blue",
height: 50,
width: 150,
}
});
Building it this way the text will always be centred:
Making a to-do list type thing to add in my app but when trying to align the 'add todo' button to the bottom right, the button goes anywhere but there.
I'm pretty good with CSS but get pretty messed up when using React CSS/styles. I've played around with different properties, giving a parent a style instead of the child etc.
The class is as follows
class AgendaScreen extends React.Component {
addReminder = () => {
//blank so far :)
};
render() {
return (
<View>
<Text style={styles.titleStyle}>Agenda</Text>
<View style={styles.reminderView}>
<TouchableOpacity style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
and the styles here
//Agenda screen styles
reminderView: {
flex: 1,
justifyContent: 'flex-end',
},
reminderTouch: {
width: 60,
height: 60,
backgroundColor: 'orange',
borderRadius: 100,
textAlign: 'center',
margin: 20,
},
reminderBtn: {
fontSize: 50,
margin: 10,
alignSelf: 'flex-end',
},
The goal is to align the plus symbol in the middle of the circle and align that circle to the bottom right. With the pasted settings the circle is in the top left and the plus symbol is aligned to the bottom of the circle.
Also, the code posted above wasn't the closest I've gotten as I could easily do it with padding but I'd prefer to use flexbox.
Simply change your style replace with this style and Please add style to your top view
<View style={{flex:1}}>
<Text>Agends</Text>
<View style={styles.reminderView}>
<TouchableOpacity style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
</View>
</View>
reminderView: {
flex: 1,
right:0,
margin:5,
bottom:0,
position:'absolute'
},
reminderTouch: {
width: 60,
height: 60,
backgroundColor: 'orange',
borderRadius: 100,
justifyContent:'center',
alignItems:'center',
margin: 20,
},
reminderBtn: {
fontSize: 50,
margin: 5,
alignSelf: 'center',
}
Please check this snack.expo link
Here is how I would do it:
<View style={{
flex: 1,
justifyContent: 'center',
width:'100%',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}}>
<View
style={{
justifyContent:'center',
alignItems:"center",
width:65,
borderRadius:100,
height:65,
position:'absolute',
bottom:15,
right:15,
backgroundColor:"red",
elevation:10
}}
>
<Icon
name="plus"
size={25}
color="white"
/>
</View>
</View>
What it does is that it makes the round button float on the bottom right corner of the screen. Since you are making a todo app, you would want it to float over the todo list when it becomes longer.
https://snack.expo.io/#ammarahmed/rebellious-donuts
I am creating a screen in react-native where I have to display text on a parent view. How do I make the whole text be displayed?
At first I thought its a problem with text not wrapping, so I tried this solution from one question here
<View style={{flexDirection:'row'}}>
<Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd
You miss fdd
Another line
and another one
</Text>
</View>
I then tried numberOfLines={1}
This is my code
<View style={{ width: '100%', height: '15%', position: 'absolute', alignSelf: 'center', backgroundColor: 'rgba(255, 255, 255, 0.4)', borderRadius: 5, marginTop: '90%', }}>
<Text style={{ width: '80%', backgroundColor: 'transparent', alignSelf: 'center', textAlign: 'center', fontSize: 18, color: '#005F6A', marginTop: '5%' }}>
{`Text the first &
Text the second &
text the third`}
</Text>
</View>
I expect all text to be rendered but only the first line is rendered
Text is rendering correctly but as you have placed the property width=80% it's bounded to wrap the content to the new line. I have used the red color for parent view for more text clarity. Please try to run the below code and let me know if you face any issue. I will try to help you mate.
<View style={{ backgroundColor: 'red', borderRadius: 5 }}>
<Text style={{ backgroundColor: 'transparent',
textAlign: 'center',
fontSize: 18,
color: '#005F6A',
marginTop: '5%'
}}>
Text the first & Text the second & text the third, Text the fourth & text the fifth
</Text>
</View>
I'm trying to put a text into a limited space (yellow container).
How to solve this problem in Android?
In iOS the problem is solved with adjustsFontSizeToFit={true}.
My code:
<View
style={{
backgroundColor: 'yellow',
flex: 0.8,
marginRight: 10,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}
>
<CustomText style={{ fontWeight: '400' }}>{`Qt. ${orderProduct.quantity}`}</CustomText>
<PriceText
style={{
fontWeight: '600',
fontSize: 18,
color: '#000'
}}
price={price}
/>
</View>
Hey consider looking into this.
In android native it is done via setting max lines o a text to 1. android:maxLines="1"