Conversation
…der `textAlign` (#46441) # Why Fixes #46300 On Android the universal `TextInput` from `@expo/ui` ignored the `style` prop `backgroundColor` and `borderWidth` had no effect, so the field kept the default Material look and `textAlign` was not applied to the placeholder text. The exact same code renders correctly on iOS, so the two platforms diverged visually. # How The universal `TextInput` renders a Material 3 `TextField` on Android. `style` is converted to Compose modifiers (`background(...)`, `border(...)`), but the Material `TextField` paints its own container color and indicator line *over* those modifiers, so the style-driven background/border never showed. `borderWidth: 0` also produced no modifier at all, and `textAlign` was only fed to the typed-text `textStyle`, never to the placeholder slot. The fix keeps the bridge thin and uses the `TextField`'s own native knobs instead of fighting them, all in `src/universal/TextInput/index.android.tsx` (JS-only, no native changes): - Map `style.backgroundColor` onto `focused`/`unfocused`/`disabled`/`error` `ContainerColor`, and strip it from the modifier list so it isn't drawn twice. - When `style.borderWidth === 0` (and `underlineColorAndroid` is not set), make the indicator colors transparent to remove the Material underline. An explicit `underlineColorAndroid` still wins. - Apply `textAlign` to the placeholder `Text` and stretch it with `fillMaxWidth()` so alignment is honored, matching the typed text and iOS behavior. # Test Plan Tested in NCL → **Expo UI (Universal)** → **TextInput** on a physical Android device. Added a `style (green bg, no border #46300)` toggle to `UIUniversal/TextInputScreen.tsx` that reproduces the issue exactly (`backgroundColor: '#99FF99'`, `borderWidth: 0`): - Toggling it turns the field green with no underline (previously stayed default Material). - Clearing the text and cycling `textAlign` now also aligns the placeholder (previously only the typed text moved). - The existing `style (240w, gray bg, rounded)`, `cursorColor`, and `placeholderTextColor` toggles now render correctly on Android too. - Verified the default (unstyled) field is unchanged. # Checklist <!-- Please check the appropriate items below if they apply to your diff. --> - [x] I added a `changelog.md` entry and rebuilt the package sources according to [this short guide](https://github.com/expo/expo/blob/main/CONTRIBUTING.md#-before-submitting) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )