0

I want to center the second piece of text. The first piece has an icon that takes up part of the width. The second text doesn't take up the full width of the screen, and so when I apply the textAlign to center, the text center should consider its width.

There is another text below the first that takes the full width, so it's really aligned in the center of the screen instead of being center relative the the first piece of text above it.

enter image description here

code:

<View style={{ marginBottom: 25 }}>
   <View style={{ flex: 1, flexDirection: "row", alignItems: "center", marginTop: 15 }}>
      <MaterialIcons onPress={() => console.log("funciona por favor!!")} name="close" size={20} style={{ color: "#FFF" }} />
      <Text style={{ flex: 1, color: "#FFF", fontSize: 24, textAlign: "center" }}>Configurações</Text>
   </View>
   <Text style={{ color: COLORS.white1, fontSize: 24, marginTop: 0, alignSelf: "center" }}>Configurações</Text>
</View>

What I tried: The icon has 30px of width, so I tried a negative value margin for the text and to center it, but it covers the icon, and this icon needs to be pressed, so the press doesn't work.

Thanks for the help, I hope I have been clear in exposing the problem.

pyknight202
  • 1,415
  • 1
  • 5
  • 22
Tony Starkus
  • 556
  • 2
  • 8
  • 25
  • 2
    Put an equally wide invisible content to the right side of your button. I highly suggest using grid layout – Psi Feb 11 '21 at 01:33
  • @Psi nice trick, it worked, thank you. I'm not used to using grid layout, if possible answer this question showing how to do it with grid. Thank you! – Tony Starkus Feb 11 '21 at 01:40
  • just search for css grid and you’ll find some very good docs such as css-tricks.com (which i’m not related to) – Psi Feb 11 '21 at 01:42

3 Answers3

0

You can add a margin to the right of the content to offset the amount the text it pushed from the right.

<View style={{ marginBottom: 25, backgroundColor: 'grey' }}>
  <View style={{ flex: 1, flexDirection: "row", marginTop: 15 }}>
      <MaterialIcons name="close" size={20} style={{ color: "#FFF" }} />
      <Text style={{ flex: 1, color: "#FFF", fontSize: 24, textAlign: "center", marginRight: 20 }}>Configurações</Text>
  </View>
  <Text style={{ color: '#fff', fontSize: 24, marginTop: 0, alignSelf: "center" }}>Configurações</Text>
</View>
nipuna-g
  • 6,252
  • 3
  • 31
  • 48
0

Make your button a grid:

div.button {
  background:blue;
  padding:4px;
  color:white;
  font-family:"Verdana";
  width:50vw;
  display:grid;
  grid-template-columns: 5% auto 5%;
}

div.button div.caption {
  text-align:center;
}
<div class="button">
  <div class="left">ICON</div>
  <div class="caption">Your caption here</div>
  <div class="right"></div>
</div>

Using this approach, you define three columns, put your icon into the leftmost one, the caption into the middle one, and leave one column free which is as wide as the left one, making the center column actually being centered.

Psi
  • 6,387
  • 3
  • 16
  • 26
0

You wrap your close icon in absolute view and set the left position accordingly. In this way, your text will be aligned with the below text

<View style={{position:'absolute',left:0}}>      
    <MaterialIcons onPress={() => console.log("funciona por favor!!")} name="close" 
                   size={20} style={{ color: "#FFF" }} />
</View>
Piyush
  • 96
  • 3