@duabalabs/rn-elements

A comprehensive React Native component library built with TypeScript and Shopify Restyle for consistent theming and design systems.

🚀 Features

• 50+ Pre-built Components: Buttons, Cards, Forms, Navigation, and more
• Theming System: Built on Shopify Restyle for consistent design
• TypeScript Support: Full type safety and IntelliSense
• Responsive Design: Adaptive layouts for different screen sizes
• Dark/Light Mode: Built-in theme switching support
• Form Handling: Integration with react-hook-form and Yup validation
• Navigation Ready: Works seamlessly with React Navigation
• E-commerce Components: Shopping cart, payment, and product components

Installation

# Using npm
npm install @duabalabs/rn-elements

# Using yarn
yarn add @duabalabs/rn-elements

# Using pnpm
pnpm add @duabalabs/rn-elements

Required Peer Dependencies

Install the core theming system:

npm install @shopify/restyle

Optional Peer Dependencies

Install additional packages based on the components you want to use:

# For navigation components
npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs

# For form components
npm install react-hook-form yup @hookform/resolvers

# For SVG icons and animations
npm install react-native-svg react-native-reanimated

# For advanced components (Map, etc.)
npm install @react-native-mapbox-gl/maps react-native-modal

# See full list in package.json peerDependencies

🎨 Theme Setup

Wrap your app with the theme provider:

import React from 'react';
import { AppThemeProvider } from '@duabalabs/rn-elements';
import App from './App';

export default function Main() {
  return (
    <AppThemeProvider>
      <App />
    </AppThemeProvider>
  );
}

🔧 Basic Usage

Button Component

import React from 'react';
import { Button } from '@duabalabs/rn-elements';

function MyScreen() {
  return (
    <Button
      label="Click me"
      variant="primary"
      onPress={() => console.log('Pressed!')}
      isFullWidth
    />
  );
}

Text Component

import { Text } from '@duabalabs/rn-elements';

<Text variant="heading" color="primary">
  Welcome to RN Elements
</Text>

Form Components

import { TextField, Button, FormBuilder } from '@duabalabs/rn-elements';

function LoginForm() {
  return (
    <FormBuilder
      elements={[
        {
          name: 'email',
          type: 'email',
          label: 'Email',
          required: true,
        },
        {
          name: 'password',
          type: 'password',
          label: 'Password',
          required: true,
        },
      ]}
      onSubmit={(data) => console.log(data)}
      validationSchema={loginSchema}
    />
  );
}

Layout Components

import { Box, Container, Spacer } from '@duabalabs/rn-elements';

function MyLayout() {
  return (
    <Container>
      <Box backgroundColor="primary" padding="m" borderRadius="l">
        <Text color="white">Content inside a themed box</Text>
      </Box>
      <Spacer height="m" />
      <Button label="Action" variant="secondary" />
    </Container>
  );
}

🎭 Theming

Custom Theme

Create your own theme by extending the default theme:

import { createTheme } from '@shopify/restyle';

const customTheme = createTheme({
  colors: {
    primary: '#007AFF',
    secondary: '#FF9500',
    background: '#F2F2F7',
    // ... more colors
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    // ... more spacing
  },
  // ... other theme properties
});

// Use with AppThemeProvider
<AppThemeProvider theme={customTheme}>
  <App />
</AppThemeProvider>

Theme Switching

import { useAppTheme } from '@duabalabs/rn-elements';

function ThemeToggle() {
  const { theme, setTheme } = useAppTheme();
  
  return (
    <Button
      label={theme === 'dark' ? 'Switch to Light' : 'Switch to Dark'}
      onPress={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    />
  );
}

📱 Components

Core Components

• <Button> - Customizable button with variants
• <Text> - Typography with theme variants
• <Box> - Layout container with Restyle props
• <Container> - Page-level container
• <Spacer> - Consistent spacing component
• <Divider> - Visual separator

Form Components

• <TextField> - Text input with validation
• <TextInput> - Basic text input
• <CheckBox> - Checkbox component
• <RadioButton> - Radio button selection
• <DateTimePicker> - Date and time selection
• <FormBuilder> - Dynamic form generation

Navigation Components

• <Header> - App header with navigation
• <TabView> - Tab navigation
• Navigation helpers and utilities

UI Components

• <Card> - Content cards with variants
• <Loading> - Loading indicators
• <ActivityIndicator> - Activity spinner
• <Modal> - Modal dialogs
• <Gallery> - Image gallery
• <RatingView> - Star ratings

E-commerce Components

• <PaymentMethodCard> - Payment method display
• <CartIconWithBadge> - Shopping cart icon
• Shopping and payment components

🛠 Advanced Usage

Custom Components

Create your own components using the theme system:

import { createBox } from '@shopify/restyle';
import { Theme } from '@duabalabs/rn-elements';

const CustomCard = createBox<Theme>();

function MyComponent() {
  return (
    <CustomCard
      backgroundColor="cardBackground"
      padding="m"
      margin="s"
      borderRadius="m"
      shadowOpacity={0.1}
    >
      {/* Your content */}
    </CustomCard>
  );
}

Form Validation

Using with Yup validation:

import * as yup from 'yup';
import { FormBuilder } from '@duabalabs/rn-elements';

const validationSchema = yup.object().shape({
  email: yup.string().email('Invalid email').required('Email is required'),
  password: yup.string().min(6, 'Password too short').required('Password is required'),
});

function LoginForm() {
  return (
    <FormBuilder
      elements={formElements}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    />
  );
}

🎯 TypeScript Support

This library is built with TypeScript and provides full type safety:

import { ButtonProps, TextProps, Theme } from '@duabalabs/rn-elements';

// Component props are fully typed
const MyButton: React.FC<ButtonProps> = ({ label, onPress, ...props }) => {
  return <Button label={label} onPress={onPress} {...props} />;
};

// Theme is typed for auto-completion
const styled = createBox<Theme>();

📖 API Reference

Theme Properties

The theme includes the following properties:

• colors - Color palette
• spacing - Spacing scale
• borderRadii - Border radius values
• typography - Font styles and sizes
• breakpoints - Responsive breakpoints

Component Props

All components support Restyle props for styling:

• margin, padding - Spacing props
• backgroundColor, color - Color props
• width, height - Layout props
• And many more...

🤝 Contributing

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

📄 License

MIT License - see the LICENSE file for details.

🔗 Links

• GitHub Repository
• NPM Package
• Shopify Restyle Documentation

🆘 Support

If you find this library helpful, please give it a ⭐ on GitHub!

For issues and feature requests, please use the GitHub Issues page.