@gocodingnow/rn-tamagui-boilerplate

import {ms, s, vs} from '@gocodingnow/rn-size-matters'; import { setSizeMattersBaseHeight, setSizeMattersBaseWidth, } from '@gocodingnow/rn-size-matters'; import { createFont, createTamagui, createTokens, setupReactNative, } from '@tamagui/core'; import {shorthands} from '@tamagui/shorthands'; import {themes, tokens as defaultTokens} from '@tamagui/themes'; import merge from 'lodash-es/merge'; import Config from 'react-native-config'; setSizeMattersBaseWidth(parseInt(Config.SIZE_MATTERS_BASE_WIDTH, 10)); setSizeMattersBaseHeight(parseInt(Config.SIZE_MATTERS_BASE_HEIGHT, 10)); import {Image, Text, View} from 'react-native'; setupReactNative({Image, Text, View}); const poppinsFont = createFont({ family: 'Poppins', size: { 4: ms(16, 0.8), true: ms(16, 0.8), ss: ms(10, 0.8), xs: ms(12, 0.8), sm: ms(14, 0.8), base: ms(16, 0.8), md: ms(18, 0.8), lg: ms(20, 0.8), xl: ms(24, 0.8), '2xl': ms(28, 0.8), '3xl': ms(30, 0.8), }, lineHeight: { 20: ms(20, 0.8), 24: ms(24, 0.8), 32: ms(32, 0.8), // ... }, weight: { 400: '400', 500: '500', 600: '600', }, letterSpacing: { 4: 0, 8: -1, }, // (native only) swap out fonts by face/style face: { 400: {normal: 'Poppins-Regular'}, 500: {normal: 'Poppins-Medium'}, 600: {normal: 'Poppins-SemiBold'}, }, // you may also set `transform` as textTransform values // and `style` as fontStyle values }); const size = { 0: 0, 1: 5, 2: 10, '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-3.75': s(15), '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-6.5': s(28), 's-7': s(28), 's-7.5': s(30), 's-8': s(32), 's-8.5': s(34), 's-9': s(36), 's-9.25': s(37), 's-9.5': s(38), 's-10': s(40), 's-10.5': s(42), 's-11': s(44), 's-11.25': s(45), 's-12': s(48), 's-13': s(50), 's-13.5': s(52), 's-13.75': s(55), 's-14': s(56), 's-15': s(60), 's-16': s(64), 's-17': s(68), 's-17.5': s(70), 's-18': s(72), 's-18.75': s(75), 's-19': s(76), 's-19.5': s(78), 's-20': s(80), 's-22': s(88), 's-23': s(92), 's-24': s(96), 's-25': s(100), 's-27.5': s(112), 's-30': s(120), 's-35': s(140), 's-37.5': s(150), 's-82.5': s(330), 'vs-0.5': vs(2), 'vs-0.75': vs(3), 'vs-1': vs(4), 'vs-1.25': vs(5), 'vs-1.5': vs(6), '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-11.25': vs(45), 'vs-11.5': vs(46), 'vs-12': vs(48), 'vs-13': vs(50), 'vs-13.5': vs(52), 'vs-14': vs(56), 'vs-14.5': vs(58), 'vs-15': vs(60), 'vs-15.5': vs(62), 'vs-15.75': vs(64), 'vs-16.25': vs(65), 'vs-16.5': vs(66), 'vs-17': vs(68), 'vs-17.5': vs(68), 'vs-18': vs(72), 'vs-18.75': vs(75), 'vs-19': vs(76), 'vs-19.5': vs(78), 'vs-20': vs(80), 'vs-22': vs(88), 'vs-23': vs(92), 'vs-23.5': vs(94), 'vs-24': vs(96), 'vs-25': vs(100), 'vs-26': vs(104), 'vs-29': vs(116), 'vs-30': vs(120), 'vs-32': vs(128), 'vs-33': vs(132), 'vs-33.5': vs(134), 'vs-34': vs(136), 'vs-35': vs(140), 'vs-40': vs(160), 'vs-43': vs(172), 'vs-50': vs(200), 'vs-82.5': vs(330), }; export const tokens = createTokens({ size, space: {...size, '-1': -5, '-2': -10}, radius: { 0: 0, '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), 's-57.5': s(230), 's-75': s(300), }, zIndex: {0: 0}, color: { bg: '#211939', white: '#fff', black: '#000', blackLight: '#112D32', primary: '#BF3160', gray: '#717171', border: '#F2F2F7', }, }); const config = createTamagui({ shouldAddPrefersColorThemes: false, themeClassNameOnRoot: false, defaultTheme: 'light', fonts: { heading: poppinsFont, body: poppinsFont, true: poppinsFont, }, tokens: merge(defaultTokens, tokens), themes: merge(themes, { light: { primary: tokens.color.primary, bg: tokens.color.white, white: tokens.color.white, gray: tokens.color.gray, border: tokens.color.border, blackLight: tokens.color.blackLight, }, dark: { primary: tokens.color.primary, bg: tokens.color.white, white: tokens.color.white, gray: tokens.color.gray, border: tokens.color.border, blackLight: tokens.color.blackLight, }, }), shorthands, }); export type AppConfig = typeof config; // this will give you types for your components // note - if using your own design system, put the package name here instead of tamagui declare module '@tamagui/core' { // rome-ignore lint/suspicious/noEmptyInterface: <explanation> interface TamaguiCustomConfig extends AppConfig {} } export default config;