@jakos-hub/theme-provider

Install

yarn add @jakos-hub/theme-provider

How to use

1. Create a theme config file main-theme.ts

import {ThemeConfigType} from '@jakos-hub/theme-provider'

const MainTheme: ThemeConfigType = {
    palette: {
        primary: '#263238',
        primaryDark: '#000a12',
        primaryLight: '#4f5b62',
        secondary: '#3f51b5',
        secondaryDark: '#002984',
        secondaryLight: '#757de8',
        textColor: '#263238',
        textColorDark: '#FFF',
        textPrimaryContrast: '#ffffff',
        textSecondaryContrast: '#ffffff',
        success: '#00e676',
        danger: '#ff5252',
        info: '#FFF',
        warning: '#FFF',
        light: '#FFFFFF',
        dark: '#000000',
    },
    variables: {
        borderRadius: 50,
        fontSize: {
            caption: 10,
            paragraph: 18,
            subtitle: 24,
            text: 16,
            title: 32,
        },
        button: {
            marginH: 1,
        },
    },
}

export default MainTheme

2. Import the theme provider app.tsx

import React from 'react'
import ThemeProvider from '@jakos-hub/theme-provider'
import mainTheme from 'main-theme.ts'

const App: React.FC = () => {
    return (
        <ThemeProvider theme={mainTheme}>
            {/* Some code... */}
        </ThemeProvider>
    )
}

Now you can style your components

styles.ts

import {StyleConfigType, StylesTypes} from '@jakos-hub/theme-provider'
import {ViewStyle, TextStyle, ImageStyle} from 'react-native'

/**
 * You should define the stylesheet key types, then youl receive the right
 * suggestions when writing your styles
 */
type ListMenuItemStyles = {
    iconWrapper: ViewStyle
    root: ViewStyle
    primaryText: TextStyle
    icon: TextStyle
}

/** 
 * When styling as function you will re
 */
const styles: StyleConfig<ListMenuItemStyles> = () => ({
    icon: {
        // Your styling...
    },
    iconWrapper: {
        // Your styling...
    },
    root: {
        // Your styling...
    },
    primaryText: {
        // Your styling...
    },
})

export default styles

MyComponent.tsx

import React from 'react'
import {View, Text} from 'react-native'
import {useStyles} from '@jakos-hub/theme-provider'
import styles from './styles'

const MyComponent: React.FC = () => {
    const classes = useStyles(styles, {type})
    return (
        <View style={classes.root}>
            <View className={classes.iconWrapper}>
                <Text classes={classes.icon} >Icon</Text>
            </View>
            <Text className={classes.primaryText}>
                Some text
            </Text>
        </View>
    )
}

export default ListMenuItem