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

Width of TextInput is wrong with custom font on Android #23629

Closed
temhota opened this issue Feb 25, 2019 · 10 comments
Closed

Width of TextInput is wrong with custom font on Android #23629

temhota opened this issue Feb 25, 2019 · 10 comments
Labels
Bug Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@temhota
Copy link

temhota commented Feb 25, 2019

🐛 Bug Report

The width of TextInput on Android is calculated wrong.
Looks like it takes the width of the default font.
See screenshots below:

1

2

bildschirmfoto 2019-02-26 um 11 19 14

bildschirmfoto 2019-02-26 um 11 19 27

bildschirmfoto 2019-02-26 um 11 19 34

With default font (looks like it should be):
3
4

To Reproduce

Add a Text component after TextInput (in our case Text with € sign).

Expected Behavior

TextInput should take the width of its content. The distance between TextInput content and the € sign should always be the same. Content shouldn't be cut.

Code Example

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

export default class Test extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          underlineColorAndroid='transparent'
          placeholder='0'
        />
        <Text style={styles.textInput}></Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  textInput: {
     fontFamily: 'customFont'
  }
});

Environment

React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 137.99 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.6.0 - ~/.nvm/versions/node/v10.6.0/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.1.0 - ~/.nvm/versions/node/v10.6.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.3, 25.0.2, 27.0.3, 28.0.2, 28.0.3
        System Images: android-26 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.58.4 => 0.58.4
@react-native-bot react-native-bot added Component: TextInput Related to the TextInput component. Platform: Android Android applications. labels Feb 25, 2019
@hramos hramos added the Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. label Feb 25, 2019
@Bardimaswift
Copy link

Bardimaswift commented Feb 26, 2019

Also I sight what TextInput on android have min height related with placeholder length. Maybe this is that case. You can try set empty placeholder while TextInput not empty as a temporary solution.

@temhota
Copy link
Author

temhota commented Feb 26, 2019

Also I sight what TextInput on android have min height related with placeholder length. Maybe this is that case. You can tray set empty placeholder while TextInput not empty as a temporary solution.

@Bardimaswift There is another issue with the placeholder, yes. But this one is not related to placeholder. I just updated the screenshots to make it more visible. If I type 1111111 the distance to increases. If I type 00000 digits become cut. But with a default font everything looks fine.

@xhirazi
Copy link

xhirazi commented Apr 23, 2019

@temhota Any solution ?

@mjfiandaca
Copy link

Not sure if this will help. I was having the same issue with a custom font and textinput.
I had to add the '.ttf' to the end of the custom font family (in your case, textInput: {
fontFamily: 'customFont.ttf'
}) and this resolved my issue. I am still looking at the root cause or why this would have worked, but in case you need a temporary solution, there you go.

@krisxcrash
Copy link

Was there an alternative resolution to this aside from adding '.ttf' to the font family? @temhota

@mjfiandaca
Copy link

Actually, the .ttf just caused all of my custom fonts to disappear and go to the default font of Roboto. Thank you for asking as I forgot to update this accordingly.

To fix this, I actually embedded a within the to display the actual value - the system was then able to calculate and I had no more truncation.

So where I formerly had:

                  key={item.itemDisplay}
                  value={item.itemDisplay}
                  style={index === selectedItem ? itemSelectedStyle : itemStyle}
                  caretHidden={true}
                  spellCheck={false}
                  autoCorrect={false}
                  onChangeText={input => this.OnChangeItem(input, item.itemDisplay)}
                  onFocus={() => onFocus(index)}
                  onBlur={onBlur}
                  ref={ref => (this.lastInputRef = ref)}
                />

It became:

                      caretHidden={true}
                      spellCheck={false}
                      autoCorrect={false}
                      onChangeText={input => this.OnChangeItem(input, item.itemDisplay)}
                      onFocus={() => onFocus(index)}
                      onBlur={onBlur}
                      style={index === selectedItem ? itemTextSelectedStyle : itemTextStyle}
                      ref={ref => (this.lastInputRef = ref)}
                    >
                      <Text>{item.itemDisplay}</Text>
                    </TextInput>```

@edipkavvas
Copy link

This is really a big problem of TextInput. We are developing the mobile application of a known bank using react native and have custom fonts. We are trying to implement an input Amount component which is always horizontally centralized and font-decreasing after a number character length. Also integer part and the decimal part should be independently changable. When we put the two TextInputs, the seperator Text between them and the currency type indicator Text at the end in flex direction "row". TextInputs can't calculate their character widths correctly on Android and distances between components seem too much if we write thin characters like 1 and too less when we write thick characters like 0 or 8 (even they go to the top of the adjacent Text). Are u guys planning to resolve this issue soon?

@hassan1903
Copy link

Hey again,
The problem solved @0.59.10 version a hundred percent but maybe after >=0.59 working according to that pull request merged (just a guess btw) d2153fc
Please try @0.59 first if you can and then @0.59.10 @temhota

@stale
Copy link

stale bot commented Oct 23, 2019

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Oct 23, 2019
@stale
Copy link

stale bot commented Oct 31, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Oct 31, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Oct 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Platform: Android Android applications. 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

9 participants