I am trying to space these two bodies together evenly across the device. While implementing it the way I currently am, the space-evenly renders but it spaces it by the words. I would like the space-evenly to base its spacing on the icon instead.
I have provided a demo here as well as the code below.
render() {
return (
<View
style={{
flexDirection: 'row',
top: 75,
justifyContent: 'space-evenly',
}}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<MaterialCommunityIcons
name="map-marker-radius-outline"
color="black"
size={50}>
</MaterialCommunityIcons>
<Text style={{ fontSize: 15 }}>
WORD
</Text>
</View>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<MaterialCommunityIcons
name="star-outline"
color="black"
size={50}>
</MaterialCommunityIcons>
<Text style={{ fontSize: 15 }}>
WORD WORD
</Text>
</View>
</View>
);
}
}
if I understand your issue right, you need both elements to take the same space across the available width. For that, you have to add flex: 1 to both of your inner views
<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
Related
I have been trying to apply styling to react-native-progress-steps but it's not working in my app. I applied the styles to View and ProgressSteps components but it's not showing in my app.
<View style={{flex: 1}}>
<ProgressSteps style={styles.progressStepsStyle}>
<ProgressStep label="Information">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 1!</Text>
</View>
</ProgressStep>
<ProgressStep label="Account">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 2!</Text>
</View>
</ProgressStep>
<ProgressStep label="Completion">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 3!</Text>
</View>
</ProgressStep>
<ProgressStep label="Verification">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 4!</Text>
</View>
</ProgressStep>
</ProgressSteps>
</View>
</View>
Here is the link to the library: https://www.npmjs.com/package/react-native-progress-steps
it is actually very simple.
You have to create a constant and call it inside the
who is the dad that locks up the ProgressStep.
For example:
const progressStepsStyle = {
activeStepIconBorderColor: '#0a0d64',
activeLabelColor: '#0a0d64',
activeStepNumColor: 'white',
activeStepIconColor: '#0a0d64',
completedStepIconColor: '#0a0d64',
completedProgressBarColor: '#0a0d64',
completedCheckColor: 'white'
};
And then call it:
<ProgressSteps {...progressStepsStyle}>
<ProgressStep label="Information">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 1!</Text>
</View>
</ProgressStep>
<ProgressStep label="Account">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 2!</Text>
</View>
</ProgressStep>
<ProgressStep label="Completion">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 3!</Text>
</View>
</ProgressStep>
<ProgressStep label="Verification">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 4!</Text>
</View>
</ProgressStep>
</ProgressSteps>
So you will have styles in your circles and in the progress bar.
If you want to style your buttons and button text you have to place the following properties inside
nextBtnStyle, nextBtnTextStyle, previousBtnStyle, and previousBtnTextStyle.
For example:
<ProgressStep nextBtnText={"Next"} nextBtnStyle={{ textAlign: 'center', padding: 8, backgroundColor: '#F8CC23', }} nextBtnTextStyle={{ color: '#007aff', fontSize: 18 }}>
I want below image design. I tried borderRightWidth and borderBottomWidth but it can merge at right bottom corner. I also don't want to put extra <View> outside/inside main <View>.
What i want:
What i already achieved:
My code:
<View style={styles.brand_container}>
<View style={{flexDirection: 'row',marginBottom: 10,}}>
<TouchableOpacity style={styles.brand_img_container}>
<Image source={Images.brand_logo.brand_1} style={styles.brand_img} />
</TouchableOpacity>
<TouchableOpacity style={styles.brand_img_container}>
<Image source={Images.brand_logo.brand_2} style={styles.brand_img} />
</TouchableOpacity>
<TouchableOpacity style={[styles.brand_img_container, {borderRightWidth: 0}]}>
<Image source={Images.brand_logo.brand_3} style={styles.brand_img} />
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row',}}>
<TouchableOpacity style={[styles.brand_img_container, {borderBottomWidth: 0}]}>
<Image source={Images.brand_logo.brand_4} style={styles.brand_img} />
</TouchableOpacity>
<TouchableOpacity style={[styles.brand_img_container, {borderBottomWidth: 0}]}>
<Image source={Images.brand_logo.brand_5} style={styles.brand_img} />
</TouchableOpacity>
<TouchableOpacity style={[styles.brand_img_container, {border: 0}]}>
<Image source={Images.brand_logo.brand_6} style={styles.brand_img} />
</TouchableOpacity>
</View>
</View>
Styling:
const styles = StyleSheet.create({
brand_img_container: {
flex: 1,
height: 150,
margin: 5,
padding: 10,
borderRightWidth: 1,
borderBottomWidth: 1,
alignItems: 'center',
justifyContent: 'center'
},
brand_img: {
height: '100%',
width: '100%',
resizeMode: 'contain'
}
});
You can use blank view to generate the line instead of using right or left border of existing view. It will be tough to make alignment as compare with your VD. Blank view you early push up,down,left or right.
For Example: You can below code to draw vertical and horizontal line respectively. It will comparatively easy to align.
<View style={{
height: 150,
borderColor: "grey",
borderWidth: 1,
alignItems: 'center',
justifyContent: 'center',
}} />
<View style={{
width: 150,
height: 1,
borderColor: "grey",
borderWidth: 1,
alignItems: 'center',
justifyContent: 'center',
}} />
I'm having a bit of trouble getting what i though to be an easy layout to achieve in react-native.
Basically i need two views, on a row, with their parent having justifyContent: 'space-between'.
On the first view there are two text components and one of them has to have an ellipsis when it grows.
What i expected:
What i instead get is overflowing of that text component:
<View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text>AVATAR</Text>
<View style={{ marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
A sandbox to play around with an example:
https://snack.expo.io/HkeFQbyvf
If you add flex: 1 to the inner <View style={{ marginHorizontal: 15 }}> it will work
Updated code sample
<View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text>AVATAR</Text>
<View style={{ flex: 1, marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
Updated based on a comment
And the main reason is because the inner <View style={{ marginHorizontal: 15 }}> is a flex row item, and as such flexes horizontally and need a width, which flex: 1 provide.
If to use the default column direction, it would work w/o, e.g. like this:
<View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1 }}>
<View style={{ marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
Try adding flexShrink: 1 to the style of the first inner view
I have the following
<View style={{maxWidth: 700}}>
<View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
which is working as I'd expect on a large device (vertical black lines are edges of emulator screen).
All I would like to do is center this on the screen.
When I attempt to do so by adding alignSelf: 'center' to the parent
<View style={{maxWidth: 700, alignSelf: 'center'}}>
<View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
the width is lost.
I assume this is because by default alignSelf it is 'stretch'. Is there a way to both stretch the content to use maxWidth and center it on the screen?
Try using flex:1 along with maxWidth to both make it stretch but limit the width to 700
<View style={{flexDirection:'row', alignItems: 'center', justifyContent: 'center'}}>
<View style={{flex:1, maxWidth: 700, backgroundColor:'red', flexDirection:'row', justifyContent:'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
Using maxWidth along with width: '100%' does the trick for me.
I have to create a ListView having Rows which contains an Icon on the left and two text elements like so:
But what i get is this:
How to archieve this?
This is my render method for the row:
return (
<TouchableHighlight underlayColor='#dddddd'>
<View style={styles.container}>
<Icon
name='fontawesome|phone'
size={30}
color='gray'
style={styles.contactIcon}
/>
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
);
And these are my styles:
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
padding: 15,
},
details: {
fontSize: 14,
marginBottom: 8
},
headline: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
flex: 1
},
I tried to play with a width-statement for each text-element making it as wide as possible, nothing helped.
You have to wrap your both text-nodes in a parent-textnode giving style "flex=1" :
check this out:
<View style={{ flex: 1 }} >
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
</View>
As an alternate solution, you could surround the two text elements with a view and then set its flex direction to column
<View style={{flex: 1, flexDirection: 'column'}}>
<Text style={styles.headline}>Anrufen</Text>
<Text style={styles.details}>{item.text}</Text>
</View>