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

lineHeight styling doesn't impact multiline TextInput #14232

Closed
florianpeninon opened this issue May 28, 2017 · 16 comments
Closed

lineHeight styling doesn't impact multiline TextInput #14232

florianpeninon opened this issue May 28, 2017 · 16 comments
Assignees
Labels
Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@florianpeninon
Copy link

Description

lineHeight styling doesn't impact TextInput when multiline is set to true

Reproduction Steps and Sample Code

kapture 2017-05-28 at 1 48 28

<TextInput
    multiline={true}
    style={{
        lineHeight: fontLineHeight,
    }}
/>

Additional Information

  • React Native version: 0.44.0
  • Platform: iOS (didn't test on Android)
@shergin shergin self-assigned this May 28, 2017
@florianpeninon
Copy link
Author

@shergin thanks for taking care of that 👍

@shergin shergin added the Platform: iOS iOS applications. label May 30, 2017
@Amaros90
Copy link

I'm encountering this issue on iOS, but not on Android

@hramos
Copy link
Contributor

hramos commented Aug 31, 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@hramos hramos added the Icebox label Aug 31, 2017
@hramos hramos closed this as completed Aug 31, 2017
@shergin
Copy link
Contributor

shergin commented Aug 31, 2017

I still plan to fix this. 😄

@shergin shergin reopened this Aug 31, 2017
@pie6k
Copy link

pie6k commented Oct 15, 2017

Any update? I'm writing kind of WYSIWYG editor, and my approach is that I'm creating 'fake' elements that imitate whats inside text edit with styles. Thats why I need very solid control over line height.

@statelo
Copy link

statelo commented Nov 29, 2017

Still having this issue though :(((

@steobrien
Copy link

In advance of a real fix here, any suggestions to work around?

@drpiou
Copy link

drpiou commented Feb 1, 2018

Same here with RN 0.51.

@shergin
Copy link
Contributor

shergin commented Feb 4, 2018

It should be fixed in master now! Can anybody confirm?

@chrystal-lyu
Copy link

@shergin Still seems not fixed for 0.53, correct me if I'm using it wrong

screenshot:
simulator screen shot - iphone 6 - 2018-02-08 at 16 43 38

code:

      <View style={styles.container}>
        <Text
          style={{
            lineHeight: 40,
            borderWidth: 1,
            marginBottom: 10
          }}
        >Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!</Text>
        <TextInput multiline placeholder='placeholder'
          style={{
            lineHeight: 40,
            borderWidth: 1,
            width: width - 10,
            backgroundColor: 'pink'
          }}
        />
      </View>

@steobrien
Copy link

@shergin Yes! I've tested my app out on latest React Native master, and I can confirm this is fixed. Thank you 🙌

Note to others: not fixed in any React Native releases yet including 0.53.

@hramos hramos removed the Icebox label Mar 8, 2018
@hramos
Copy link
Contributor

hramos commented Mar 14, 2018

Fixed in master.

@hramos hramos closed this as completed Mar 14, 2018
@ArsenyYankovsky
Copy link

Are you sure this is fixed? Getting this using 0.57 and iOS:

photo_2018-11-18_02-38-24

  storyText: {
    fontSize: 18,
    marginTop: 18,
    fontFamily: 'noto-sans',
    color: '#444',
    lineHeight: 1000,
    textAlign: 'left',
    backgroundColor: '#fff',
  },
        <TextInput
          style={styles.storyText}
          multiline={true}
          keyboardType="default"
          placeholder="Your Message"
        />

@hramos
Copy link
Contributor

hramos commented Dec 13, 2018

@ArsenyYankovsky can you verify 0.58.0-rc and open a new issue if it's reproducing there?

@martinchristov
Copy link

Issue persists on RN 0.57.7

@hramos
Copy link
Contributor

hramos commented Jan 24, 2019

@martinchristov can you verify 0.58-rc and open a new issue if it's not resolved in the RC?

@facebook facebook locked as resolved and limited conversation to collaborators Jan 24, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Dec 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests