Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Is there a way to get typed theme from useTheme() hook in react-native-paper

$
0
0

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>