Circular View with centered text

WHAT THIS TESTS This is a practical composition question: it confirms you can turn a box into a circle and center content using flexbox, combining several style properties correctly.

A GOOD ANSWER COVERS To make a circle, the parent View must be square, so width and height are equal, for example both 80. Then borderRadius must be at least half of that dimension, so 40 for an 80 box; setting it to half guarantees a perfect circle while a larger value is also clamped to a circle. To center the Text inside, the parent uses flex centering: justifyContent center handles the main axis and alignItems center handles the cross axis, so the child is centered both vertically and horizontally regardless of default column direction. The child Text typically gets textAlign center so wrapped lines stay centered, plus a color and fontSize. You usually do not need extra wrappers because a single Text child centers cleanly with parent flex alignment.

COMMON WRONG ANSWERS Setting borderRadius to a fixed small value that only rounds corners. Centering only with alignItems or only justifyContent, leaving the text off-center on one axis. Giving unequal width and height, producing an ellipse. Adding margins on the Text to fake centering, which is brittle.

LIKELY FOLLOW-UPS How would you make the circle scale with content? What if the text is long and wraps? How do borderRadius percentages behave?

ONE CONCRETE EXAMPLE A parent View styled width 80, height 80, borderRadius 40, justifyContent center, alignItems center, backgroundColor brand. Inside, a single Text with color white and textAlign center showing a letter or count. The result is a centered avatar-style circle, and changing both width and height together keeps it round.