React Native Wrapper Kit

A comprehensive React Native UI kit with reusable components and utilities to kickstart your mobile app development.

Features

• 🎨 Pre-built Components: Button, TextButton, BottomSheet
• 🎯 Constants: Consistent design system (colors, fonts, spacing, etc.)
• 📱 Cross-platform: Works on both iOS and Android
• 📦 TypeScript Support: Full TypeScript declarations included
• 🔧 Utilities: Common styles and helper functions
• 🎨 Customizable: Easy to theme and customize

Installation

npm install react-native-wrapper-kit
# or
yarn add react-native-wrapper-kit

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-native

Quick Start

Basic Usage

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, BottomSheet, COLORS, SPACING } from 'react-native-wrapper-kit';

export default function MyScreen() {
  const [showBottomSheet, setShowBottomSheet] = useState(false);

  return (
    <View style={styles.container}>
      <Button
        title="Open Bottom Sheet"
        onPress={() => setShowBottomSheet(true)}
        variant="primary"
      />
      
      <BottomSheet
        visible={showBottomSheet}
        onClose={() => setShowBottomSheet(false)}
        title="My Bottom Sheet"
      >
        {/* Your content here */}
      </BottomSheet>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: SPACING.base,
    backgroundColor: COLORS.background,
  },
});

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from 'react-native-wrapper-kit';

<Button
  title="Click me"
  onPress={() => console.log('Pressed!')}
  variant="primary" // primary, secondary, success, danger, warning, outline, ghost
  size="medium"     // small, medium, large
  fullWidth={false}
  loading={false}
  disabled={false}
  icon={<Icon name="star" />}
  iconPosition="left" // left, right
/>

TextButton

A simpler text-based button component.

import { TextButton } from 'react-native-wrapper-kit';

<TextButton
  title="Text Button"
  onPress={() => console.log('Pressed!')}
  variant="primary" // primary, secondary, outline
  size="medium"     // small, medium, large
/>

BottomSheet

A customizable bottom sheet modal component.

import { BottomSheet } from 'react-native-wrapper-kit';

<BottomSheet
  visible={isVisible}
  onClose={() => setIsVisible(false)}
  title="Sheet Title"
  height={400}
  showHandle={true}
  closeOnBackdrop={true}
  closeOnSwipeDown={true}
>
  {/* Your content */}
</BottomSheet>

Constants

Access the design system constants:

import { COLORS, FONTS, SPACING, COMMON_STYLES } from 'react-native-wrapper-kit';

const styles = StyleSheet.create({
  container: {
    ...COMMON_STYLES.centerContainer,
    backgroundColor: COLORS.background,
    padding: SPACING.base,
  },
  title: {
    fontSize: FONTS.size.xl,
    fontWeight: FONTS.weight.bold,
    color: COLORS.textPrimary,
  },
});

Available Constants

• COLORS - Comprehensive color palette with semantic colors
• FONTS - Typography scale with sizes, weights, and line heights
• SPACING - Consistent spacing values for layouts
• BORDER_RADIUS - Border radius scale for rounded corners
• SHADOWS - Pre-defined shadow styles for elevation
• DIMENSIONS - Screen dimensions and device info
• PLATFORM - Platform utilities and checks
• ANIMATION - Animation duration and easing constants
• COMMON_STYLES - Reusable style objects for common layouts
• API - API endpoint structure (customizable)
• STORAGE_KEYS - Consistent storage key naming
• APP - App-level constants

Color System

The package includes a comprehensive color system:

import { COLORS } from 'react-native-wrapper-kit';

// Primary colors
COLORS.primary        // Main brand color
COLORS.primaryLight   // Lighter variant
COLORS.primaryDark    // Darker variant

// Semantic colors
COLORS.success        // Green for success states
COLORS.error          // Red for error states
COLORS.warning        // Orange for warning states
COLORS.info           // Blue for info states

// Neutral colors
COLORS.white
COLORS.black

// Gray scale
COLORS.gray50 - COLORS.gray900

// Text colors
COLORS.textPrimary
COLORS.textSecondary
COLORS.textTertiary

// Background colors
COLORS.background
COLORS.backgroundSecondary

Typography System

import { FONTS } from 'react-native-wrapper-kit';

// Font sizes
FONTS.size.xs     // 10
FONTS.size.sm     // 12
FONTS.size.base   // 14
FONTS.size.md     // 16
FONTS.size.lg     // 18
FONTS.size.xl     // 20
FONTS.size.xxl    // 24

// Font weights
FONTS.weight.light      // 300
FONTS.weight.normal     // 400
FONTS.weight.medium     // 500
FONTS.weight.semibold   // 600
FONTS.weight.bold       // 700

Adding Navigation & State Management

This package focuses on UI components and utilities. For navigation and state management, install and configure them separately:

For Navigation

npm install @react-navigation/native @react-navigation/stack
# Follow React Navigation setup guide

For State Management

npm install @reduxjs/toolkit react-redux
# Or use any other state management solution

Example Screen

The package includes an example screen you can use as reference:

import { ExampleScreen } from 'react-native-wrapper-kit';

// Use as reference or directly in your app
<ExampleScreen />

Customization

Theming

You can extend or override the default constants:

import { COLORS as DEFAULT_COLORS } from 'react-native-wrapper-kit';

const CUSTOM_COLORS = {
  ...DEFAULT_COLORS,
  primary: '#your-brand-color',
  secondary: '#your-secondary-color',
};

Custom Components

Build on top of the existing components:

import { Button } from 'react-native-wrapper-kit';

const MyCustomButton = (props) => (
  <Button
    {...props}
    style={[{ borderRadius: 20 }, props.style]}
  />
);

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you find this package helpful, please consider giving it a star ⭐️