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?