Skip to content

Conversation

@Jeius
Copy link

@Jeius Jeius commented Feb 2, 2026

Fixes #41

Description

This PR fixes the invisible text issue by improving the layout of the TextInput wrapper and making it customizable.

Changes

  • Changed TextInput wrapper flexDirection to row for proper horizontal alignment of input and controls
  • Added inputContainer style property to GooglePlacesTextInputStyles interface, allowing users to customize the input wrapper styling
  • Applies the new inputContainer style to the wrapper View component alongside the default styles
  • Refactored spinner and clear button rendering to display only one at a time instead of side by side:
    • Previously, both components were rendered simultaneously (spinner conditionally), leaving empty space when loading was false
    • Now, the ClearButtonAndSpinner component conditionally renders either the loading indicator or the clear button, eliminating unnecessary whitespace

Motivation

Previously, the TextInput wrapper had limited styling options and the button/spinner layout was inefficient, which could cause text visibility issues and wasted space. This change:

  • ✅ Ensures the input and controls are properly aligned with proper flex layout
  • ✅ Eliminates empty space by rendering only one control (spinner or clear button) at a time
  • ✅ Gives users full control over the input wrapper appearance via the inputContainer prop
  • ✅ Maintains backward compatibility with existing code

Testing

  • The component still renders with proper layout
  • The clear button displays when input is not empty and not loading
  • The loading indicator displays when loading, without leaving empty space
  • Custom inputContainer styles can now be applied through the style prop

@R0EYK
Copy link

R0EYK commented Feb 2, 2026

Did not really have time to go through this but just curious, what is the difference between the container style prop and the inputContainer style prop? Usually inputs like these are wrapped in one wrapper so I am trying to understand why there are container and inputContainer

@Jeius
Copy link
Author

Jeius commented Feb 3, 2026

The container prop styles the wrapper around the entire component, including the TextInput and the suggestions list. The inputContainer prop, on the other hand, only wraps the input field, spinners, and clear button. You can see a breakdown of the component structure in the docs here.

Previously, inputContainer was unstyled, and the spinner and clear button were positioned absolute. That layout was causing the invisible text issue this PR is addressing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Text input cursor and text color not applying when typing in GooglePlacesTextInput

2 participants