Right now I'm following the themingreact-native-paper
guide for custom theming. But when trying to consume the theme via the useTheme
hook, it looks like that the response I've got as a theme
object is not properly/fully typed and respectively I'm not able to use the object destructuring autocomplete.
export const LightTheme = { ...PaperDefaultTheme, colors: { customColor: 'green', },};<PaperProvider theme={ colorScheme === "dark" ? { ...DarkTheme } : { ...LightTheme }}><AppProvider> {{...}}</AppProvider></PaperProvider>
Here VSCode displays that the inferred type for the theme
object is const theme: Theme
but does not recognise the theme properties when trying the access them:
import { useTheme } from "react-native-paper";const theme = useTheme();// e.g. theme.colors is not autocompleted
Currently as a solution I'm wrapping the useTheme
hook in a custom one that returns the desired Theme
type from my typings:
import { useTheme as _useTheme } from "react-native-paper";import { Theme } from "../theme";export function useTheme(): Theme { const theme = _useTheme(); return theme;}
At the time of writing, I'm using version 5.0.0-rc.6