fix(invisible-text): make input wrapper styles customizable with inputContainer prop

[Jeius]

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]

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]

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.

[R0EYK]

Thanks for the explanation, will have this tested in my app soon and I will report any issues.
If this PR gets to merge anytime, I am happy to update the docs because the Styling Structure and Component Layout Structure
would need to be updated

[Jeius]

@R0EYK Thank you!