re-native-ui

A comprehensive React Native UI component library built with TypeScript, featuring modern design patterns and extensive customization options.

Features

• TypeScript Support: Full TypeScript support with comprehensive type definitions
• Modern Components: 25+ pre-built components for common UI patterns
• Customizable: Extensive theming and styling options
• Form Integration: Built-in support for react-hook-form
• Accessible: Components follow accessibility best practices
• Cross-platform: Works seamlessly on iOS and Android

Installation

npm install re-native-ui
# or
yarn add re-native-ui

Quick Start

import React from "react";
import { View } from "react-native";
import { Button, Text, Box, ThemeProvider } from "re-native-ui";

export default function App() {
  return (
    <ThemeProvider>
      <Box padding={20}>
        <Text variant="h1" marginBottom={16}>
          Welcome to React Native UI
        </Text>
        <Button
          title="Get Started"
          onPress={() => console.log("Button pressed!")}
        />
      </Box>
    </ThemeProvider>
  );
}

Components

Layout Components

• Box - Flexible container with padding, margin, and styling
• Container - Centered container with max-width
• Stack - Vertical or horizontal stack layout
• Grid - Responsive grid system
• StaggeredGrid - Masonry-style grid layout
• Spacer - Flexible spacing component
• Divider - Visual separator

Form Components

• Input - Text input with validation
• PasswordInput - Secure password input
• TextArea - Multi-line text input
• Select - Dropdown selection
• CheckBox - Checkbox input
• RadioGroup - Radio button group
• Switch - Toggle switch
• Slider - Range slider
• StepperInput - Number input with increment/decrement
• DatePicker - Date selection picker
• MaskedInput - Input with format masking
• OTPInput - One-time password input
• TagInput - Tag/keyword input

Form Management

• Form - Form wrapper with validation
• ControlledInput - Controlled input component
• ControlledSelect - Controlled select component

Interactive Components

• Button - Primary, secondary, and outline button variants
• Accordion - Collapsible content sections

Feedback Components

• Snackbar - Toast notifications
• SlideDownToast - Animated toast messages

Typography

• Text - Typography component with variants

Theming

The library includes a comprehensive theming system:

import { ThemeProvider, createTheme } from "re-native-ui";

const customTheme = createTheme({
  colors: {
    primary: "#007AFF",
    secondary: "#5856D6",
    success: "#34C759",
    warning: "#FF9500",
    error: "#FF3B30",
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  typography: {
    h1: {
      fontSize: 32,
      fontWeight: "bold",
    },
    h2: {
      fontSize: 24,
      fontWeight: "600",
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your app components */}
    </ThemeProvider>
  );
}

Form Integration

The library integrates seamlessly with react-hook-form:

import { useForm } from "react-hook-form";
import { Form, ControlledInput, Button } from "re-native-ui";

export default function LoginForm() {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <ControlledInput
        name="email"
        control={control}
        placeholder="Email"
        rules={{ required: "Email is required" }}
      />
      <ControlledInput
        name="password"
        control={control}
        placeholder="Password"
        secureTextEntry
        rules={{ required: "Password is required" }}
      />
      <Button title="Login" type="submit" />
    </Form>
  );
}

Advanced Usage

Custom Styling

import { Box, Text } from "re-native-ui";

export default function CustomComponent() {
  return (
    <Box
      backgroundColor="primary"
      borderRadius={8}
      padding={16}
      shadowColor="#000"
      shadowOffset={{ width: 0, height: 2 }}
      shadowOpacity={0.25}
      shadowRadius={3.84}
      elevation={5}
    >
      <Text color="white" textAlign="center">
        Custom styled component
      </Text>
    </Box>
  );
}

Snackbar Notifications

import { useSnackbar } from "re-native-ui";

export default function MyComponent() {
  const { showSnackbar } = useSnackbar();

  const handleSuccess = () => {
    showSnackbar({
      message: "Operation completed successfully!",
      type: "success",
      duration: 3000,
    });
  };

  return <Button title="Show Success" onPress={handleSuccess} />;
}

API Reference

For detailed API documentation, visit our documentation site.

Contributing

We welcome contributions! Please see our contributing guide for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• Documentation
• Report Issues
• Discussions

Changelog

See CHANGELOG.md for a list of changes and version history.