rn-punikit v0.0.6

README - React Native UI Kit

Description

Welcome to the React Native UI Kit repository! This library provides a set of customizable components for React Native applications built with TypeScript. It currently includes three components: Text, Button, and Spacer. To get started, follow the installation and configuration instructions below.

DOCUMENTACIÓN

Visita la nueva documentación

Guide

1. Installation
   • Configuration
2. Components
   • Text
   • MainButton
3. Hooks
   • useDebounce
   • useClipboard
   • useLocalStorage
4. Styles
   • Classes

Installation

You can install the React Native UI Kit using npm:

npm install @puniker/react-native-ui-kit

Configuration

The puni-kit.config.ts file allows you to customize the styling of components according to your project's design. It should have the following structure:

import { ReactNativeUiKitConfig } from './puniker-config'

module.exports = {
  palette: {
    primary: '#09f',
    secondary: 'red',
    text: 'black',
    light: '#fff',
    dark: '#000',
  },
  buttons: {
    primary: {
      borderRadius: 4,
      backgroundColor: 'primary',
      fontType: 'body_1',
      fontColor: 'light',
    },
  },
  typography: {
    fontFamily: {},
    fontTypes: {
      head_1: {
        fontSize: 34,
        letterSpacing: 0.2,
      },
      head_2: {
        fontSize: 28,
        letterSpacing: 0.2,
      },
      head_3: {
        fontSize: 22,
        letterSpacing: 0.4,
      },
      head_4: {
        fontSize: 20,
        letterSpacing: 0.2,
      },
      body_1: {
        fontSize: 17,
        letterSpacing: 0.2,
      },
      body_2: {
        fontSize: 15,
        letterSpacing: 0.2,
      },
      caption_1: {
        fontSize: 13,
        letterSpacing: 0.2,
      },
      caption_2: {
        fontSize: 11,
        letterSpacing: 0.2,
      },
    },
  },
}

This configuration file is optional, and you can adjust the color palette, button styles, and typography to match your project's design.

Components

Text

The Text component allows you to display text with customizable styles. You can use the configuration file to define typography settings for different text components in your application.

Props

• *type ("head_1" | "head_2" | "head_3" | "head_4" | "body_1" | "body_2" | "caption_1" | "caption_2"): Text type
• *children: Text to render
• align("center" | "left" | "right"): Descripción de la prop2.
• color(string): Descripción de la prop2.
• weight("light" | "regular" | "bold"): Descripción de la prop2.

Usage

<Text type="head_1" color="primary">Hello, World!</Text>

MainButton

Props

• *title (string): Button title
• *onPress (() => void): desc
• key(string): Descripción de la prop2.
• large(boolean): Descripción de la prop2.
• disabled(boolean): Descripción de la prop2.
• bold(boolean): Descripción de la prop2.
• align("flex-start" | "flex-end" | "center" | "stretch" | "baseline"): Descripción de la prop2.

Usage

<MainButton title="Send" onPress={() => {}}>Hello, World!</MainButton>

Hooks

useDebounce

Usage

import { useEffect, useState } from 'react'

export default function Component() {
   const [value, setValue] = useState<string>('')
   const debouncedValue = useDebounce<string>(value, 500)
   useEffect(() => {
      // Triggers when "debouncedValue" changes
   }, [debouncedValue])
}

useClipboard

Usage

const {clipboardText, setClipboard, getClipboard} = useClipboard()

useLocalStorage

Usage

const {getStorage, setStorage, removeKey} = useLocalStorage()

Styles

Classes

StyleSheet.create({
   flexRow: {
      flexDirection: 'row',
   },
   alignItemsCenter: {
      alignItems: 'center',
   },
   justifyContentCenter: {
      justifyContent: 'center',
   },
   spaceBetween: {
      justifyContent: 'space-between',
   },
})

Usage

import {commonStyles} from '@rn-punikit/base'

export default () => {
  return (
    <View styles={[commonStyles.flexRow, commonStyles.alignItemsCenter]}>
    </View>
  )
}

Contributing

We welcome contributions to enhance this library! If you'd like to contribute, please follow our Contributing Guidelines.

License

This project is licensed under the MIT License.

Support

If you have any questions or need assistance, please create an issue on this repository.

Thank you for using React Native UI Kit!

Note: Replace the placeholder URLs and descriptions with your actual content.