React Native Typescript: Error that property is not existing

Question

I started with typescript for react native, but sometimes I get very weird error messages and I am not able to fix them.

I am just playing around a bit and I have this line in my code:

<Text text={user?.last_name} style={{color:colors.textSecondary}} variant="labelMedium"/>

Visual Studio Code is giving me this error for colors.textSecondary:

Property 'textSecondary' does not exist on type '{ primary: string; background: string; card: string; text: string; border: string; notification: string; }'.ts(2339)

If I use colors.text it is working, but I do not understand why. Here is the theme file, where I am getting the standard theme colors from:

export const Theme = {
light: {
    mode: 'light',
    colors: {
      primary: '#1976d2',
      secondary: '#7393B3',
      background: '#f9f9f9',
      card: '#ffffff',
      text: '#303233',
      textSecondary: '#727272',
      border: '#e8e8e8',
      error: '#f44336',
    },
  },
  dark: {
    mode: 'dark',
    colors: {
      primary: '#1976d2',
      secondary: '#7393B3',
      background: '#171819',
      card: '#202122',
      text: '#e4e6eb',
      textSecondary: '#b0b3b8',
      border: '#333435',
      error: '#f44336',
    },
  },

};

What am I doing wrong here? The text color is displaying correct by the way.

Thanks! Jan

Answer 1

The issue is because the React Native Theme has a set number of properties as defined:

• Docs: https://reactnavigation.org/docs/themes/
• In TS code: https://github.com/react-navigation/react-navigation/blob/52a3234b7aaf4d4fcc9c0155f44f3ea2233f0f40/packages/native/src/types.tsx#L32

The additional theme value you added is not known to typescript, you have are adding a superset of that value. By adding an additional property in your theme your consuming code has no knowledge that that prop exists. It is only aware of the base Theme props React defined.

Unfortunately looking at the library I do not see no great way of extending the Theme type available properties (some comments propose some nice ideas). I would recommend the following options

1. Tell typescript to bug off by using bracket notation. If you use bracket notation typescript will generally back off and not check it. I think it can be situational though but worth a try

style={{color:colors['textSecondary']}}

2. Create your own theme that strongly types to the props you know about as well as the base theme props

import {Theme, useTheme} from "@react-navigation/native";

type SyblerTheme = Theme & {
    colors: {
        textSecondary: string;
    };
};

export function useSyblerTheme(): SyblerTheme {
    return useTheme() as any;
}