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

declaration merging for react-native-elements theme

$
0
0

I am using react-native-elements in my react-native application.

My app is wrapped with the ThemeProvider to pass the theme down to all components.

<SafeAreaProvider><ThemeProvider theme={Theme}><Loader visible={loader.loading} text={loader.message} absolute={true} /><RootNavigation /></ThemeProvider></SafeAreaProvider>

In the theme file i define the values i want to use across the app.

const theme = {  colors: {    primary: '#6A69E2',    primaryDark: '#4747c2',    primaryLight: 'rgba(106, 105, 226, 0.35)',    gray: {      dark: '#242424',      default: '#666',      medium: '#999',      light: '#ccc',      lightest: '#e7e7e7',    },  },  text: {    size: {      small: 12,      default: 16,      large: 18,      h1: 26,      h2: 22,      h3: 20,    },  },  Text: {    style: {      fontSize: 16,      color: '#242424',      fontFamily: 'Roboto',    },  },  Button: {    style: {      borderRadius: 50,    },    disabledStyle: {      backgroundColor: 'rgba(106, 105, 226, 0.35)',    },  },};export default theme;

For the values the original theme of react-native-elements providing this is working. For example i can access the colors by using

const theme = useTheme()theme.colors.primary

But when i want to add some new properties like primaryDark i'll get an linter error.

In the doc of react-native-elements is a part about declaration merging, but i don't understand how i can archive thishttps://reactnativeelements.com/docs/customization/#typescript-definitions-extending-the-default-theme.

Somebody could help me with this?


Viewing all articles
Browse latest Browse all 6287

Trending Articles