Nested View and Text vertical alignment issue.

[rayan1810]

Description

Nesting View inside Text adds lineHeight's marginBottom to View and when we add Text inside that View it doesn't gets aligned properly.

React Native version:

System: OS: macOS 11.4 CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz Memory: 55.67 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.17.0 - /usr/local/bin/node Yarn: 1.22.10 - ~/npm-global/bin/yarn npm: 6.14.13 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: ~0.63.4 => 0.63.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

1. Setup a CRNA or Expo app.
2. Replace the code in App.js with -

   
   import { StatusBar } from "expo-status-bar";
   import React from "react";
   import { StyleSheet, Text, View } from "react-native";

export default function App() { return (

Outside Text{" "} Inside Text

); }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, outsideText: { backgroundColor: "#cecece", }, insideView: { backgroundColor: "#fcc9", }, });

3. Start your App on iOS or Android with `yarn ios` or `yarn android`.

## Expected Results
The text should be in the same line aligned vertically. Like it looks when we run this example on the Web.

## Snack, code example, screenshot, or link to a repository:
https://snack.expo.dev/gdbQbTirc
<img width="429" alt="Screenshot 2021-08-05 at 1 40 11 AM" src="https://user-images.githubusercontent.com/36300815/128248083-60a50122-b43d-4f40-aafe-ed510030f385.png">

[brian-reed-software]

I think I solved this, May I have a Pull Authorization?

[fxhrgco]

Hi! I'm experimenting the same issue with the 0.65.1 RN version.

@brian-reed-software In which react native version it has been released?

Cheers,

[Syphonjr]

@fxhrgco Did you find any solution for this. I'm also experiencing the exact same problem.

[fxhrgco]

Hey @Syphonjr , I ended up using flex container with direction row and align-items center. But sadly it's still happening.

[fxhrgco]

I do not know it it has been solved in the last versions though. I still have the 0.65.1. Does anybody know?

[yannickpschroeder]

I have the same issue. Any solutions yet?

[mtzfactory]

I'm experiencing the same problem... Any solution?

[SupertigerDev]

why is this still not fixed :c this is a huge issue for people who want to make a markup lib that has mentions support

[SupertigerDev]

I kind of found a solution. Just use transform: [{translate: 10}] on the element you want to align. change that 10 to whatever

[nathantew14]

I kind of found a solution. Just use transform: [{translate: 10}] on the element you want to align. change that 10 to whatever

@SupertigerDev this still introduces some extra spacing on top which is evident in multiline text :(

[SupertigerDev]

Yea its not perfect. sucks how this issue is still not fixed.

[SupertigerDev]

aaagh can this be fixed already 😭 its so annoying