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.

Installation

You can install the React Native UI Kit using npm:

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

Configuration

The puniker.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.

Available Components

1. 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.

2. Button The Button component provides a customizable button element. You can define button styles in the configuration file to maintain a consistent design throughout your app.

3. Spacer The Spacer component is a utility component to create space between elements in your layout.

Example

Here's an example of how to use the Text and Button components in a React Native application:

import React from 'react';
import { Text, Button } from '@puniker/react-native-ui-kit';

const MyComponent = () => {
    return (
        <View>
            <Text type="head_1" color="primary">Hello, World!</Text>
            <Button type="primary">Click Me</Button>
        </View>
    );
};
export default MyComponent;

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.