Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested text with different lineHeight are cropped on Android #30794

Closed
Mighty683 opened this issue Jan 26, 2021 · 6 comments
Closed

Nested text with different lineHeight are cropped on Android #30794

Mighty683 opened this issue Jan 26, 2021 · 6 comments
Labels
Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@Mighty683
Copy link

Mighty683 commented Jan 26, 2021

Description

If we nest text element inside text element with different heights eg: lineHeight 20 inside lineHeight 30 output on android will be cropped, the bigger difference the bigger crop is. It looks like parent Text element takes child Text lineHeight.

I have found workaround by wrapping child Text element by View element first to break Text styles inheritance.

React Native version:

npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Expected Results

Text should be displayed the same way on Android and on iOS

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

Minimal App to show bug:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';


const styles = StyleSheet.create({
  text1: {
    fontSize: 20,
    lineHeight: 30,
    fontWeight: 'bold',
  },
  text2: {
    fontSize: 10,
    lineHeight: 20,
  },
  container: {
    padding: 50,
    backgroundColor: 'white',
    height: '100%',
  },
});

const App = () => {

  return (
    <View style={styles.container}>
      <Text style={styles.text1}>TEXT 1 <Text style={styles.text2}>TEXT 2</Text></Text>
    </View>
  );
};

export default App;

Screenshot Android:

Screenshot_20210126_073844_com appjobs rewards

Screenshot iOS:

Simulator Screen Shot - iPhone 11 - 2021-01-26 at 07 39 39

@Mighty683
Copy link
Author

Mighty683 commented Aug 19, 2021

Seems to be connect to other issue:
#13126

@yahacom
Copy link

yahacom commented Nov 19, 2021

looks like there no solution/fix yet.I catch the same behaviour at RN 0.66.2

@github-actions
Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Oct 28, 2023
Copy link

github-actions bot commented Nov 4, 2023

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

@github-actions github-actions bot closed this as completed Nov 4, 2023
@fabOnReact
Copy link
Contributor

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot

@ktroitsky
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Triage 🔍 Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

4 participants