Can't remove horizontal padding in SearchBar component

Component: SearchBar

Explain what you did

I’m trying to remove the padding in the SearchBar component.

Expected behavior

I would’ve expected to be able to remove the extra padding with {{ padding: 0 }}.

Describe the bug

To Reproduce

Wrap the SearchBar in a wrapper that gives 16px padding on both sides. You can see this in the screenshot. It’s a little hard to see with the background being white but know that the two blue cards are both 16px from the outer edges of the screen.

I want the outer grey part of the SearchBar to also align with these cards. The component itself is aligning to them but the actual input inside the container seems to have padding pushing it in. I’ve given the container a red background to show what I mean. It looks like there’s 8px padding on the wrapper. Looking at the code – I think this is the right code – it looks like there’s padding set by the theme but that anything passed to containerStyle should work. In this case, I thought passing padding: 0 to containerStyle would work but it doesn’t appear to do anything.

<SafeAreaView style={styles.container}>
  <SearchBar
    platform="ios"
    placeholder={translate('common.searchIn', { name: categoryName })}
    onChangeText={handleSearch}
    lightTheme={true}
    value={searchQuery}
    containerStyle={{ backgroundColor: 'red', padding: 0 }}
    inputStyle={{ color: color.palette.offBlack }}
    inputContainerStyle={{ backgroundColor: color.palette.iOSLightGrey }}
  />

I’ve also tried adding margin: 0 and padding: 0 to containerStyle, inputStyle, and inputContainerStyle.

Screenshots

Your Environment (please complete the following information):

software	version
react-native-elements	1.2.7
react-native	Expo sdk-35.0.0

[Qiyu8]

I mean you can try code below. focused on containerStyle.

<SafeAreaView style={styles.container}>
  <SearchBar
    platform="ios"
    placeholder={translate('common.searchIn', { name: categoryName })}
    onChangeText={handleSearch}
    lightTheme={true}
    value={searchQuery}
    containerStyle={{ backgroundColor: 'red', paddingBottom: 0 }}
    inputStyle={{ color: color.palette.offBlack }}
    inputContainerStyle={{ backgroundColor: color.palette.iOSLightGrey }}
  />

[darrylyoung]

Ah, yeah. I’d been trying padding: 0 and paddingVertical: 0 but these don’t actually override the individual paddingTop and paddingBottom. Thanks for the suggestion, @Qiyu8. 👍

Now, to make the input go right to the edges…

In the iOS code, anything you pass to inputContainerStyle will override the ability for the search bar to shrink (with right margin) as the cancel button is shown. For example:

<SearchBar
  platform="ios"
  placeholder={translate('common.searchIn', { name: categoryName })}
  onChangeText={handleSearch}
  lightTheme={true}
  value={searchQuery}
  containerStyle={{
    backgroundColor: 'red',
    paddingBottom: 0,
    paddingTop: 0
  }}
  inputContainerStyle={{
    backgroundColor: color.palette.iOSLightGrey,
    marginLeft: 0 // <- this works to allow the input to start at the left edge of its container
    marginRight: 0 // <- here is the issue now (see below)
  }}
  inputStyle={{ color: color.palette.offBlack }}
/>

This finally looks like I want it to look, by overriding the marginRight set here, but what this means is that now, when the input has focus, it won’t slide in by adjusting its margin – code here. I’m going to open a PR and see if they’ll switch around the order of the applied CSS here as that should allow users to apply whatever margin they want but also still have it slide in when the cancel button shows.

Thanks for the replies, @Qiyu8.