KimUI-Kit

KimUI-Kit is a collection of reusable components for React Native that makes building UI simple and efficient. It provides a variety of pre-designed components, including buttons, text fields, spinners, and more, all customizable and ready to use in your React Native apps.

Components

Here are the components included in KimUI-Kit:

• AdaptiveStatusBar: A component for adaptive status bar styling.
• AlertX: A customizable alert component.
• Animator: A component for animation effects like fade, slide, and zoom.
• Avatar: A customizable avatar component.
• Button: A button component that includes IconButton and LinkButton variants.
• CheckBox: A checkbox component for selecting options.
• colors: A module for defining colors used across your application.
• CustomStatusBar: A custom status bar component.
• Divider: A divider component for separating UI elements.
• Dot: A dot indicator component.
• FormWrapper: A wrapper component for forms.
• HorizontalStepper: A horizontal stepper component for multi-step processes.
• List: A list component to display items.
• Locator: A component for displaying location-based information.
• OTPInput: A component for entering OTPs (One-Time Passwords).
• Pagination: A component for paginating lists.
• Popup: A popup modal component.
• RadioButton: A radio button component for selecting a single option.
• Row: A row component for laying out elements in a horizontal row.
• SafeAreaView: A component for rendering content within the safe area.
• Spinner: A loading spinner component.
• TextField: A text field component for user input.
• TextFieldSelect: A text field with a select dropdown.
• ToolBar: A toolbar component for navigation or actions.
• Typography: A typography component for text styling.
• VerticalDivider: A vertical divider component for UI separation.
• VerticalStepper: A vertical stepper component for multi-step processes.

Installation

To install KimUI-Kit in your React Native project, run the following command:

yarn add kimui-kit

Or, if you're using npm:

npm install kimui-kit

Setup

Once installed, you can import the components as needed in your project:

import KUI, { AdaptiveStatusBar, Button, Typography, Avatar, etc. } from 'kimui-kit';

Usage

1. Initialize the Kit

Before using any components, you need to initialize the library with your configuration (e.g., colors, Google Maps API key).

import KUI from 'kimui-kit';

KUI.initialize({
  colors: {
    primary: {
      main: '#6B46C4',
      light: '#6B46C485',
      dark: '#1D2739',
      text: '#fff',
    },
    secondary: {
      main: '#fffbf4',
      light: '#2F5755',
      dark: '#d00',
      text: '#fff',
    },
  },
  googleMapApiKey: '', // Optional but required for using Locator component
});

2. Example Usage of Components

Button

<Button variant="contained" onPress={() => console.log("Button pressed")}>
  Click Me
</Button>

Typography

<Typography variant="h6" color="primary" gutterBottom={16}>
  This is a header
</Typography>

Locator

<Locator
  variant="contained"
  onLocationSelected={location => console.log(location)}
  label="Select Location"
  location={{ description: null }}
  renderInput={inputProps => <TextField {...inputProps} />}
  gutterBottom={16}
/>

Avatar

<Avatar size={50} imageUrl="https://example.com/avatar.jpg" />

Theme and Customization

KimUI-Kit supports dark and light modes, and you can easily switch between them using the UIThemeProvider and UIThemeContext.

import React, { useContext } from 'react';
import { UIThemeProvider, UIThemeContext } from 'kimui-kit';

const App = () => {
  const { themeState } = useContext(UIThemeContext);

  return (
    <UIThemeProvider>
      <Text style={{ color: themeState.value === 'dark' ? '#fff' : '#000' }}>
        Hello, World!
      </Text>
    </UIThemeProvider>
  );
};

Props Reference

Locator Props

interface LocatorProps {
  variant: 'contained' | 'outlined';
  onLocationSelected: (location: any) => void;
  label: string;
  error?: boolean;
  location?: { description: string | null };
  renderInput: (inputProps: any) => JSX.Element;
  gutterBottom?: number;
  helperText?: string;
  float?: boolean;
  country?: string;
}

Typography Props

interface TypographyProps {
  children: React.ReactNode;
  color?: string;
  style?: TextStyle | ViewStyle;
  textCase?: 'capitalize' | 'uppercase' | 'lowercase' | null;
  variant?: 'caption' | 'body1' | 'body2' | 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';
  align?: 'center' | 'left' | 'right';
  gutterBottom?: number;
  fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  fontFamily?: 'Inter-Thin' | 'Inter-Extra-Light' | 'Inter-Light' | 'Inter-Variable' | 'Inter' | 'Inter-Regular' | 'Inter-Medium' | 'Inter-Semi-Bold' | 'Inter-Bold' | 'Inter-Extra-Bold';
}

License

The kimui-kit library is maintained by Kimjay with support from Hoddy Inc. Kimjay is a Senior Full Stack Web and Mobile App Developer with 5 years of working experience.

• Contact: +2349065764742
• Email: [email protected]