rn-ui-kits

rn-ui-kit - É um kit de componentes para usuário baseado em React-Native

UI Componentes:

• Block: baseado em React-Native View componente
• Card: Block com adereços predefinidos
• Button: baseado em React-Native TouchableOpacity com props e estilos predefinidos
• Input: baseado em React-Native TextInput componente
• Text: Componente de texto baseado em React-Native Text componente

Ferramentas e utilitários:

• helpers: getMargins, getPaddings
• rgba: Transforme cores hexadecimais em cores rgba usando opacidade
• theme.js: tema padrão para componentes da IU com valores predefinidos para: COLORS, SIZES, FONTS

Block

https://reactnative.dev/docs/view

https://reactnative.dev/docs/flexbox

Usage:

• Bloco padrão tem flex: 1

<Block>
  <Text>componentes</Text>
</Block>

• desabilitar flex

<Block flex="{0}">
  <Text>flex: 0</Text>
</Block>
<Block noFlex>
  <Text>flex: 0</Text>
</Block>

• definir tamanhos para flex

<Block flex="{0.5}">
  <Text>flex: 0.5</Text>
</Block>

• renderizar conteudo em linha flexDirection: row

<Block row>
  <Text>texto 1</Text>
  <Text>texto 2</Text>
</Block>

• centralização vertical do conteúdo alignItems: center

<Block center>
  <Text>texto 1</Text>
  <Text>texto 2</Text>
</Block>

• centralização horizontal do conteúdo justifyContent: center

<Block middle>
  <Text>texto 1</Text>
  <Text>texto 2</Text>
</Block>

• centralização vertical e horizontal do conteúdo alignItems: center e justifyContent: center

<Block center middle>
  <Text>text 1</Text>
  <Text>text 2</Text>
</Block>

Colors

• irá renderizar backgroundColor usando cores predefinidas do array COLORS theme.js
• cores predefinidas: primary, secondary, tertiary, black, white, gray, error, warning, success, info

<Block primary>
  <Text>backgroundColor: COLORS.primary</Text>
</Block>
<Block secondary>
  <Text>backgroundColor: COLORS.secondary</Text>
</Block>

• cor personalizada usando cor hexadecimal

<Block color="#DDDDDD">
  <Text>backgroundColor: #DDDDDD</Text>
</Block>

Organize o conteúdo usando justifyContent

https://reactnative.dev/docs/layout-props#justifycontent

• espaço entre o conteúdo

<Block space="between">
  <Text>1st text</Text>
  <Text>2nd text</Text>
</Block>

• espaço uniformemente no conteúdo

<Block space="evenly">
  <Text>1st text</Text>
  <Text>2nd text</Text>
</Block>

• espaço em torno do conteúdo

<Block space="around">
  <Text>1st text</Text>
  <Text>2nd text</Text>
</Block>

Border radius

• arredondar os cantos usando borderRadius: 6

<Block radius="{6}">
  <Text>1st texto</Text>
  <Text>2nd texto</Text>
</Block>

Envolva o conteúdo usando flexWrap, padrão flexWrap: 'nowrap'

https://reactnative.dev/docs/flexbox#flex-wrap

• flexWrap: 'wrap'

<Block wrap>
  <Text>1st texto</Text>
  <Text>2nd texto</Text>
  <Text>3rd texto</Text>
</Block>

Para animações, adereços animados podem ser usados para renderizar o componente Animated.View

• animated irá renderizar Animated.View

<Block animated>
  <Text>animated view</Text>
</Block>

Para visualizações de área segura, o componente SafeAreaView podem ser usados para renderizar endereços seguros

• safe irá renderizar SafeAreaView

<Block safe>
  <Text>safe area view</Text>
</Block>

Button

https://reactnative.dev/docs/touchableopacity

https://reactnative.dev/docs/touchablehighlight

https://reactnative.dev/docs/touchablenativefeedback

https://reactnative.dev/docs/touchablewithoutfeedback

Por Padrão é renderizado uma instância de TouchableOpacity

• TouchableHighlight

<button highlight>
  <Text>instância de TouchableHighlight</Text>
</button>

• TouchableNativeFeedback

<button nativeFeedback>
  <Text>instância de TouchableNativeFeedback</Text>
</button>

• TouchableWithoutFeedback

<button withoutFeedback>
  <Text>instância de TouchableWithoutFeedback</Text>
</button>

Colors

• irá renderizar backgroundColor usando cores predefinidas do array COLORS theme.js
• cores predefinidas: primary, secondary, tertiary, black, white, gray, error, warning, success, info

<button primary>
  <Text>backgroundColor: COLORS.primary</Text>
</button>
<button transparent>
  <Text>backgroundColor: "transparent"</Text>
</button>

• cor personalizada usando cor hexadecimal

<button color="#DDDDDD">
  <Text>backgroundColor: #DDDDDD</Text>
</button>

Definir activeOpacity usando opacity prop valor predefinido é activeOpacity=0.8

<button opacity="{0.5}">
  <Text>opacity={0.5}</Text>
</button>

Botão com bordar

<button primary outlined>
  <Text>outlined</Text>
</button>

Desabilitar botão

<button disabled>
  <Text>disabled</Text>
</button>
<button disabled="{false}">
  <Text>false</Text>
</button>

Adicionar flex ao estilo do botão

<button flex>
  <Text>flex=1</Text>
</button>
<button flex="{2}">
  <Text>flex=2</Text>
</button>

Adicionar altura ao estilo do botão

<button height="{58}">
  <Text>height=58</Text>
</button>

Card

https://reactnative.dev/docs/view

https://reactnative.dev/docs/flexbox

Usando o componente Block com props predefinidos: cor, radius e padding

<Card>
  <Text>default card</Text>
</Card>

Adicionar borda usando a props radius

<Card radius="{8}">
  <Text>radius={8}</Text>
</Card>

Padding usando a props padding

• valor padrão padding={SIZES.base}

<Card padding="{12}">
  <Text>padding={12}</Text>
</Card>

Definir sombra usando adereços de sombra

• sombra padrão com cor preta e elevação
• shadowOffset é calculado usando elevação - 1
• shadowRadius é igual ao valor de elevação

<Card shadow>
  <Text>shadow</Text>
</Card>

<Card shadow elevation="{2}">
  <Text>shadow elevation={2}</Text>
</Card>

Definir borderColor usando prop contornado

• valor definido como padrão para borderWidth: 1 é borderColor: Utils.rgba(COLORS.black, 0.16) com alpha 0.16

<Card outlined>
  <Text>outlined</Text>
</Card>

Input

https://reactnative.dev/docs/textinput

<input placeholder="NOME INPUT" />

Text

https://reactnative.dev/docs/text

Uso:

• fontSize predefinido por theme.js

<Text h1>fontSize of 34 from FONTS.h1</Text>
<Text h2>fontSize of 24 from FONTS.h2</Text>
<Text h3>fontSize of 20 from FONTS.h3</Text>
<Text title>fontSize of 18 from FONTS.title</Text>
<Text subtitle>fontSize of 14 from FONTS.subtitle</Text>
<Text caption>fontSize of 12 from FONTS.caption</Text>
<Text small>fontSize of 10 from FONTS.small</Text>

• fontSize definido pelo usuário

<Text size="{20}">fontSize of 20</Text>

• margin e padding

<Text margin="{4}">set margin 4 to: top, right, bottom & left</Text>
<Text padding="{6}">set margin 6 to: top, right, bottom & left</Text>

• estilo de texto

<Text transform>textTransform: capitalize, lowercase, uppercase</Text>
<Text regular>fontWeight from WEIGHTS.regular</Text>
<Text bold>fontWeight from WEIGHTS.bold</Text>
<Text semibold>fontWeight from WEIGHTS.semibold</Text>
<Text medium>fontWeight from WEIGHTS.medium</Text>
<Text light>fontWeight from WEIGHTS.light</Text>
<Text weight="700">fontWeight from user input</Text>

• cores de texto

<Text primary>cor de COLORS.primary</Text>
<Text secondary>cor de COLORS.secondary</Text>
<Text tertiary>cor de COLORS.tertiary</Text>
<Text black>cor de COLORS.black</Text>
<Text white>cor de COLORS.white</Text>
<Text gray>cor de COLORS.gray</Text>
<Text info>cor de COLORS.info</Text>
<Text success>cor de COLORS.success</Text>
<Text warning>cor de COLORS.warning</Text>
<Text error>cor de COLORS.error</Text>
<Text color="#DDD">cor definida pelo usuário</Text>

tema personalizado usando a estrutura de dados src / theme.js

• crie um tema personalizado definindo: const customTheme.js
• com a seguinte estrutura para reescrever qualquer valor

{
  COLORS: {
    primary: "cyan" or "#8A00D4",
    secondary: "fucsia" or "#D527B7",
    tertiary: "yellow" or "#FFC46B"
  },
  SIZES: {
    font: 15,
    h1: 28
    title: 17
  }
}

• incluir o tema personalizado para os adereços de componentes

<Text primary theme="{customTheme}">primary using new color: #8A00D4</Text>

• o texto animado pode ser usado com "animated" props

<Text animated>will render Animated.Text</Text>