ThemeProvider | @bacons/apple-colors issue

[ahmedrowaihi]

in ThemeProvider.tsx

there is this apple-colors spreading colors, which is not compatible to React Native NativeTheme type

interface NativeTheme {
  dark: boolean;
  colors: {
    primary: string;
    background: string;
    card: string;
    text: string;
    border: string;
    notification: string;
  };
  fonts: {
    regular: FontStyle;
    medium: FontStyle;
    bold: FontStyle;
    heavy: FontStyle;
  };
}

but if you see the result of @bacons/apple-colors, is objects

import * as AC from "@bacons/apple-colors";
console.log(JSON.stringify(AC, null, 2));

Result:

{
  "darkText": {
    "semantic": [
      "darkText"
    ]
  },
  "label": {
    "semantic": [
      "label"
    ]
  },
  "lightText": {
    "semantic": [
      "lightText"
    ]
  },
  "link": {
    "semantic": [
      "link"
    ]
  },
  "opaqueSeparator": {
    "semantic": [
      "opaqueSeparator"
    ]
  },
  "placeholderText": {
    "semantic": [
      "placeholderText"
    ]
  },
  "quaternaryLabel": {
    "semantic": [
      "quaternaryLabel"
    ]
  },
  "quaternarySystemFill": {
    "semantic": [
      "quaternarySystemFill"
    ]
  },
  "secondaryLabel": {
    "semantic": [
      "secondaryLabel"
    ]
  },
  "secondarySystemBackground": {
    "semantic": [
      "secondarySystemBackground"
    ]
  },
  "secondarySystemFill": {
    "semantic": [
      "secondarySystemFill"
    ]
  },
  "secondarySystemGroupedBackground": {
    "semantic": [
      "secondarySystemGroupedBackground"
    ]
  },
  "separator": {
    "semantic": [
      "separator"
    ]
  },
  "systemBackground": {
    "semantic": [
      "systemBackground"
    ]
  },
  "systemBlue": {
    "semantic": [
      "systemBlue"
    ]
  },
  "systemBrown": {
    "semantic": [
      "systemBrown"
    ]
  },
  "systemCyan": {
    "semantic": [
      "systemCyan"
    ]
  },
  "systemFill": {
    "semantic": [
      "systemFill"
    ]
  },
  "systemGray": {
    "semantic": [
      "systemGray"
    ]
  },
  "systemGray2": {
    "semantic": [
      "systemGray2"
    ]
  },
  "systemGray3": {
    "semantic": [
      "systemGray3"
    ]
  },
  "systemGray4": {
    "semantic": [
      "systemGray4"
    ]
  },
  "systemGray5": {
    "semantic": [
      "systemGray5"
    ]
  },
  "systemGray6": {
    "semantic": [
      "systemGray6"
    ]
  },
  "systemGreen": {
    "semantic": [
      "systemGreen"
    ]
  },
  "systemGroupedBackground": {
    "semantic": [
      "systemGroupedBackground"
    ]
  },
  "systemIndigo": {
    "semantic": [
      "systemIndigo"
    ]
  },
  "systemMint": {
    "semantic": [
      "systemMint"
    ]
  },
  "systemOrange": {
    "semantic": [
      "systemOrange"
    ]
  },
  "systemPink": {
    "semantic": [
      "systemPink"
    ]
  },
  "systemPurple": {
    "semantic": [
      "systemPurple"
    ]
  },
  "systemRed": {
    "semantic": [
      "systemRed"
    ]
  },
  "systemTeal": {
    "semantic": [
      "systemTeal"
    ]
  },
  "systemYellow": {
    "semantic": [
      "systemYellow"
    ]
  },
  "tertiaryLabel": {
    "semantic": [
      "tertiaryLabel"
    ]
  },
  "tertiarySystemBackground": {
    "semantic": [
      "tertiarySystemBackground"
    ]
  },
  "tertiarySystemFill": {
    "semantic": [
      "tertiarySystemFill"
    ]
  },
  "tertiarySystemGroupedBackground": {
    "semantic": [
      "tertiarySystemGroupedBackground"
    ]
  }
}

[ahmedrowaihi]

to reproduce the error
try adding a drawer layout, and you will hit this error immediately