Property 'children' does not exist on type 'IntrinsicAttributes & blahbah'

"@shopify/restyle": "^1.4.0",
"@shopify/restyle": "^1.4.0",
"typescript": "~4.0.0"

use the following code to generate a <Button> component

const theme = createTheme({
  colors: {
    mainBackground: "#F0F2F3",
    cardPrimaryBackground: "#5A31F4",
  },
});

type Theme = typeof theme

export const Button = createBox<Theme, TouchableOpacityProps>(TouchableOpacity);

When you use it directly, it will give you a type error:

It will be fixed if we change the declaration to:

export const Button = createBox<
  Theme,
  TouchableOpacityProps & { children?: React.ReactNode }
>(TouchableOpacity);

[edgaryp]

I am running into the same issue with createRestyleComponent too. Worked around with using PropsWithChildren from React.

import React, { FC, PropsWithChildren } from "react";

type CardProps = PropsWithChildren<
  SpacingProps<Theme> & VariantProps<Theme, "cardVariants">
>;

const Card = createRestyleComponent<CardProps, Theme>([
  spacing,
  createVariant({ themeKey: "cardVariants" }),
]);

type ButtonProps = {
  onPress: () => void;
  text: string;
};

export const Button: FC<ButtonProps> = ({ onPress, text }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Card>
        <Text>{text}.....</Text>
      </Card>
    </TouchableOpacity>
  );
};

[seyaobey]

Same problem. This library is fantastic, the best library I’ve found for react-native styling. But there is not enough documentation. I’m fighting with the same errors and there is just not resources or examples to help