I'm using ListItem imported from native-base. ListItem is red and it's child View is yellow. As you can see from the screenshot, View style does not take entire width of ListItem, despite having a flex: 1. How can I make it so that View take entire width of ListItem?
See image here
<List>
<ListItem style={[styles.listitem, { backgroundColor: "red" }]}>
<View
style={{
flex: 1,
flexDirection: "column",
backgroundColor: "yellow"
}}
>
<Text style={styles.timeInfoHeader}>{this.props.totalUsage}</Text>
<Text style={styles.timeInfoSubHeader}>Total (hrs)</Text>
</View>
</ListItem>
</List>;
Stylesheet:
timeInfoHeader: {
fontSize: 40,
color: 'rgba(45, 145, 176, 100)',
textAlign: 'center'
},
timeInfoSubHeader: {
fontSize: 12,
color: 'rgba(209, 209, 209, 100)',
paddingBottom: 4,
marginBottom: 4,
textAlign: 'center'
},
listitem: {
width: '100%',
marginLeft: 0
},
Try this
listitem: {
marginLeft: 0,
flex:1,
paddingRight: 0
}
Just add width: '100%' on your view's styles.
Try this code snippet:
<ScrollView contentContainerStyle={{ flexGrow: 1 }} >
<View style={{ flex: 1 }} >
...
</View >
</ScrollView >
You can try this -
flexGrow: 1
Hope it helped someone =)
What causes this is the textAlign style on the timeInfoHeader. So you can either remove the textAlign style from timeInfoHeader or add a width: "100%" to listitem. Just glancing at your code, it seems you might be better off adding the textAlign to the child View of timeInfoHeader.
Related
I have created a customized horizontal bar graph in react native and I have already achieved it. Here's a code snippet:
And the exact code in the snack expo https://snack.expo.dev/#vicrn101/6c812d
<View style={[styles.container]}>
<View style={[styles.barGraph, styles.greenDeep]}>
<View style={{ flex: 6 }}>
<Text style={styles.textLeft}>agree</Text>
</View>
<View style={{ flex: 6}}>
<Text style={styles.textRight}>3 (60 %)</Text>
</View>
</View>
</View>
styles:
container: {
flex: 1,
flexDirection: "column",
alignContent: "space-between",
},
textLeft: {
fontSize: 12,
color: 'white',
textAlign: 'left'
},
textRight: {
fontSize: 12,
color: 'white',
textAlign: 'right'
},
barGraph: {
flexDirection: 'row',
marginBottom: theme.SIZES.BASE,
width: width - theme.SIZES.BASE * 10,
padding: 10,
borderRadius: 5
},
greenDeep: {
backgroundColor: '#36d79a'
},
Now, I want to make vertical graph similar to image below:
Is it possible to achieve this with react native's flex column property?
If anyone has idea with it please feel free to edit my code here: https://snack.expo.dev/#vicrn101/6c812d
Here's what I'm trying to achieve:
I want to align the 2 messages text label next to bargraph with background color green. The bargraph has dynamic width which renders coming from the backend and when size grows, the 2 messages label should also adjust and is always next to bargraph.
And here's what I have done sofar. It seems like that 2 messages won't show up next to bargraph with green background.
component code:
<View style={[styles.container]}>
<View style={[styles.barGraph, styles.greenDeep]}>
<View style={{ flex: 6 }}>
<Text style={styles.textLeft}>agree</Text>
</View>
<View style={{ flex: 6}}>
<Text style={styles.textRight}>3 (60 %)</Text>
</View>
</View>
<View>
<Text>2 messages</Text>
</View>
</View>
css:
container: {
flex: 1,
flexDirection: "column",
alignContent: "space-between",
},
textLeft: {
fontSize: 12,
color: 'white',
textAlign: 'left'
},
textRight: {
fontSize: 12,
color: 'white',
textAlign: 'right'
},
barGraph: {
flexDirection: 'row',
marginBottom: theme.SIZES.BASE,
width: width - theme.SIZES.BASE * 10,
padding: 10,
borderRadius: 5
},
greenDeep: {
backgroundColor: '#36d79a'
},
How would it be possible with react native's flex property?
For live editing, visit snack here live editor
To achive this:
First you have to set your flexDirection of container class to column. Set maxWidth at other container classes, and create a new class for your message with justifyContent: 'center' attribute.
container: {
flex: 1,
flexDirection: "row", /*it was column*/
alignContent: "space-between",
}
surveyDetailsContainer: {
/* some code */
maxWidth: 500,
},
container: {
/* some code */
maxWidth: 500,
},
/* some other classes*/
barGraph: {
/* some code */
maxWidth: 400,
},
/*created a new class, included the minWidth and added 3 more new attributes*/
message: {
minWidth: 5,
maxWidth: 80,
justifyContent: 'center',
marginLeft: 5,
}
And then put the new message class into:
<View style={[styles.message]}>
<Text>2 messages</Text>
</View>
Here is the whole code: https://snack.expo.dev/UwP7GVLzX
You can play around more with maxWidth, minWidth to make it responsive.
I am implementing a tile in reactnative and I have to make the Image right in the tile just like this
What I want (click here)
and this is what I can implement till now
What I get ()
this is my code
<View style={styles.container} >
<Image
style={styles.image}
source={item.image}
resizeMode="cover"
/>
<View style={styles.overlay} />
<View style={styles.textContainer}>
<Text style={styles.subText}>{item.title}</Text>
<Text style={styles.headingText}>{item.message}</Text>
</View>
</View>
and this is style
const styles = StyleSheet.create({
container: {
backgroundColor: '#206c72',
alignItems: 'flex-end',
borderRadius: 15,
width: COURSE_ITEM_WIDTH,
elevation: 7,
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
marginTop: 20
},
image: {
width: COURSE_ITEM_WIDTH,
height: 120,
borderRadius: 10
},
textContainer: {
position: 'absolute',
left: 16,
flex: 1,
},
headingText: {
fontSize: 18,
color: '#ffffff',
marginTop: 5
},
subText: {
fontSize: 14,
color: '#ffffff',
},
timeText: {
fontSize: 15,
color: 'white',
textAlign: 'center',
marginTop: 5
},
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#206c72',
opacity: 0.6,
borderRadius: 10
}
})
Please help me i dont know what i am doing wrong. thanks in advance!
[note: please ignore the content, focus on alignment]
Your image is aligned to the right but there is nothing at the left of it. You should add flexDirection:'row' to the parent container and put an empty View with width : 40px before your image.
You can also remove the alignItems:flex-end and justifyContent:center from the main container
You can add alignSelf property to flex-end for image and image will be on end of the tile.
example 1:
image: {
width: "50%",
height: 120,
borderRadius: 10,
backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
alignSelf: "flex-end"
},
for reference i tried a sandbox example check it out here
also noticed you are using alignItems value twice first one is only necessary you can remove 2nd alignItems and position relative value from styles.container then it will align the image to end. you will get the exact result you want
example 2:
container: {
backgroundColor: '#206c72',
alignItems: 'flex-end', // only need this alignItems
borderRadius: 15,
width: COURSE_ITEM_WIDTH,
elevation: 7,
justifyContent: 'center',
marginTop: 20
},
image: {
width: "50%",
height: 120,
borderRadius: 10,
backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
// no need of alignSelf to flex-end here
},
I want to divide a circular View in half with 2 different colored Views which will result with circular View containing two background colors. Let's say we fill the main circular View with two Views: blue and red one. Giving both the blue and red View, the property flex:1 , means they will take up the same amount of space. Problem is they don't fit the style properties of the main View. (borderRadius is problematic)
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View
style={{
height: 300,
width: 300,
backgroundColor: "pink",
borderRadius: 300,
justifyContent: "center",
marginTop:60
}}
>
<Text style={{ textAlign: "center", fontSize: 150 }}>❤️</Text>
</View>
);
}
}
You can add 2 views with flex:1 and have different background color . Just add overflow: "hidden" to main view
Complete code
import React, { Component } from "react";
import { View, Text } from "react-native";
export default class Dashboard extends Component {
render() {
return (
<View
style={{
flexDirection: "column",
marginVertical: 60,
marginHorizontal: 30,
width: 300,
height: 300,
borderRadius: 150,
overflow: "hidden"
}}
>
<View style={{ flex: 1, backgroundColor: "#ffbecb" }} />
<View style={{ flex: 1, backgroundColor: "blue" }} />
<View
style={{
position: "absolute",
left: 0,
right: 0,
justifyContent: "center",
alignItems: "center",
top: 0,
bottom: 0
}}
>
<Text style={{ fontSize: 80 }}> ❤️ </Text>
</View>
</View>
);
}
}
Check the code below.
The 'border[Top|Bottom][Left|Right]Radius' style properties enable you to draw a half circle. Just put them in a column under each other.
The text has to be drawn on top with 'absolute' positioning, as you are drawing two Views.
It's probably cleaner to parametrise this code; extracting it as a functional component and creating parameters for size, color, ...
render() {
return (
<View style={{flexDirection: 'column', marginTop: 60, width: 300, height: 300}}>
{ /* Top circle half */ }
<View
style={{
height: '50%',
width: '100%',
backgroundColor: "pink",
borderTopLeftRadius: 150,
borderTopRightRadius: 150
}}
>
{ /* Bottom circle half */ }
</View>
<View
style={{
height: '50%',
width: '100%',
backgroundColor: "blue",
borderBottomLeftRadius: 150,
borderBottomRightRadius: 150
}}
>
</View>
{ /* Text container */ }
<View style={{position: 'absolute', left: 0, right: 0, justifyContent: 'center', alignItems: 'center', top: 0, bottom: 0}}>
<Text> ❤️ </Text>
</View>
</View>
);
}
I am trying to add form fields validation to several forms on a react native mobile app. I am running into an issue where the View that contains the error message I want to appear seems to take up half of the space to the right of the TextInput control instead of the form control taking up the whole line and the error message appearing on the next line. For example, this is how my form field seems to appear when I add a background color to the error View container:
Here is the css code for this:
import { StyleSheet } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const INPUT_HEIGHT = 36;
const BORDER_RADIUS = 4;
export default EStyleSheet.create({
$buttonBackgroundColorBase: '$white',
$buttonBackgroundColorModifier: 0.1,
container: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '$white',
height: INPUT_HEIGHT,
borderRadius: BORDER_RADIUS,
marginVertical: 11,
borderWidth: 1,
borderColor: 'gray'
},
containerDisabled: {
backgroundColor: '$lightGray',
},
buttonContainer: {
flex: 1,
height: INPUT_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '$white',
borderTopLeftRadius: BORDER_RADIUS,
borderBottomLeftRadius: BORDER_RADIUS,
},
buttonText: {
fontWeight: '600',
fontSize: 20,
paddingHorizontal: 16,
color: '$primaryBlue',
},
separator: {
height: INPUT_HEIGHT,
width: StyleSheet.hairlineWidth,
backgroundColor: '$border',
},
input: {
height: INPUT_HEIGHT,
flex: 1,
//width: '100%',
borderTopRightRadius: BORDER_RADIUS,
paddingHorizontal: 8,
backgroundColor: '$white',
marginBottom: 0,
paddingBottom: 0,
marginTop: 0,
paddingTop: 0
},
icon: {
flex: 1,
alignSelf: 'flex-start'
},
errorContainer: {
height: INPUT_HEIGHT,
flex: 1,
paddingHorizontal: 8,
backgroundColor: 'transparent'
}
});
The JSX code:
<View style={containerStyles}>
<View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch'}}><TextInput style={textStyles} underlineColorAndroid="transparent" {...props} /></View>
<View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch', backgroundColor: '#ff0099'}}>{ error }</View>
</View>
The code that generates the error message:
let error = props.error ? <Text style={{color: '#ff0000'}}>{props.error}</Text> : null;
When the onBlur event fires, it keeps adding the error message in the pink area instead of the text field taking up the entire line and the pink area displaying under the text field? I am setting flex=1 for the all of the containers and the text box. I want to allow for multiple different screen resolutions. Please explain what I am doing wrong and can I fix this issue?
In the style object you're passing into your container view, your flexDirection should be 'column'.