react-native-vietnam / react-native-search-box

A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible.
476 stars 132 forks source link

placeholder text to the left #65

Open jahnavi310 opened 6 years ago

jahnavi310 commented 6 years ago

Hi there,

I am trying to place the placeholder text to the extreme left instead of having it center aligned. I tried playing around with some of the props but unfortunately none of them worked.

Any idea on how we can do this?

se1exin commented 6 years ago

I needed this too, I solved it by making the Collapsed Margin the same width of the half the input, less the desired Expanded Margin.

The formula I used is (Half the window width) - (Container Margin Left + Expanded Margin). In my case the View that contains the SearchBox has a Horizontal margin of 15..

Props:

searchIconExpandedMargin={ 20 }
searchIconCollapsedMargin={ (Dimensions.get('window').width / 2) - (15 + 20) }
placeholderExpandedMargin={ 40 }
placeholderCollapsedMargin={ (Dimensions.get('window').width / 2) - (15 + 40) }