@gocodingnow/rn-native-base-boilerplate

import { baseBoldFontName, baseFontName, baseMediumFontName, baseSemiBoldFontName, baseRegularFontName, } from '@constants/fonts' import {extendTheme, ColorModeOptions} from 'native-base' import {s, vs} from '@libs/react-native-size-matters' import Config from './native-base.config' import {DefaultTheme} from '@react-navigation/native' const config: ColorModeOptions = { useSystemColorMode: false, initialColorMode: 'light', accessibleColors: false, ...Config, } // navigation theme export const navigationDefaultTheme = { ...DefaultTheme, colors: { ...DefaultTheme.colors, background: '#F3F4F9', }, } // customize theme const nativeBaseTheme = extendTheme({ config, colors: {}, fontConfig: { [baseFontName]: { default: {normal: baseRegularFontName}, normal: {normal: baseRegularFontName}, medium: {normal: baseMediumFontName}, semiBold: {normal: baseSemiBoldFontName}, bold: {normal: baseBoldFontName}, 400: {normal: baseRegularFontName}, 500: {normal: baseMediumFontName}, 600: {normal: baseSemiBoldFontName}, 700: {normal: baseBoldFontName}, }, }, fonts: { body: baseFontName, mono: baseFontName, button: baseFontName, base: baseFontName, }, components: { Checkbox: { baseStyle: { p: 0, borderRadius: 4, _light: { bg: 'white', _checked: { bg: 'transparent', borderColor: 'transparent', _pressed: { borderColor: 'transparent', bg: 'transparent', }, }, _pressed: { borderColor: 'brand.500', }, }, }, defaultProps: { size: 24, }, }, Input: { baseStyle: { fontFamily: 'base', backgroundColor: 'white', height: vs(52), borderRadius: s(10), borderColor: 'white', _light: { fontSize: 16, borderColor: 'white', _focus: { borderColor: 'brand.500', }, _ios: { selectionColor: 'brand.500', }, _android: { selectionColor: 'brand.500', }, }, }, }, Button: { baseStyle: { _loading: { opacity: '70', }, _disabled: { opacity: '70', }, }, variants: { solid: { height: s(52), borderRadius: s(12), _light: { bg: 'white', _pressed: null, }, }, }, defaultProps: { variant: 'solid', }, }, }, fontSizes: { '2xs': 10, xs: 12, sm: 14, md: 16, lg: 18, xl: 20, '2xl': 24, '3xl': 30, '4xl': 36, '5xl': 48, '6xl': 60, '7xl': 72, '8xl': 96, '9xl': 128, }, space: { 's-0.25': s(1), 's-0.5': s(2), 's-0.75': s(3), 's-1': s(4), 's-1.25': s(5), 's-1.5': s(6), 's-1.75': s(7), 's-2': s(8), 's-2.25': s(9), 's-2.5': s(10), 's-3': s(12), 's-3.5': s(14), 's-4': s(16), 's-4.25': s(17), 's-4.5': s(18), 's-4.75': s(19), 's-5': s(20), 's-5.25': s(21), 's-5.5': s(22), 's-6': s(24), 's-7': s(28), 's-7.5': s(30), 's-8': s(32), 's-8.5': s(34), 's-9': s(36), 's-9.5': s(38), 's-10': s(40), 's-10.5': s(42), 's-11': s(44), 's-12': s(48), 's-13': s(50), 's-13.5': s(52), 's-14': s(56), 's-15': s(60), 's-16': s(64), 's-17': s(68), 's-17.75': s(70), 's-18': s(72), 's-20': s(80), 's-24': s(96), 'vs-0.5': vs(2), 'vs-0.75': vs(3), 'vs-1': vs(4), 'vs-1.5': vs(6), 'vs-1.75': vs(5), 'vs-2': vs(8), 'vs-2.25': s(9), 'vs-2.5': vs(10), 'vs-3': vs(12), 'vs-3.5': vs(14), 'vs-3.75': vs(15), 'vs-4': vs(16), 'vs-4.5': vs(18), 'vs-5': vs(20), 'vs-5.25': vs(21), 'vs-5.5': vs(22), 'vs-5.75': vs(23), 'vs-6': vs(24), 'vs-6.5': vs(26), 'vs-7': vs(28), 'vs-7.5': vs(30), 'vs-8': vs(32), 'vs-8.5': vs(34), 'vs-9': vs(36), 'vs-9.5': vs(38), 'vs-10': vs(40), 'vs-10.5': vs(42), 'vs-11': vs(44), 'vs-12': vs(48), 'vs-13': vs(50), 'vs-13.5': vs(52), 'vs-14': vs(56), 'vs-15': vs(60), 'vs-15.5': vs(62), 'vs-15.75': vs(64), 'vs-16.5': vs(66), 'vs-17': vs(68), 'vs-17.5': vs(68), 'vs-18': vs(72), 'vs-20': vs(80), 'vs-23': vs(92), 'vs-23.5': vs(94), 'vs-24': vs(96), 'vs-25': vs(100), 'vs-30': vs(120), 'vs-32': vs(128), 'vs-35': vs(140), }, radii: { 's-0.25': s(1), 's-0.5': s(2), 's-1': s(4), 's-1.25': s(5), 's-1.5': s(6), 's-2': s(8), 's-2.5': s(10), 's-3': s(12), 's-3.5': s(14), 's-4': s(16), 's-4.5': s(18), 's-5': s(20), 's-5.5': s(22), 's-6': s(24), 's-7.5': s(30), 's-8': s(32), 's-9': s(36), 's-10': s(40), 's-10.5': s(42), 's-12': s(48), 's-18': s(72), }, sizes: { 's-1': s(4), 's-1.5': s(6), 's-2': s(8), 's-2.5': s(10), 's-3': s(12), 's-3.5': s(14), 's-4': s(16), 's-4.5': s(18), 's-5': s(20), 's-5.5': s(22), 's-6': s(24), 's-7': s(28), 's-7.5': s(30), 's-8': s(32), 's-8.5': s(34), 's-9': s(36), 's-9.5': s(38), 's-10': s(40), 's-10.5': s(42), 's-11': s(44), 's-12': s(48), 's-13': s(50), 's-13.5': s(52), 's-14': s(56), 's-15': s(60), 's-16': s(64), 's-17': s(68), 's-18': s(72), 's-20': s(80), 's-24': s(96), 'vs-1': vs(4), 'vs-1.5': vs(6), 'vs-2': vs(8), 'vs-2.5': vs(10), 'vs-3': vs(12), 'vs-3.5': vs(14), 'vs-4': vs(16), 'vs-4.5': vs(18), 'vs-5': vs(20), 'vs-6': vs(24), 'vs-7': vs(28), 'vs-7.5': vs(30), 'vs-8': vs(32), 'vs-9': vs(36), 'vs-10': vs(40), 'vs-11': vs(44), 'vs-12': vs(48), 'vs-13': vs(50), 'vs-14': vs(56), 'vs-15': vs(60), 'vs-15.5': vs(62), 'vs-15.75': vs(64), 'vs-16.5': vs(66), 'vs-17': vs(68), 'vs-18': vs(72), 'vs-20': vs(80), 'vs-23': vs(92), 'vs-24': vs(96), 'vs-25': vs(100), 'vs-30': vs(120), 'vs-32': vs(128), 'vs-35': vs(140), }, }) export type NativeBaseThemeType = typeof nativeBaseTheme & {fontConfig: any} export {nativeBaseTheme}