A working Typescript configuration for styled-components and React Native
It’s not always easy to have the syntax to use the definition files in our program and have the right completion. Everything can be contained in a file called theme, which will be used to expose an…
👋🏻 For a English version of this article 🇺🇸 : let’s check out at Medium

L'avantage d'utiliser typescript c'est que cela va nous permettre d'avoir du type-checking et de l'auto-complétion dans notre IDE afin d'avoir un programme et une expérience de développement plus sure.

Pas toujours facile d'avoir la syntaxe pour utiliser les fichiers de définitions dans notre programme et avoir la bonne complétion.

Voici un example de configuration que vous pouvez utiliser

Cette configuration vous permettra :

  • D'avoir de l'auto-complétion et du type-checking sur votre thème dans vos composants.
  • D'avoir la complétion basique sur les types de styled-components

De quoi avons nous besoin du coup ?

Tout peut se tenir dans un fichier que l'on nommera theme.ts, ce dernier va servir à exposer un objet avec les types de notre thème. Vous pouvez parfaitement scinder cela en plusieurs fichiers si vous le souhaitez.

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;
// 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,
  },
};