SearchBar does not seem to work with custom height

[msageryd]

I'm upgrading an old app. React-native-paper was upgraded from 4.10.1 to 5.12.3.
The SearchBar worked fine in v4.10.1

Here is how I'm using it:

<Searchbar
  placeholder={'search'}
  onChangeText={onChange}
  value={searchQuery}
  style={{
    height: 30,
    borderColor: 'lightblue',
    borderWidth: 1,
    backgroundColor: 'white',
    margin: 6,
  }}
/>

There seems to be an internal padding added, but I'm not able to change it via padding, paddingTop or paddingVertical

Your Environment

software	version
ios	17.2 (simulator)
react-native	0.73.3
react-native-paper	5.12.3
node	18.19
npm.	10.2.3

[msageryd]

Update:
I tried the same with theme version 2 and it worked as before.

I.e. the problem only regards v3.

[Aztaro97]

To make it work, you need to set minHeight value 0 to the input style:

<Searchbar
  placeholder={'search'}
  onChangeText={onChange}
  value={searchQuery}
  style={{
    height: 30,
    borderColor: 'lightblue',
    borderWidth: 1,
    backgroundColor: 'white',
    margin: 6,
  }}
  inputStyle={{
        minHeight: 0 // Add this
      }}
/>

[msageryd]

Thank you!
Your solution works great.

[mubarizgh]

@Aztaro97 your solution works, but on android when the input field is focused it shrinks a bit , do you have any idea how to avoid it

[hgx]

@Aztaro97 your solution works, but on android when the input field is focused it shrinks a bit , do you have any idea how to avoid it

Hi @mubarizgh @Aztaro97
I have the same question, do you have any suggestions?

<Searchbar
  placeholder='Please enter keywords'
  style={{
    borderRadius: 12,
    height: 32,
  }}
  inputStyle={{
    minHeight: 0,
  }}
/>

[mubarizgh]

@Aztaro97 your solution works, but on android when the input field is focused it shrinks a bit , do you have any idea how to avoid it

Hi @mubarizgh @Aztaro97 I have the same question, do you have any suggestions?

<Searchbar
  placeholder='Please enter keywords'
  style={{
    borderRadius: 12,
    height: 32,
  }}
  inputStyle={{
    minHeight: 0,
  }}
/>

@hgx in the style prop i set the height to 50 and it worked for me

[mustapha-ghlissi]

Globally to customize the spacing in a component, we have to use these properties:

• height, minHeight, maxHeight
• width, minWidth, maxWidth
• margin, marginLeft, marginRight, marginTop, marginBottom, marginHorizontal, marginVertical
• padding, paddingLeft, paddingRight, paddingTop, paddingBottom, paddingHorizontal, paddingVertical

In your case you have just to disable the default input minHeight by setting it to 0

inputStyle={{
    minHeight: 0,
  }}

[hkniyi]

@mubarizgh @hgx
To solve the android problem,
use something like this

inputStyle={{  
     minHeight: 30, 
     fontSize: 14,
     paddingTop: 0, 
     paddingBottom: 0
}}
style={{
    borderRadius: 25,
    backgroundColor: '#f8f9fa',
    borderWidth: 1,
    height: 30,
    borderColor: '#e0e0e0', 
}}

[Ashraful-Mijan]

To make it work, you need to set minHeight value 0 to the input style:

<Searchbar
placeholder={'search'}
onChangeText={onChange}
value={searchQuery}
style={{
height: 30,
borderColor: 'lightblue',
borderWidth: 1,
backgroundColor: 'white',
margin: 6,
}}
inputStyle={{
minHeight: 0 // Add this
}}
/>

this on is worked for me with latest version