Search code examples
javascriptreactjsreact-nativepicker

How can I reduce excess space on the left in react-native-picker/picker?

Question

How can I reduce excess space on the left in react-native-picker/picker?

Background

I want to use scrolling pickers in multiple places on a screen. These pickers will need to be efficient in their spacing because there will be some next each other. So I want the pressable scrolling areas to be just the size of the element selected. In most cases these are just numbers of single or double digits.

I have made an example here where I have played with the different stylings, but in all cases there is space on the left that I cannot reduce any further. The parameter I have been adjusting is the width (in styles.picker) and if I make that width any smaller it will cut off the selected element.

Any suggestions?

Screenshot of the issue

enter image description here

Below is code to replicate this issue:

import { StyleSheet, Text, View } from "react-native";
import { Picker } from "@react-native-picker/picker";
import { useState } from "react";

export default function NativePicker02({ navigation }) {
  const [selectedNumber, setSelectedNumber] = useState(0);

  return (
      <View style={styles.container}>
        <Text>NativePicker02</Text>
        <View style={styles.vwPickerSelection}>
          <Text>selected: {selectedNumber}</Text>
        </View>
        <View style={styles.vwPicker}>
          <Picker
            selectedValue={selectedNumber}
            onValueChange={(itemValue, itemIndex) =>
              setSelectedNumber(itemValue)
            }
            style={styles.picker}
            itemStyle={{
              backgroundColor: "black",
              height: 50,
              justifyContent: "center",
              alignItems: "center",
              color: "white",
              width: 50,
            }}
          >
            <Picker.Item label="1" value="1" />
            <Picker.Item label="2" value="2" />
            <Picker.Item label="3" value="3" />
            <Picker.Item label="4" value="4" />
          </Picker>
        </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "gray",
  },
  vwPickerSelection: {
    backgroundColor: "white",
  },
  vwPicker: {
    width: 55,
    alignItems: "center", 
    justifyContent: "center",
    overflow: "hidden", 
  },
  picker: {
    height: 50,
    width: 50,
  },
});
Solution

  • You can “hack” the layout by shifting the picker’s content to the left. Like applying a negative translation:

    <Picker
  selectedValue={selectedNumber}
  onValueChange={(itemValue, itemIndex) => setSelectedNumber(itemValue)}
  style={[styles.picker, { transform: [{ translateX: -10 }] }]}
  itemStyle={{
    backgroundColor: "black",
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    color: "white",
    width: 50,
  }}
>
  <Picker.Item label="1" value="1" />
  <Picker.Item label="2" value="2" />
  <Picker.Item label="3" value="3" />
  <Picker.Item label="4" value="4" />
</Picker>