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.
Related
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 }}>
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'm new to react native and i'm trying to display some text in a custom touchable opacity. but the text keep exceeding the border even when i'm using flex wrap. my code is the following:
<View style={styles.main_container} >
<View style={styles.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row' }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View>
<Text style={styles.txt}> k </Text>
<Text style={{ flexWrap:1 }} > ddddddddddddddddddddddddddddddddddddddddd </Text>
<Text> kk </Text>
</View>
</TouchableOpacity>
</View>
</View>
and here is look of the styles i used:
main_container: {
flex: 1,
height: 300,
flexDirection: 'column',
backgroundColor: "grey",
width: '95%',
margin: 10,
},
ctr1: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'white',
//margin: 2,
},
How can i wrap it
Issue was not in the <Text> element that you have given the style flexWrap:1. Problem was in the parent elements.
Adding flex: 1 to <TouchableOpacity> and <View> which contains your <text> will solve the problem.
This will do the calculation for width depends on the device width.
<View style={styEdit.main_container}>
<View style={styEdit.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styEdit.txt}>k</Text>
<Text>ddddddddddddddddddddddddddddddddddddddddd---</Text>
<Text>kk</Text>
</View>
</TouchableOpacity>
</View>
</View>
Tested the code in my machine.
Cheers!
Simply I am trying to make 3 Texts with icons align in a column
I want to give the expo icons a little margin-top so they are next to each text element
Then how can I make the next line in text aligned with the text itself
For Example The (S) in School to be vertically aligned with the (5) in 5th
I searched a lot on how to do that in react-native but with no luck
and I tried some normal CSS stuff but didn't work is it achievable?
Code :
<View style={styles.cardView}>
<Text style={styles.CardTextLayout} > <MaterialIcons name="store" size={21} color="lightgrey" /> {item.key} </Text>
<Text style={styles.locationText} > <Entypo name="location-pin" size={21} color="lightgrey" />5th Settelment, Near Akhnaton School, Cairo</Text>
<Text style={styles.locationText} > <MaterialIcons name="description" size={21} color="lightgrey" />Breif Description about the place and what is offers</Text>
</View>
Styles
CardTextLayout: {
// marginLeft: 8,
fontSize: cardResponsiveFontSize,
fontWeight: 'bold',
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
locationText: {
fontSize: cardResponsiveFontSize,
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
I don't know how you would do that with your current code, but you can try to set it up like this.
<View style={styles.cardView}>
<View style={styles.cardRow}>
<View style={styles.cardIcon}>{put your icon here}</View>
<View style={styles.cardText}>{put your text here}</View>
</View>
...add the other 2 rows here
</View>
And styles
cardRow: {
flexDirection: "row",
flex: 1
},
cardIcon: {
flex: 1
},
cardText: {
flex: 9
}
And add your styles for icons and text.
You can change up the cardIcon and cardText flex ratio so that you get different width for your icon.
You can make a wrapper view with alignItems: 'center' to make both text and icon vertical center
<View style={styles.cardView}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="store" size={21} color="lightgrey" />
<Text style={styles.CardTextLayout}>{item.key}</Text>
</View>
.....
</View>
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',
}} />