4

I tried several configurations, but I am unable to vertically center emoji inside a view.

This is the code I am using:

<View style={{width: 200, height: 200, backgroundColor: "red", justifyContent: "center", alignContent: "center"}}> <Text style = {{fontSize: 100, textAlign: "center", backgroundColor: "black"}}> 🥺 </Text> </View>

Output: (See gap above and below emoji)

enter image description here

Also, I tried solutions from this question. None seems to work out. Is this expected behavior or bug in react native. Thanks

Improve this question
3
  • I copy and pasted your code, and the spaces look fine on my simulator (iOS 14.4, iPhone 12). Can you tell us if this is for iOS or Android, and maybe post some more code? I'm sure you checked already, but you might have some styles in a parent element that's affecting your emoji. Commented Sep 13, 2021 at 18:42
  • @JBWilson Actually, this code I tried on "reactnative.dev/docs/text", just to confirm my hunch. So code runs on browser in chrome. And I used the exact code, just for testing. So there weren't any parent styles. But I first noticed this issue with android. Commented Sep 13, 2021 at 19:04
  • 2
    This looks like bug, I reported it for now, github.com/facebook/react-native/issues/32198 Commented Sep 13, 2021 at 19:18

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.