Is there a way to remove default padding from react native picker component?

Question

I want to start showing the text inside the picker component from the start without any padding applied. I researched but couldn't find a solution. I'm debugging in android.

My code:

<View style={[styles.pickerContainer]}>
            <Picker
              selectedValue={this.state.phoneCountryCode}
              style={[styles.pickerText(text),{backgroundColor:'transparent', width: 80 }]}
              itemStyle={{padding:0, backgroundColor:'yellow'}}
              mode="dropdown"
              onValueChange={(itemValue, itemIndex) =>
                this.setState({ phoneCountryCode: itemValue })
              }>
              {Constants.CountryCodes.map((item, index) => (
                <Picker.Item key={item} label={item.label} value={item.value} />
              ))}
            </Picker>
          </View>

Style:

pickerContainer:{
  marginTop: 10, 
  position: 'absolute', left:0, bottom:0, zIndex:10,
},
  pickerText:(text)=>({
  color:'gray',
  height: 40,
  textAlign: 'left',
  padding:0,
  margin: 0,
}),

Hendley

Answer 1

I had same issue with Picker component, it's quite tricky to style it correctly, I'm leaving some of my findings.

use negative marginLeft to remove padding on the left.

use width and wrapper view to manage padding on right.

use height to fix vertical padding.

Just in case you can afford one dependency check some third-party components like this it's highly customizable

PS: You may have figured it by now, but I'm still leaving a remark for anyone else.

Akers

Answer 2

Disclaimer: Works for Android and I do not know if it works for IOS.

In my case it was sufficient to set margin to -16 (as padding is set to 16 for picker) and to wrap picker into view with following things set in style: overflow: 'hidden', justifyContent: 'center', display: 'flex'. Now it is possible to set up padding by setting up padding on view. BTW setting height on view also works for picker.

        <View
            style={{
              width: '70%',
              borderStyle: 'solid',
              borderWidth: 1,
              borderColor: 'black',
              height: 20,
              padding: 6,
              overflow: 'hidden',
              justifyContent: 'center',
              display: 'flex',
            }}>
            <Picker
              mode="dropdown"
              style={{
                backgroundColor: 'yellow',
                margin: -16,
              }}
              onValueChange={(itemValue, itemIndex) => {}}>
              <Picker.Item label="Java" value="java" style={{fontSize: 10}} />
              <Picker.Item label="JavaScript" value="js" style={{fontSize: 10}} />
            </Picker>
          </View>

Chartism

Thanks so much, this worked for me in July 2023. – Photography

margin: -4 did the work for me! Couldn't find anything useful in the issues – Treadle