TypeScript error in code copied from documentation/README

[David Barker]

I'm working on creating a custom component and while it does appear to work, I'm getting a TypeScript error within the useRestyle hook.

To try and figure out what might be the issue, I copied the example code from the README (see the second example under Custom Components), but I notice that it, too, is producing the same TypeScript error.

Here's the example code from the README.

import {TouchableOpacity, View} from 'react-native';
import {
  useRestyle,
  spacing,
  border,
  backgroundColor,
  SpacingProps,
  BorderProps,
  BackgroundColorProps,
  composeRestyleFunctions,
} from '@shopify/restyle';

import Text from './Text';
import {Theme} from './theme';

const restyleFunctions = composeRestyleFunctions([spacing, border, backgroundColor]);
type Props = SpacingProps<Theme> &
  BorderProps<Theme> &
  BackgroundColorProps<Theme> & {
    onPress: () => void;
  };

const Button = ({onPress, label, ...rest}: Props) => {
  const props = useRestyle(restyleFunctions, rest);

  return (
    <TouchableOpacity onPress={onPress}>
      <View {...props}>
        <Text variant="buttonLabel">{label}</Text>
      </View>
    </TouchableOpacity>
  );
};

And this is the error shown for restyleFunctions being passed to the useRestyle hook.

Argument of type '{ buildStyle: (props: Record<string, any>, { theme, dimensions, }: { theme: BaseTheme; dimensions: Dimensions; }) => RNStyle; properties: string[]; propertiesMap: Record<...>; }' is not assignable to parameter of type '{ buildStyle: <TInputProps extends { margin?: any; marginTop?: any; marginRight?: any; marginBottom?: any; marginLeft?: any; marginHorizontal?: any; marginVertical?: any; marginStart?: any; marginEnd?: any; padding?: any; paddingTop?: any; ... 31 more ...; backgroundColor?: any; }>(props: TInputProps, { theme, dimen...'.
  Types of property 'properties' are incompatible.
    Type 'string[]' is not assignable to type '("backgroundColor" | "margin" | "marginBottom" | "marginEnd" | "marginHorizontal" | "marginLeft" | "marginRight" | "marginStart" | "marginTop" | "marginVertical" | "padding" | ... 31 more ... | "borderTopStartRadius")[]'.
      Type 'string' is not assignable to type '"backgroundColor" | "margin" | "marginBottom" | "marginEnd" | "marginHorizontal" | "marginLeft" | "marginRight" | "marginStart" | "marginTop" | "marginVertical" | "padding" | ... 31 more ... | "borderTopStartRadius"'.

Have I implemented something incorrectly, or is the error accurate?

[Sebastián Balay]

@davidbarker thanks for pointing this out, there's definitely an error in the readme example.

Could you try the proposed changes in this PR? #142

[David Barker]

@sbalay This seems to be fine now. Thanks!