React Native TypeScript Property 'xxx' does not exist on type 'xx'-CodePudding

Hello I Converted React Native Java Script Project into Typescript all working is fine but some warning is showing me please any one help me out in this ! How to pass props from other folder please look into

import React, { useState, useRef, useEffect } from "react";
import { Text, Container, Canvas, Button } from "../../components";
import styled from "styled-components/native";

const Input = styled.TextInput`
  width: 25px;
  font-size: 24px;
  padding-top: ${(props) => props.theme.spacing.sm};
  padding-bottom: ${(props) => props.theme.spacing.sm};
  border-bottom-color: ${(props) => props.theme.color.white};
`;

Errors are

Error Property 'spacing' does not exist on type 'DefaultTheme'.
Error Property 'color' does not exist on type 'DefaultTheme'.

theme.tsx

import React, { createContext, useContext, useState } from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import themes from "../themes/";

type ThemeContextType = {
  theme: string;
  setTheme: (value: string) => void;
};
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(themes["dark"]);
  const [themeKey, setThemeKey] = useState("dark");

  return (
    <ThemeContext.Provider value={{ theme, themeKey }}>
      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

themes/index.ts

import dark from "./dark";
import light from "./light";

const themes = {
  dark,
  light,
};
export default themes;

light.tsx

const light = {
  color: {
    background: "#ffffff",
    black: "#ffffff",
    white: "#000000",
  },
  spacing: {
    xs: "6px",
    sm: "8px",
  },
};

export default light;

CodePudding user response：

See the Styled Components documentation - Create a declarations file

You need to define the shape of your theme objects for Typescript

// styled.d.ts
declare module 'styled-components/native' {
  export interface DefaultTheme {
    color: {
      background: string;
      black: string;
      white: string;
    };
    spacing: {
      xs: string;
      sm: string;
    }
  }
}

Make sure you read the Typescript section of the documentation thoroughly.