React Native - Text/Emoji is not vertically aligning in view

[Parveshdhull]

Description

I tried several configurations, but I am unable to vertically center Text/Emoji inside a view

React Native version:

0.65
I tested on "https://reactnative.dev/docs/text"

Steps To Reproduce

This is the code I am using:

import React, { useState } from "react";
import { View, Text } from "react-native";

const TextInANest = () => {
  return (
    <View style={{width: 200, height: 200, backgroundColor: "red", justifyContent: "center", alignContent: "center"}}>
    <Text style = {{fontSize: 100, textAlign: "center", backgroundColor: "black"}}>
    🥺
    </Text>
    </View>
  );
};
export default TextInANest;

Expected Results

Emoji should be in center

Current Result (See gap above and below emoji)

Snack, code example, screenshot, or link to a repository:

Related stack overflow question: https://stackoverflow.com/questions/69167282/react-native-text-emoji-is-not-vertically-aligning-in-view

[TheLonelyAstronaut]

Just set lineHeight same as fontSize

[Parveshdhull]

No It is also not working.
I am attaching two screenshots, one from chrome and another from my android device

[edison16029]

The issue is with the emoji itself rather than your styling. I tried to zoom in the emoji to get a clearer picture of what is happening.

You need to set the textAlignVertical to one of ['top', 'center', 'bottom'] to align it vertically. However, since in your code you are not giving any explicit height, it is automatically aligned to center vertically. However, as it can be seen from the following screenshots, the emoji is not vertically symmetric.

<Text style = {{fontSize: 150, textAlignVertical: 'center', backgroundColor: "green", height: '50%'}}> 🥺 </Text>

[Parveshdhull]

Hi @edison16029,
Thanks for your comment.
I don't think it is something to do with emojis. I tried using text "O" and it showed the same behavior.

[Parveshdhull]

Looks like issue is only in android and web, not in ios.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.