Stuck at beginning of field with large font enabled (iOS)

[BrandonWilliamsCS]

When on iOS, with accessibility large font turned on, the field doesn't "scroll" to keep the end of the value visible when it's wider than the field itself.

Occurs on iPhone 5/iOS 10 and iPhone 8/iOS 11, both device and simulator. Tested with versions 0.10.2 and 0.12.0 of react-native-material-textfield

Steps to reproduce:

1. In the iOS accessibility settings menu, turn on large fonts and increase the font size to beyond half.
2. create a TextField component (or use the MWE below)
3. enter text in the field until it overflows the width of the text field

Expected behavior: The contents "scroll" to the left so that new characters appear at the right of the field while older characters disappear off to the left.

Actual Behavior: Characters continue to be added to the field, but the beginning of the field remains visible and no scrolling occurs.

Minimal(ish) Working Example: https://github.com/BrandonWilliamsCS/react-native-test-harness/tree/mwe-rnmt-large-text

Partial Workaround Passing a small or null fontSize in the style prop (not the fontSize prop) seems to fix the issue. With extremely large accessibility fonts, I needed to make the font size 6 in order for the field to behave properly, but of course this makes the font too small. I suspect this has something to do with how accessibility sizing interferes with positioning of the various moving pieces, as this problem doesn't occur with react-native's TextInput.

Other comments The elements overlap and/or clip when large font is on. Ideally, react-native-material-textfield would resize or reflow to support accessibility settings like this. Also, unlike in the example found in this repository, the field would have a width of 0 unless explicitly given a different width. If desired, I can report this more formally in another issue.

[reimertz]

I confirm that that I see this issue as well. I'll try and figure out what is going on.

[deletedcu]

I found the same issue and need to fix it as soon as possible. Let me know the solution if anyone has an experience on it.

[NuclearKev]

I am also have the same issue. It doesn't seem to happen on android, only iOS. Tested the same thing with TextInput and it didn't happen.

[adrianso]

I found a workaround for this issue by setting the height to null on iOS.

import { Platform } from 'react-native'
import { TextField } from 'react-native-material-textfield';

return (<TextField
  style={{ height: Platform.OS === 'ios' ? null : undefined }}
/>);

This will "unstuck" the field in iOS, with the tradeoff that while large font set in Accessibility the text field will be a few pixel shorter than its desired height.

In the code above, I have also set the height to be undefined for Android, so that the height calculations will still be used for Android.