question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if youā€™re still stuck at the end, weā€™re happy to hop on a call to see how we can help out.

[iOS] TextInput styles not applied with initial empty value

See original GitHub issue

šŸ› Bug Report

My TextInput styles arenā€™t applied if my initial TextInput state is an empty string, or if I erase all the content manually and start typing again.

If my TextInput has a value in its initial state, it does apply my styles and I can see the spacing. That is, until I manually (backspace) remove the content and start typing again. Then the spacing is gone.

To Reproduce

I canā€™t reproduce it with a snack. It works as expected there. But, maybe itā€™s a version thingā€¦ The versions Iā€™m using are in the Environment section of this ticket.

Hereā€™s a gif to demonstrate the behavior Iā€™m seeing:

  1. Thereā€™s a default value (I set that in state = { text: 'default' })
  2. It works as expected, thereā€™s letter spacing.
  3. I remove all text using backspace
  4. Now as soon as I type, the spacing is gone.
  5. This exact same behaviour (no spacing visible) happens when the initial state is empty.

Expected Behavior

I expect my styling to be applied consistently.

Code Example

This is the code. But like I said, it works on expo

https://snack.expo.io/@rwoverdijk/courageous-waffle

Environment

info
  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 774.04 MB / 32.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.12.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: 21, 22, 23, 24, 25, 26, 27, 28
        Build Tools: 27.0.3, 28.0.3
        System Images: android-25 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.1 => 0.59.1

Sidenote(s)

It took me a lot of time to get the gif the right size on github. Also, the snack name is really cool. I hope that earns this issue some points.

Also, it works as expected on android.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
zhongwuzwcommented, Mar 22, 2019

@RWOverdijk Sorry, no idea, but if you wants to apply it ASAP, you can try comment in https://github.com/react-native-community/react-native-releases/issues/100, that we may cherry-pick them if possible.

0reactions
RWOverdijkcommented, Mar 22, 2019

@zhongwuzw Yes! That works. All my tests pass. Android, too (make sense since your changes donā€™t touch it).

Any idea when this might get shipped?

Read more comments on GitHub >

github_iconTop Results From Across the Web

TextInput is blank whenever I type in React Native
I stumbled upon this issue that whenever I type anything on the TextInput, there is no text being type, meaningĀ ...
Read more >
React Native Check TextInput is Empty or Not
Introduction. This is an example of React Native Check TextInput is Empty or Not. As the topic name describes itself, we will check...
Read more >
TextInput - React Native
TextInput. A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features,Ā ...
Read more >
TextInput - ReactXP
In the first mode, the contents of the text input are static and are specified by the value prop. Any attempt to modify...
Read more >
<input type="range"> - HTML: HyperText Markup Language
The default value is halfway between the specified minimum and ... Note: The following input attributes do not apply to the input range:Ā ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found