A working Typescript configuration for styled-components and React Native

App.tsx

import React, { useRef } from "react";
import { ThemeProvider } from "styled-components/native";

import AppNavigator from "@modules/navigation/AppNavigator";
import { theme } from "@modules/ui/theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <AppNavigator />
    </ThemeProvider>
  );
}

export default App;

theme.ts

// import original module declarations
import "styled-components/native";
import { DefaultTheme } from "styled-components/native";

// and extend them!
declare module "styled-components" {
  export interface DefaultTheme {
    colors: {
      main: string;
      lightGrey: string;
      white: string;
    };
    spacing: {
      tiny: number;
      small: number;
      medium: number;
      large: number;
    };
  }
}

// Export theme implementing interface
export const theme: DefaultTheme = {
  colors: {
    main: "rgb(0, 136, 102)",
    lightGrey: "rgb(162, 162, 162)",
    white: "white",
  },
  spacing: {
    large: 30,
    medium: 20,
    small: 15,
    tiny: 10,
  },
};