Flow, withTheme and extending theme

[ferrannp]

Current behaviour

There is no way to extend the theme without getting Flow errors.

Expected behaviour

Be able to extend the theme without errors. E.g:

type CustomTheme = {
  ..DefaultTheme,
  colors: {
    ...DefaulltTheme.colors,
    primaryaDark: '#bbcccc'
  }
}

What have you tried

In one app, we defined our own withTheme and then all the components are using that instead of the react-native-paper withTheme:

import { withTheme, type Theme } from 'react-native-paper';
import type { WithThemeType } from '@callstack/react-theme-provider/lib/createWithTheme.js.flow';

import { type ThemeColorsType } from './types';

export type ThemeType = {
  ...Theme,
  colors: {
    ...$PropertyType<ThemeType, 'colors'>,
    ...ThemeColorsType,
  },
};

export type ThemeShape = $Shape<{
  ...ThemeType,
  colors: $Shape<$PropertyType<ThemeType, 'colors'>>,
  fonts: $Shape<$PropertyType<ThemeType, 'fonts'>>,
}>;

// eslint-disable-next-line flowtype/no-weak-types
export default ((withTheme: any): WithThemeType<ThemeType, ThemeShape>);

This almost made the job. But when you do things like:

<TextInput
  theme={{
  colors: {
    primary: '#ffffff',
  },
}}

Flow will complain because the theme type used in TextInput is not the one we extended anymore.

Conclusion

We need help in fixing this in Paper. Could we pass to PaperProvider and withTheme the type needed? Some config? Any ideas?

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[Trancever]

This is no longer relevant, because we switched to TS