CODEWITHSUNDEEP
reactjsreact-native
mohamed adel
mohamed adel

Reputation: 715

ReactNative Text Style Next Line

Simply I am trying to make 3 Texts with icons align in a column

a

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,
  },

Upvotes: 0

Views: 185

Answers (2)

cuongtd
cuongtd

Reputation: 3182

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>

Upvotes: 1

Cyber
Cyber

Reputation: 161

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.

Upvotes: 1

Related Questions