lawnstarter / react-native-picker-select

🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://npmjs.com/package/react-native-picker-select
MIT License
1.73k stars 491 forks source link

Typing doesn't permit arrays when supplying style overrides #527

Closed stevebutler2210 closed 8 months ago

stevebutler2210 commented 8 months ago

Describe the bug
The PickerStyle type definition doesn't allow for arrays of style objects to be passed for any of the properties, requiring unnecessary use of StyleSheet.flatten() to satisfy the typings. Passing arrays of style objects is valid syntax (thanks to RN StyleProp), and behaves as expected if you ignore the type errors—use of flatten shouldn't be necessary here unless the situation strictly requires it (to flatten nesting etc).

Proposed solution would be to amend the typing of the PickerStyle interface to use e.g. StyleProp<ViewStyle> instead of ViewStyle.

To Reproduce
Pass an array of ViewStyle objects into the style.inputAndroidContainer prop.

Simple reproduction can be seen with the following implementation, or on the snack linked below:

import React from "react";
import type { StyleProp, ViewStyle } from "react-native";
import RNPickerSelect from "react-native-picker-select";

interface DropdownProps {
  value: string;
  options: string[];
  editable?: boolean;
}

export const Dropdown: React.FC<DropdownProps> = ({
  value,
  options,
  editable,
}) => {
  const $customInputWrapperStyles: StyleProp<ViewStyle> = [
    $inputWrapperStyles,
    !editable && $inputWrapperDisabledStyles,
  ]

  return (
    <RNPickerSelect
      value={value}
      items={options.map((option) => ({ label: option, value: option }))}
      disabled={!editable}
      style={{
        inputAndroidContainer: $customInputWrapperStyles,
      }}
    />
  );
};

const $inputWrapperStyles: ViewStyle = {
  borderWidth: 1,
  borderRadius: 100,
  borderColor: "black",
  backgroundColor: "white",
};

const $inputWrapperDisabledStyles: ViewStyle = {
  backgroundColor: "gray",
};

The styles work, but a type error is raised.

Expected behavior
As the style syntax is valid, no type error should be raised.

Screenshots
Screenshot 2023-11-10 at 17 31 01

Additional details

Reproduction and/or code sample
https://snack.expo.dev/@stevebutlerkyan/rnpicker-styleprop-type-error-example

lfkwtz commented 8 months ago

Interested in contributing a fix?

stevebutler2210 commented 8 months ago

@lfkwtz 💯 just wanted to make sure the issue was agreed upon first! If we're on the same page, I'll try and get something raised later today 👍